/* =====================================================================
   SCROLL REVEAL  (item 139)
   ---------------------------------------------------------------------
   One motion spec, loaded by BOTH marketing pages: the light home page at
   "/" and the dark preview at /preview-home/. Shared rather than copied so
   the two cannot drift apart, which is why this is its own file and not a
   block inside either page's stylesheet.

   Every value is a token. See the --reveal-* block in style.css for which
   of them are references to existing families (four of six) and which are
   genuinely new (two).

   ---------------------------------------------------------------------
   THE STATE MACHINE, and why the no-JS case is visible rather than hidden

     data-rg="init"   markup ships in this state. Matched by NOTHING below.
     data-rg="wait"   set by reveal.js. Hidden, offset, no transition.
     data-rg="in"     set by reveal.js on intersection. Visible, animated.

   "init" is styled by no rule in this file ON PURPOSE. If reveal.js fails
   to load, errors, or is blocked, every group stays at "init" and the page
   renders fully visible with no animation. The alternative (authoring
   opacity: 0 into the resting state) hides the entire page behind a
   script, which is the failure mode where a marketing page ships blank.

   Nothing here may be rewritten to put opacity: 0 on "init".

   ---------------------------------------------------------------------
   NO !important, unlike the design output

   The design canvas needed !important on all of these because its elements
   carry inline style attributes, and a stylesheet cannot beat an inline
   style without it. Our markup uses classes, so there is nothing to beat
   and the flags are pure liability: they would make any later override of
   a transition impossible to write. Dropped deliberately.
   ===================================================================== */

/* A group that opts into the shorter travel distance. Used where the
   reveal happens inside a card or a tight column, and 16px of movement
   reads as the layout shifting rather than as content arriving. */
[data-rg][data-compact] { --reveal-distance: var(--reveal-distance-sm); }

[data-rg="wait"] [data-r] {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
	transition: none;
}

[data-rg="in"] [data-r] {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity var(--reveal-duration) var(--reveal-ease),
	            transform var(--reveal-duration) var(--reveal-ease);
}

/* The stagger. A child marked data-r="3" starts three increments after the
   group does, so a row of cards arrives in sequence rather than as a block.
   Eight steps because that is the largest group on either page (the eight
   category cards); a ninth child would simply share the eighth's delay
   rather than break. */
[data-rg="in"] [data-r="1"] { transition-delay: calc(var(--reveal-stagger) * 1); }
[data-rg="in"] [data-r="2"] { transition-delay: calc(var(--reveal-stagger) * 2); }
[data-rg="in"] [data-r="3"] { transition-delay: calc(var(--reveal-stagger) * 3); }
[data-rg="in"] [data-r="4"] { transition-delay: calc(var(--reveal-stagger) * 4); }
[data-rg="in"] [data-r="5"] { transition-delay: calc(var(--reveal-stagger) * 5); }
[data-rg="in"] [data-r="6"] { transition-delay: calc(var(--reveal-stagger) * 6); }
[data-rg="in"] [data-r="7"] { transition-delay: calc(var(--reveal-stagger) * 7); }
[data-rg="in"] [data-r="8"] { transition-delay: calc(var(--reveal-stagger) * 8); }

/* ---------------------------------------------------------------------
   Reduced motion: no reveal at all, not a gentler one.

   The design output's reduced-motion block covered its hover and hero
   transitions but NOT the reveal, which would have left the one piece of
   motion that fires without any user action running for someone who asked
   for less of it. Same reasoning preview-hero.js already applies to the
   photo rotation: someone who has asked for less motion is not asking for
   slower motion.

   Written as a full reset of both states rather than a transition: none, so
   that a group still sitting at "wait" when the query matches becomes
   visible instead of staying at opacity 0 forever.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-rg="wait"] [data-r],
	[data-rg="in"] [data-r] {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}