/* ------------------------------------------------------------------ */
/* Shared background layer (1.22.0)                                     */
/* ------------------------------------------------------------------ */
/* The layer behind a band's content, for every host that has one: the
   Layout Section, and from 1.23.0 either side of a Split Section. Lifted
   out of blocks/section/style.css the way the edge layer was lifted at
   1.17.0 — see includes/background.php for the builder.

   Descendant selectors are safe here: .sx-bg is a sealed layer that never
   holds content. Each host aliases --sx-bg-focal to its own focal custom
   property (the Section's --sx-focal, a pane's --ss-focal), so the layer
   never has to know which one it is sitting in. No clamp/min/max, so no
   old-browser twin is needed. */

.sx-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.sx-bg picture {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
}

.sx-bg img,
.sx-bg video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--sx-bg-focal, 50% 50%);
}

.sx-bg__scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Slideshow: 2-4 stills cross-fading behind the content                */
/* ------------------------------------------------------------------ */
/* Same layer as a single background image, so the host's mask — and
   therefore its shaped edges — clip it without any extra work.

   Pure CSS: every frame runs the same animation over the whole cycle and
   is offset by a negative delay, so nothing needs a timer or a script.
   One keyframe set per count because a keyframe selector is a percentage
   and cannot read a custom property: the hold and fade windows cannot be
   derived from the slide count at runtime. Hence the ceiling of four. */
.sx-bg.is-slideshow img {
	opacity: 0;
	animation-name: sx-bg-3;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-delay: calc(var(--sx-bg-i, 0) * var(--sx-bg-interval, 6s) * -1);
}

.sx-bg.is-slideshow.has-2-slides img {
	animation-name: sx-bg-2;
	animation-duration: calc(var(--sx-bg-interval, 6s) * 2);
}

.sx-bg.is-slideshow.has-3-slides img {
	animation-name: sx-bg-3;
	animation-duration: calc(var(--sx-bg-interval, 6s) * 3);
}

.sx-bg.is-slideshow.has-4-slides img {
	animation-name: sx-bg-4;
	animation-duration: calc(var(--sx-bg-interval, 6s) * 4);
}

/* Each frame holds, then hands over with a long overlap — a short fade
   reads as a cut, which is the opposite of "gently". */
@keyframes sx-bg-2 {
	0%, 40% { opacity: 1; }
	50%, 90% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes sx-bg-3 {
	0%, 26% { opacity: 1; }
	33%, 93% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes sx-bg-4 {
	0%, 19% { opacity: 1; }
	25%, 94% { opacity: 0; }
	100% { opacity: 1; }
}

/* Reduced motion: no cycling at all. The first frame stays, which is a
   still background — not a degraded slideshow. The scrim is a <span>, so
   it is untouched by the img rules.

   The video rule is a BELT, not the mechanism: assets/background-view.js
   never attaches a source under reduce, so the element has nothing to show
   and has fetched nothing. Hiding it anyway means a clip already playing
   when the preference flips mid-session cannot leave a last frame standing
   over the poster. */
@media (prefers-reduced-motion: reduce) {
	/* The per-count rules above are (0,3,1); a (0,2,1) reset would lose
	   animation-name and duration to them and the frames only stood still
	   because the other longhands reset — true of the Layout Section's own
	   rules since 1.11.0. Listing the counts here makes the reset win outright. */
	.sx-bg.is-slideshow img,
	.sx-bg.is-slideshow.has-2-slides img,
	.sx-bg.is-slideshow.has-3-slides img,
	.sx-bg.is-slideshow.has-4-slides img {
		animation: none;
		opacity: 0;
	}

	.sx-bg.is-slideshow img:first-of-type {
		opacity: 1;
	}

	.sx-bg.is-video video {
		display: none;
	}
}

/* Texture layer (1.35.0): a span printed after the background layer by
   ssec_texture_render(), over the band colour and photo, under the caption and
   content. A stencil is a mask in the band's text colour (or --sx-tex-color), so
   it follows dark mode; .is-image keeps its own pixels. Not dimmed in dark mode on
   purpose: the theme's dim is an allowlist of img/video, which a span never
   matches. Windows high contrast drops it. */
.sx-texture {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	opacity: var(--sx-tex-opacity, 0.2);
	background-color: var(--sx-tex-color, currentColor);
	-webkit-mask-image: var(--sx-tex-img);
	mask-image: var(--sx-tex-img);
	-webkit-mask-size: var(--sx-tex-size, auto);
	mask-size: var(--sx-tex-size, auto);
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

.sx-texture.is-image {
	background-color: transparent;
	background-image: var(--sx-tex-img);
	background-size: var(--sx-tex-size, auto);
	background-repeat: repeat;
	-webkit-mask-image: none;
	mask-image: none;
}

@media (forced-colors: active) {
	.sx-texture {
		display: none;
	}
}