/*------------------------------------*\
	Extrablack — Lottie Hero
	Layered composite: bg video plate + transparent Lottie overlays.
	Poster <img> is the LCP element; it stays until the video plays.
\*------------------------------------*/

.lottie-hero{position:relative;width:100%;background:#000;}

/* Fixed-aspect full-bleed stage (1920x1080). */
.lottie-hero-stage{
	position:relative;
	width:100%;
	aspect-ratio:1920 / 1080;
	overflow:hidden;
	background:#000;
}
/* Legacy fallback for browsers without aspect-ratio. */
@supports not (aspect-ratio: 1 / 1){
	.lottie-hero-stage{height:0;padding-bottom:56.25%;}
}

/* Layer 0: background video plate. */
.lottie-hero-bg{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;
	z-index:0;
	background:#000;
}

/* Layer 1: poster (LCP + fallback). Sits above the video until playback starts. */
.lottie-hero-poster{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;
	z-index:1;
	opacity:1;
	transition:opacity .6s ease;
	pointer-events:none;
}
.lottie-hero.is-playing .lottie-hero-poster{opacity:0;}

/* Texture (halftone dot grid) over the video plate, below the text overlays.
   Slow horizontal drift (left <-> right) so the dot field visibly slides across the
   fixed video/text behind it — far more legible than a zoom on a uniform grid, where
   every dot looks like its neighbour. Scaled up 1.14 to overscan; the pan amplitude
   (+/-5% -> ~5.7% on screen) stays inside the 7% overhang so it always covers. Eases
   out at each end and loops via alternate — seamless, no pop. */
.lottie-hero-texture{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;
	z-index:2;
	pointer-events:none;
	transform:scale(1.14) translateX(-5%);
	will-change:transform;
	animation:extrablack-hero-dots 18s ease-in-out infinite alternate;
}
@keyframes extrablack-hero-dots{
	from{ transform:scale(1.14) translateX(-5%); } /* dots shifted left */
	to  { transform:scale(1.14) translateX(5%);  } /* dots shifted right */
}

/* Layer 2..n: transparent Lottie overlays, positioned from the preset map.
   Hidden until the animation is loaded + playing, so the Lottie's frame 0
   never flashes on screen during init. */
.lottie-hero-overlay{
	position:absolute;
	pointer-events:none;
	opacity:0;
	transition:opacity .25s ease;
	/* top / left / width / aspect-ratio / z-index set inline per slot */
}
.lottie-hero-overlay.is-ready{opacity:1;}
.lottie-hero-overlay svg{
	display:block;
	width:100% !important;
	height:100% !important;
}

/* Visually-hidden real <h1> for SEO / screen readers. */
.lottie-hero-heading{
	position:absolute !important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

/* No-JS fallback: show the static poster only.
   (Reduce-motion visitors still get the animation — client decision.) */
.no-js .lottie-hero-bg,
.no-js .lottie-hero-overlay{display:none;}

/*------------------------------------*\
	Mobile (matches theme breakpoint)
\*------------------------------------*/
@media screen and (max-width:1000px){
	/* Taller, centre-cropped stage on presets that opt in (var set inline). The
	   bg video keeps object-fit:cover, so it fills the taller frame and crops. */
	.lottie-hero-stage{ aspect-ratio: var(--m-stage, 1920 / 1080); }

	/* Optional per-preset crop anchor (e.g. Services keeps the LEFT of the plate on
	   mobile instead of centre-cropping). Defaults to centre when the var is unset. */
	.lottie-hero-bg,
	.lottie-hero-poster{ object-position: var(--m-obj-pos, 50% 50%); }

	/* Per-slot mobile position/size overrides (default to the desktop values).
	   !important because the desktop values are inline styles, which otherwise win. */
	.lottie-hero-overlay{
		left: var(--ml) !important;
		top: var(--mt) !important;
		width: var(--mw) !important;
		aspect-ratio: var(--mar) !important;
	}
	.lottie-hero-overlay.m-hide{ display:none !important; }

	/* Tighten the gap below the hero. The blocks directly after it are often empty
	   placeholder blocks (no content, h=0) whose top+bottom margins create a big dead
	   gap before the real content. Collapse the first three; give the next a small top. */
	.layout-lottie_hero + .block-row-wrapper,
	.layout-lottie_hero + .block-row-wrapper + .block-row-wrapper,
	.layout-lottie_hero + .block-row-wrapper + .block-row-wrapper + .block-row-wrapper{
		margin-top: 0;
		margin-bottom: 0;
	}
	.layout-lottie_hero + .block-row-wrapper + .block-row-wrapper + .block-row-wrapper + .block-row-wrapper{
		margin-top: 16px;
	}
}