/*
 * Scroll reveal — one-shot block entrance, plus a scroll-driven rule draw.
 *
 * PROGRESSIVE ENHANCEMENT IS THE WHOLE DESIGN. There is deliberately no hidden
 * state in this file's base layer: an element carrying [data-mhg-reveal] is a
 * plain, visible element until assets/js/mhg-reveal.js adds .is-mhg-armed — and
 * that script only arms elements it has already created a working observer for.
 * With JS off, with JS broken, in a browser without IntersectionObserver, or in
 * print, the page is readable text.
 *
 * The rule draw is CSS-only and meets the same gate by a different route:
 * scaleX(0) exists only inside @keyframes, and keyframes only apply when the
 * animation applies, which only happens inside the @supports block below.
 * Firefox (scroll-driven animations still behind a flag) sees a rule at full
 * width, which is correct rather than degraded.
 *
 * Durations are longer and distances shorter than the house hover transitions.
 * A hover answers a pointer and must keep up with it. A reveal has no cause the
 * reader is waiting on, so it can afford 520ms over 6px — and long duration over
 * short distance is precisely the difference between a reveal that is felt and
 * one that is noticed.
 */

/* ---------------------------------------------------------------
   One-shot block reveal
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	[data-mhg-reveal].is-mhg-armed {
		opacity: 0;
		transform: translateY( var( --mhg-motion-reveal-shift ) );
	}

	/* The transition lives on the SHOWN state, not the armed one, so arming is
	   instantaneous and only unarming animates. */
	[data-mhg-reveal].is-mhg-shown {
		opacity: 1;
		transform: none;
		transition:
			opacity var( --mhg-motion-reveal-duration ) var( --mhg-ease-out-quad )
				var( --mhg-reveal-delay, 0ms ),
			transform var( --mhg-motion-reveal-duration-fast ) var( --mhg-ease-out-quart )
				var( --mhg-reveal-delay, 0ms );
	}
}

/*
 * UNDER REDUCED MOTION, NOTHING IS EVER HIDDEN.
 *
 * The original spec armed a reduced-motion cross-fade here — opacity 0, then a
 * 200ms linear fade in. That cannot work on this site any more, and shipping it
 * would be dead CSS. assets/css/mhg-style.css now carries ONE global
 * reduced-motion block that sets `transition-duration: 0.01ms !important` on
 * every element, so the fade is over before it starts.
 *
 * Given that, hiding the block first buys a reduced-motion reader nothing and
 * costs them a real risk: if the script arms an element and then fails before
 * showing it, the content is gone. Not arming at all is both simpler and the
 * safer failure mode. Note the arming rules above are scoped to
 * `no-preference`, so a reduced-motion reader never gets `opacity: 0` from this
 * file at all — the script's class is inert on them.
 *
 * The consequence: --mhg-motion-reduce-duration was NOT added to the token file.
 */

/* Stagger, only where a container opts in. The index is a custom property set
   by the script, not a style rule — it carries no visual value itself. */
[data-mhg-reveal-group] > [data-mhg-reveal] {
	--mhg-reveal-delay: calc(
		var( --mhg-reveal-i, 0 ) * var( --mhg-motion-reveal-stagger )
	);
}

/*
 * PRINT IS THE MECHANISM, NOT A FALLBACK.
 *
 * The obvious approach is a `beforeprint` listener calling showAll(). It is
 * actively wrong. show() adds .is-mhg-shown, which carries a 520ms transition;
 * `beforeprint` fires synchronously and the engine snapshots as soon as the
 * handler returns, so in the engines where the event DOES fire it captures the
 * transition at its start value — opacity 0. The listener produces exactly the
 * blank blocks it was written to prevent. There is no beforeprint listener in
 * the script; this rule is what guarantees print output.
 */
@media print {
	[data-mhg-reveal],
	[data-mhg-reveal].is-mhg-armed {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------
   Gold rule draw — scroll-driven, no JS
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	/* Both properties are tested: some builds shipped animation-timeline
	   without animation-range. */
	@supports (
		( animation-timeline: view() ) and ( animation-range: entry 0% entry 100% )
	) {
		.mhg-svc-rule--draw {
			transform-origin: left center;
			/* Shorthand FIRST. animation-timeline and animation-range are
			   reset-only in the `animation` shorthand — declaring the shorthand
			   afterwards silently resets the timeline to auto and the rule
			   animates on a clock instead of on scroll. */
			animation: mhg-rule-draw linear both;
			animation-timeline: view();
			animation-range: entry 15% entry 55%;
		}

		/* No `to` block: the implicit one is the element's own computed values,
		   which is what we want. animation-duration is deliberately absent — a
		   scroll timeline ignores it. */
		@keyframes mhg-rule-draw {
			from {
				transform: scaleX( 0 );
			}
		}
	}
}