/* css/gen6-motion.css (2026-10-15, experience-v9 spec C) — sitewide motion system.
   Motion explains state; it never delays the H1 or the primary action, never scroll-jacks, never moves text on
   scroll (no parallax). Every hook is opt-in and fully static under prefers-reduced-motion or without JS.

   HOOKS FOR OTHER BUILDERS (pair with js/gen6-motion.js):
   - data-reveal                 one staged reveal when the element first enters the viewport (translateY 12px + fade)
       data-reveal="fade"        fade only (maps, images)
       data-reveal-stagger       on a parent: its direct children reveal 40ms apart (cap 12)
     Never put data-reveal on an H1, a hero, or a primary action. The first screen is revealed instantly.
   - data-countup                a LIVE number already rendered as text ("1,284", "$612K", "4.2%") counts up once on
                                 view and ends on the exact original text. Never use on a static or invented number.
                                 Call Gen6Motion.countUp(el) after a live endpoint rewrites the text.
   - data-draw                   SVG paths/lines inside draw in once on view (charts, routes, map outlines).
   - .g6m-press                  press-down scale(.98) on :active (buttons, chips, cards)
   - .g6m-lift                   hover lift on pointer devices (cards)
   - .g6m-sweep                  underline-sweep link
   - .g6m-depth                  soft overlap from a hero into the next band (negative top margin + shadow)
   Tokens: --m-fast 160ms, --m-base 260ms, --m-slow 420ms, --m-ease, --m-spring (also used by gen6-leadflow.css). */

:root {
  --m-fast: 160ms; --m-base: 260ms; --m-slow: 420ms;
  --m-ease: cubic-bezier(.2,.8,.2,1);
  --m-spring: cubic-bezier(.32,1.28,.54,1);
  --m-stagger: 40ms;
}

/* Reveal: hidden only once the script has armed the element (html.g6m-on + .g6m-armed), so no-JS shows everything. */
html.g6m-on [data-reveal].g6m-armed { opacity: 0; transform: translate3d(0, 12px, 0); }
html.g6m-on [data-reveal="fade"].g6m-armed { transform: none; }
html.g6m-on [data-reveal].g6m-armed.is-revealed { opacity: 1; transform: none; transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease); transition-delay: calc(var(--g6m-i, 0) * var(--m-stagger)); }
html.g6m-on [data-reveal-stagger].g6m-armed > * { opacity: 0; transform: translate3d(0, 12px, 0); }
html.g6m-on [data-reveal-stagger].g6m-armed.is-revealed > * { opacity: 1; transform: none; transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease); transition-delay: calc(var(--g6m-i, 0) * var(--m-stagger)); }
h1[data-reveal], .g6-hero [data-reveal], .g6ph [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Count-up keeps its width steady while digits change. */
[data-countup] { font-variant-numeric: tabular-nums; }

/* Draw-in. */
html.g6m-on [data-draw].g6m-armed :is(path, line, polyline, circle, rect) { stroke-dasharray: var(--g6m-len, 1000); stroke-dashoffset: var(--g6m-len, 1000); }
html.g6m-on [data-draw].g6m-armed.is-revealed :is(path, line, polyline, circle, rect) { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--m-ease); }

/* Press, lift, sweep. */
.g6m-press { transition: transform var(--m-fast) var(--m-ease); }
.g6m-press:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .g6m-lift { transition: transform var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
  .g6m-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(9,94,147,.12); }
}
.g6m-sweep { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--m-base) var(--m-ease); padding-bottom: 2px; }
.g6m-sweep:hover, .g6m-sweep:focus-visible { background-size: 100% 1.5px; }
.g6m-depth { position: relative; z-index: 2; margin-top: -28px; border-radius: 28px 28px 0 0; box-shadow: 0 -18px 40px rgba(9,94,147,.10); }

@media (prefers-reduced-motion: reduce) {
  html.g6m-on [data-reveal].g6m-armed, html.g6m-on [data-reveal-stagger].g6m-armed > *, html.g6m-on [data-draw].g6m-armed :is(path, line, polyline, circle, rect) { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .g6m-press, .g6m-press:active, .g6m-lift, .g6m-lift:hover, .g6m-sweep { transition: none !important; transform: none !important; }
}
@media print { html.g6m-on [data-reveal].g6m-armed, html.g6m-on [data-reveal-stagger].g6m-armed > * { opacity: 1 !important; transform: none !important; } }