/**
 * Aurea — motion system.
 * CSS-first. Every animation degrades to a fully visible, static state and is
 * disabled under prefers-reduced-motion. JS only toggles .is-visible classes.
 *
 * @package Aurea
 */

@layer aurea-motion {

	/* Scroll reveal base state. Content is visible by default; the reveal
	   opacity is only applied once JS confirms motion is allowed AND the
	   observer is active (body.fse-js). Without JS, nothing is hidden. */
	.fse-reveal {
		--fse-reveal-y: 24px;
	}

	body.fse-js .fse-reveal {
		opacity: 0;
		transform: translate3d(0, var(--fse-reveal-y), 0);
		transition:
			opacity var(--wp--custom--duration--reveal, 700ms) var(--wp--custom--ease--out, cubic-bezier(0.16,1,0.3,1)),
			transform var(--wp--custom--duration--reveal, 700ms) var(--wp--custom--ease--out, cubic-bezier(0.16,1,0.3,1));
		transition-delay: var(--fse-reveal-delay, 0ms);
	}
	body.fse-js .fse-reveal.is-visible {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	/* Reveal variants (set via a utility class on the block). */
	.fse-reveal--left { --fse-reveal-x: -28px; }
	.fse-reveal--right { --fse-reveal-x: 28px; }
	body.fse-js .fse-reveal--left,
	body.fse-js .fse-reveal--right {
		transform: translate3d(var(--fse-reveal-x, 0), 0, 0);
	}
	body.fse-js .fse-reveal--left.is-visible,
	body.fse-js .fse-reveal--right.is-visible {
		transform: translate3d(0, 0, 0);
	}
	.fse-reveal--scale { --fse-reveal-y: 0px; }
	body.fse-js .fse-reveal--scale { transform: scale(0.96); }
	body.fse-js .fse-reveal--scale.is-visible { transform: scale(1); }

	/* Staggered children: delays applied via nth-child. */
	body.fse-js .fse-stagger > .fse-reveal:nth-child(1) { --fse-reveal-delay: 0ms; }
	body.fse-js .fse-stagger > .fse-reveal:nth-child(2) { --fse-reveal-delay: 80ms; }
	body.fse-js .fse-stagger > .fse-reveal:nth-child(3) { --fse-reveal-delay: 160ms; }
	body.fse-js .fse-stagger > .fse-reveal:nth-child(4) { --fse-reveal-delay: 240ms; }
	body.fse-js .fse-stagger > .fse-reveal:nth-child(5) { --fse-reveal-delay: 320ms; }
	body.fse-js .fse-stagger > .fse-reveal:nth-child(6) { --fse-reveal-delay: 400ms; }

	/* Floating decorative shapes drift. */
	@keyframes fse-float {
		0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
		50% { transform: translate3d(0, -26px, 0) scale(1.06); }
	}
	.fse-floating-shape {
		animation: fse-float 12s ease-in-out infinite;
	}
	.fse-floating-shape--slow { animation-duration: 18s; }
	.fse-floating-shape--delay { animation-delay: -6s; }

	/* Gradient sheen sweep across hero eyebrow / dividers. */
	@keyframes fse-sheen {
		0% { background-position: -200% 0; }
		100% { background-position: 200% 0; }
	}
	.fse-animated-line {
		background: linear-gradient(90deg, transparent, rgba(200,169,106,0.6), transparent);
		background-size: 200% 100%;
		animation: fse-sheen 4.5s linear infinite;
	}

	/* Soft entrance for the hero once loaded (no JS dependency; pure CSS). */
	@keyframes fse-rise {
		from { opacity: 0; transform: translateY(18px); }
		to { opacity: 1; transform: translateY(0); }
	}
	.fse-hero-rise > * {
		animation: fse-rise var(--wp--custom--duration--slow, 520ms) var(--wp--custom--ease--out, cubic-bezier(0.16,1,0.3,1)) both;
	}
	.fse-hero-rise > *:nth-child(2) { animation-delay: 90ms; }
	.fse-hero-rise > *:nth-child(3) { animation-delay: 180ms; }
	.fse-hero-rise > *:nth-child(4) { animation-delay: 270ms; }
	.fse-hero-rise > *:nth-child(5) { animation-delay: 360ms; }

	/* Marquee for logo / trust strips. Duplicated content in markup. */
	@keyframes fse-marquee {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
	.fse-marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	}
	.fse-marquee__track {
		display: flex;
		gap: clamp(2rem, 5vw, 4rem);
		width: max-content;
		animation: fse-marquee 28s linear infinite;
	}
	.fse-marquee:hover .fse-marquee__track {
		animation-play-state: paused;
	}

	/* Infinite Grid: endless diagonal scroll (ported from provided component). */
	@keyframes fse-grid-scroll {
		from { background-position: 0 0, 0 0; }
		to { background-position: 40px 40px, 40px 40px; }
	}

	/* Illuminated hero: soft on-load bloom for the glow headline. */
	@keyframes fse-glow-in {
		from { opacity: 0; filter: url(#fse-glow) brightness(1.6); }
		to { opacity: 1; }
	}
	body.fse-js .fse-hero-rise .fse-glow-text {
		animation: fse-glow-in 1s var(--wp--custom--ease--out, cubic-bezier(0.16,1,0.3,1)) both;
	}
}

/* ------------------------------------------------------------------ *
 * REDUCED MOTION — hard override. Nothing moves; everything is visible.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	:root {
		scroll-behavior: auto;
	}
	body.fse-js .fse-reveal,
	body.fse-js .fse-reveal--left,
	body.fse-js .fse-reveal--right,
	body.fse-js .fse-reveal--scale {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.fse-floating-shape,
	.fse-animated-line,
	.fse-hero-rise > *,
	.fse-hero-rise .fse-glow-text,
	.fse-grid__layer,
	.fse-marquee__track {
		animation: none !important;
	}
	/* Hide the cursor-reveal grid layer when motion is reduced. */
	.fse-grid__reveal { display: none; }
	.fse-card,
	.wp-block-button__link,
	.wp-block-image.is-style-aurea-tilt img {
		transition: none !important;
	}
}