/* =====================================================================
   Motion — direction-aware section reveal (scroll down AND scroll up),
   stagger, image mask reveals, hover choreography.
   Hidden states only apply when JS has armed the page (html.rv-ready),
   so content is always visible without JS or with reduced motion.
   ===================================================================== */

html.rv-ready [data-reveal] {
	--rv-x: 0px; --rv-y: 40px; --rv-s: 1;
	opacity: 0;
	transform: translate3d(var(--rv-x), var(--rv-y), 0) scale(var(--rv-s));
	transition: opacity .9s var(--ease), transform 1s var(--ease);
	transition-delay: var(--rv-d, 0ms);
	will-change: opacity, transform;
}
/* Entering from the top edge (user is scrolling UP) mirrors the motion */
html.rv-ready [data-reveal][data-from="top"] { --rv-y: -40px; }
html.rv-ready [data-reveal="left"] { --rv-x: -56px; --rv-y: 0px; }
html.rv-ready [data-reveal="right"] { --rv-x: 56px; --rv-y: 0px; }
html.rv-ready [data-reveal="scale"] { --rv-s: .92; --rv-y: 24px; }
html.rv-ready [data-reveal="fade"] { --rv-y: 0px; }
html.rv-ready [data-reveal="rise-lg"] { --rv-y: 80px; }
html.rv-ready [data-reveal="rise-lg"][data-from="top"] { --rv-y: -80px; }
html.rv-ready [data-reveal].rv-in { opacity: 1; transform: none; }

/* Staggered children: parent carries data-stagger, JS writes --i on each child */
html.rv-ready [data-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 36px, 0);
	transition: opacity .8s var(--ease), transform .9s var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}
html.rv-ready [data-stagger][data-from="top"] > * { transform: translate3d(0, -36px, 0); }
html.rv-ready [data-stagger].rv-in > * { opacity: 1; transform: none; }

/* Image mask reveal */
html.rv-ready [data-mask] { clip-path: inset(0 0 100% 0 round var(--r-lg)); transition: clip-path 1.2s var(--ease); }
html.rv-ready [data-mask][data-from="top"] { clip-path: inset(100% 0 0 0 round var(--r-lg)); }
html.rv-ready [data-mask].rv-in { clip-path: inset(0 0 0 0 round var(--r-lg)); }

/* Headline split reveal — JS wraps words in .w > span */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.split-words .w > span { display: inline-block; }
html.rv-ready .split-words .w > span { transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--wi, 0) * 60ms); }
html.rv-ready .split-words[data-from="top"] .w > span { transform: translateY(-110%); }
html.rv-ready .split-words.rv-in .w > span { transform: none; }

/* Animated bars (width set by JS from data-w when in view) */
.bar > i[data-w] { width: 0; }

/* Counters: no style needed */

/* Parallax helper */
[data-parallax] { will-change: transform; }

/* Hover choreography */
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease); }
.magnetic { transition: transform .35s var(--ease); }
.shine { position: relative; overflow: hidden; }
.shine::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); transition: left .9s var(--ease); pointer-events: none; }
.shine:hover::after { left: 140%; }

/* Page enter */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
main { animation: page-in .6s var(--ease); }

/* Reduced motion — everything visible, nothing moves */
@media (prefers-reduced-motion: reduce) {
	html.rv-ready [data-reveal], html.rv-ready [data-stagger] > *, html.rv-ready [data-mask], html.rv-ready .split-words .w > span {
		opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
	}
	.marquee-track, .float-piece, .scan-line, .cta-band::before, .trust-pill .tp-badge i { animation: none !important; }
	html { scroll-behavior: auto; }
}