/* ==========================================================================
   Centurion Services — Cinematic hero motion
   Subtle, editorial entrance choreography for the hero sections. Kept in
   keeping with the clean brand: slow easing, small travel, one-shot on load.
   Applies to the homepage hero AND all four service heroes (plant + the
   car/property/supplies division heroes).
   All motion is gated behind prefers-reduced-motion: no-preference and uses
   animation-fill-mode: backwards so it never fights hover transforms
   (e.g. the mosaic tile zoom).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	@keyframes cslRise {
		from { opacity: 0; transform: translateY(18px); }
		to   { opacity: 1; transform: none; }
	}

	/* Camera focus-pull: image settles from a soft over-zoom + blur.
	   End state (scale 1.15) matches .csl-mosaic__bg base so the release
	   into hover (scale 1.22) is seamless. */
	@keyframes cslFocusIn {
		from { opacity: 0; transform: scale(1.30); filter: blur(8px); }
		to   { opacity: 1; transform: scale(1.15); filter: blur(0); }
	}

	/* Gentle settle for hero image panels that sit at scale(1) at rest
	   (division/plant hero visuals). Ends at scale(1) so nothing is left
	   zoomed or clipped. */
	@keyframes cslSettleIn {
		from { opacity: 0; transform: scale(1.06); filter: blur(6px); }
		to   { opacity: 1; transform: scale(1);    filter: blur(0); }
	}

	/* One-time diagonal light sweep across a hero — a title-card glint. */
	@keyframes cslSweep {
		from { transform: translateX(-160%) skewX(-12deg); }
		to   { transform: translateX(420%)  skewX(-12deg); }
	}

	/* --- 1. Entrance choreography: stagger the hero copy children ---
	   Each hero nests its copy differently, so the copy containers are
	   listed together and the children share the staggered delays. */
	.csl-hero__copy > *,
	.csl-div-hero__copy > *,
	.csl-plant-hero__inner > div:first-child > *,
	.csl-plant-tax-hero__inner > * {
		animation: cslRise 0.75s cubic-bezier(.2,.7,.2,1) backwards;
	}
	.csl-hero__copy > :nth-child(1),
	.csl-div-hero__copy > :nth-child(1),
	.csl-plant-hero__inner > div:first-child > :nth-child(1),
	.csl-plant-tax-hero__inner > :nth-child(1) { animation-delay: .05s; }
	.csl-hero__copy > :nth-child(2),
	.csl-div-hero__copy > :nth-child(2),
	.csl-plant-hero__inner > div:first-child > :nth-child(2),
	.csl-plant-tax-hero__inner > :nth-child(2) { animation-delay: .15s; }
	.csl-hero__copy > :nth-child(3),
	.csl-div-hero__copy > :nth-child(3),
	.csl-plant-hero__inner > div:first-child > :nth-child(3),
	.csl-plant-tax-hero__inner > :nth-child(3) { animation-delay: .25s; }
	.csl-hero__copy > :nth-child(4),
	.csl-div-hero__copy > :nth-child(4),
	.csl-plant-hero__inner > div:first-child > :nth-child(4),
	.csl-plant-tax-hero__inner > :nth-child(4) { animation-delay: .35s; }
	.csl-hero__copy > :nth-child(5),
	.csl-div-hero__copy > :nth-child(5),
	.csl-plant-hero__inner > div:first-child > :nth-child(5),
	.csl-plant-tax-hero__inner > :nth-child(5) { animation-delay: .45s; }
	.csl-hero__copy > :nth-child(6),
	.csl-div-hero__copy > :nth-child(6),
	.csl-plant-hero__inner > div:first-child > :nth-child(6),
	.csl-plant-tax-hero__inner > :nth-child(6) { animation-delay: .55s; }

	/* --- 2a. Homepage mosaic: tiles rise in, images focus-pull, staggered --- */
	.csl-hero__mosaic .csl-mosaic__cell {
		animation: cslRise 0.7s cubic-bezier(.2,.7,.2,1) backwards;
	}
	.csl-hero__mosaic .csl-mosaic__cell:nth-child(1) { animation-delay: .30s; }
	.csl-hero__mosaic .csl-mosaic__cell:nth-child(2) { animation-delay: .42s; }
	.csl-hero__mosaic .csl-mosaic__cell:nth-child(3) { animation-delay: .54s; }
	.csl-hero__mosaic .csl-mosaic__cell:nth-child(4) { animation-delay: .66s; }

	.csl-mosaic__cell--image .csl-mosaic__bg {
		animation: cslFocusIn 1.15s cubic-bezier(.2,.7,.2,1) backwards;
	}
	.csl-hero__mosaic .csl-mosaic__cell:nth-child(1) .csl-mosaic__bg { animation-delay: .30s; }
	.csl-hero__mosaic .csl-mosaic__cell:nth-child(2) .csl-mosaic__bg { animation-delay: .42s; }
	.csl-hero__mosaic .csl-mosaic__cell:nth-child(3) .csl-mosaic__bg { animation-delay: .54s; }
	.csl-hero__mosaic .csl-mosaic__cell:nth-child(4) .csl-mosaic__bg { animation-delay: .66s; }

	/* --- 2b. Service heroes: settle the hero image / visual panel in --- */
	.csl-div-hero__image,
	.csl-plant-hero__visual {
		animation: cslSettleIn 1.1s cubic-bezier(.2,.7,.2,1) 0.35s backwards;
	}

	/* --- 3. One-time light sweep across each hero --- */
	.csl-hero,
	.csl-plant-hero,
	.csl-div-hero { position: relative; }
	.csl-hero__inner,
	.csl-plant-hero__inner,
	.csl-div-hero__inner { position: relative; z-index: 2; }
	.csl-hero::after,
	.csl-plant-hero::after,
	.csl-div-hero::after {
		content: "";
		position: absolute; top: 0; bottom: 0; left: 0;
		width: 45%;
		z-index: 3;
		pointer-events: none;
		background: linear-gradient(100deg,
			transparent 0%,
			rgba(255,255,255,0.10) 45%,
			rgba(240,169,59,0.08) 55%,
			transparent 100%);
		transform: translateX(-160%) skewX(-12deg);
		animation: cslSweep 1.7s ease-in 0.25s 1 backwards;
	}
}