/**
 * TAG Strategies: animations.
 *
 * The keyframes the components use (child global/_animations.scss) and the
 * scroll-linked line motion that replaced GSAP ScrollTrigger. base.css
 * carries the global prefers-reduced-motion guard.
 *
 * @package TGS
 */

/* ==========================================================================
   Keyframes
   ========================================================================== */

/* The shimmer on the current nav item and the counter. */
@keyframes gradient {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

/* Buttons, the play button, the marquee text. */
@keyframes gradient-alt {
	0% {
		background-position: 1% 50%;
	}

	50% {
		background-position: 99% 50%;
	}

	100% {
		background-position: 1% 50%;
	}
}

/* The marquee track: eight copies of the terms, so -37.5% to -62.5% is one
   copy's width and the loop is seamless. */
@keyframes marquee {
	from {
		transform: translateX(-37.5%);
	}

	to {
		transform: translateX(-62.5%);
	}
}

/* Homepage CTA words (opacity 0 + blur to clear). */
@keyframes fade-in {
	100% {
		opacity: 1;
		filter: blur(0);
	}
}

/* Featured-work select box closing. */
@keyframes HideList {
	from {
		transform: scaleY(1);
	}

	to {
		transform: scaleY(0);
	}
}

/* One keyframe for every scroll-linked drift; each element sets its own
   --tgs-scroll-x. */
@keyframes tgs-scroll-x {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(var(--tgs-scroll-x, 0));
	}
}

/* ==========================================================================
   Scroll-linked line motion (was GSAP ScrollTrigger, scrub)
   ==========================================================================
 *
 * .tgs-scroll-motion marks the scroller-pinned header (page-header with
 * 'scroll' => true; the home hero reuses it). Over the first half of the
 * header's height (60% without an image) the heading lines and the media
 * drift sideways:
 *   page header: .line-1 -345px, .line-2 +500px, .line-3 +260px, media +100vw
 *   home hero:   .line-1 -300px (the hero sets --tgs-scroll-x itself)
 * Only from 1024px, only without prefers-reduced-motion, as before. Where
 * scroll timelines are unsupported, app.js initScrollMotion() writes the
 * same transforms from a rAF loop (it checks the same media query).
 */
.tgs-scroll-motion {
	/* Header height: 100vh (1024-1399), 85vh (>= 1400). End = 50% / 60% of it. */
	--tgs-scroll-end: 50vh;
}

.tgs-scroll-motion:not(.has-image) {
	--tgs-scroll-end: 60vh;
}

.tgs-scroll-motion .line-1 {
	--tgs-scroll-x: -345px;
}

.tgs-scroll-motion .line-2 {
	--tgs-scroll-x: 500px;
}

.tgs-scroll-motion .line-3 {
	--tgs-scroll-x: 260px;
}

.tgs-scroll-motion [data-tgs-scroll-media] {
	--tgs-scroll-x: 100vw;
}

@media (min-width: 1400px) {
	.tgs-scroll-motion {
		--tgs-scroll-end: 42.5vh;
	}

	.tgs-scroll-motion:not(.has-image) {
		--tgs-scroll-end: 51vh;
	}
}

/*
 * Eased like the old gsap.to() default (power1.out, 1 - (1 - p)^2), sampled
 * every 5% so the drift stays within about 1px of the GSAP transforms (the
 * old scrub mapped scroll progress onto the eased tween). app.js applies
 * the same curve in its rAF fallback.
 */
@supports (animation-timeline: scroll()) {
	@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
		.tgs-scroll-motion :is(.line-1, .line-2, .line-3),
		.tgs-scroll-motion [data-tgs-scroll-media] {
			animation: tgs-scroll-x both;
			animation-timing-function: linear(0, 0.0975 5%, 0.19 10%, 0.2775 15%, 0.36 20%, 0.4375 25%, 0.51 30%, 0.5775 35%, 0.64 40%, 0.6975 45%, 0.75 50%, 0.7975 55%, 0.84 60%, 0.8775 65%, 0.91 70%, 0.9375 75%, 0.96 80%, 0.9775 85%, 0.99 90%, 0.9975 95%, 1);
			animation-timeline: scroll(root block);
			animation-range: 0 var(--tgs-scroll-end);
		}
	}
}