/* motion.css — shared motion utilities (the "motion kit"). Loaded on every page, after components.css.
   Only transform + opacity are animated. Hidden/initial states exist ONLY when JS is present AND the visitor
   has not asked for reduced motion, so content is always visible without JS or with Reduce Motion on.

   .u-reveal                    fade + rise once when scrolled into view   (IntersectionObserver, motion.js)
   .u-reveal--delay-1..3        stagger siblings
   .u-reveal--now               play on page load with CSS only (use above the fold)
   .u-mask-reveal               headline lines slide up out of a mask, once
     > .u-mask-reveal__line     one per visual line (author decides the breaks)
       > .u-mask-reveal__inner  the text
   .u-mask-reveal--now          play on page load with CSS only (use for the hero headline)

   Put .u-reveal on a WRAPPER around components that have their own transform (e.g. .c-card hover lift). */

/* ---------- Structure (always applies, no motion) ---------- */
.u-mask-reveal__line {
	display: block;
	overflow: hidden;
	padding: 0 0.06em 0.14em;   /* room for descenders + italic overhang inside the clip... */
	margin: 0 -0.06em -0.14em;  /* ...without changing layout */
}
.u-mask-reveal__inner { display: block; }
.u-mask-reveal__line:nth-child(2) { --line: 1; }
.u-mask-reveal__line:nth-child(3) { --line: 2; }
.u-mask-reveal__line:nth-child(4) { --line: 3; }
.u-mask-reveal__line:nth-child(5) { --line: 4; }
.u-mask-reveal__line:nth-child(6) { --line: 5; }
.u-reveal--delay-1 { --reveal-delay: calc(var(--reveal-step) * 1); }
.u-reveal--delay-2 { --reveal-delay: calc(var(--reveal-step) * 2); }
.u-reveal--delay-3 { --reveal-delay: calc(var(--reveal-step) * 3); }

@keyframes studio-rise {
	from { opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes studio-mask-up {
	from { transform: translate3d(0, 110%, 0); }
	to   { transform: none; }
}
/* Failsafe: if JS is flagged present but motion.js never runs, show everything after 2.5s. */
@keyframes studio-reveal-failsafe { to { opacity: 1; transform: none; } }
@keyframes studio-mask-failsafe   { to { transform: none; } }

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

	/* ---------- Scroll reveal ---------- */
	.js .u-reveal:not(.u-reveal--now) {
		opacity: 0;
		transform: translate3d(0, var(--reveal-distance), 0);
		transition: opacity var(--dur-base) var(--ease-signature), transform var(--dur-base) var(--ease-signature);
		transition-delay: var(--reveal-delay, 0s);
	}
	.js .u-reveal:not(.u-reveal--now).is-in { opacity: 1; transform: none; }
	.js:not(.js-ready) .u-reveal:not(.u-reveal--now):not(.is-in) { animation: studio-reveal-failsafe 0.01s 2.5s forwards; }

	/* ---------- Mask reveal ---------- */
	.js .u-mask-reveal:not(.u-mask-reveal--now) .u-mask-reveal__inner {
		transform: translate3d(0, 110%, 0);
		transition: transform var(--dur-slow) var(--ease-signature);
		transition-delay: calc(var(--reveal-step) * var(--line, 0));
	}
	.js .u-mask-reveal:not(.u-mask-reveal--now).is-in .u-mask-reveal__inner { transform: none; }
	.js:not(.js-ready) .u-mask-reveal:not(.u-mask-reveal--now):not(.is-in) .u-mask-reveal__inner { animation: studio-mask-failsafe 0.01s 2.5s forwards; }

	/* ---------- On-load variants: pure CSS, no JS needed ---------- */
	.u-reveal--now {
		animation: studio-rise var(--dur-base) var(--ease-signature) both;
		animation-delay: var(--reveal-delay, 0s);
	}
	.u-mask-reveal--now .u-mask-reveal__inner {
		animation: studio-mask-up var(--dur-slow) var(--ease-signature) both;
		animation-delay: calc(var(--reveal-step) * var(--line, 0));
	}
}

/* Printing never hides content. */
@media print {
	.u-reveal, .u-mask-reveal__inner { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}