/* v3 motion (n6). Loads after v3-design.css; g.css and motion.js untouched.
   Only opacity, translate and colour move. Rises use `translate`, not `transform`, so the g.css
   press feedback (.btn:active transform) still works on revealed elements.
   Every rule that hides or moves sits inside (prefers-reduced-motion: no-preference); g.css also
   switches off all animation and transition under `reduce`. Nothing is hidden unless JS ran:
   [data-r] only exists after motion.js marks it, and the hero entrance is CSS that ends visible. */
:root{
  --m-fast:150ms;   /* hover and colour feedback */
  --m-base:240ms;   /* reveals, menu drop */
  --m-hero:600ms;   /* the one hero title rise */
  --m-rise:8px;
}

/* screen only: printing never hides content that has not been scrolled to. */
@media screen and (prefers-reduced-motion:no-preference){

  /* 1. Section reveal: motion.js marks parts [data-r] with --i and adds .is-in once per section.
        Quiet: fade plus an 8px rise, 240ms, the 70ms stagger kept from motion.js.
        The longer transition list keeps g.css's own button/link transitions on revealed parts. */
  [data-r]{opacity:0;translate:0 var(--m-rise)}
  .is-in [data-r],[data-r].is-in{
    opacity:1;translate:none;
    transition:opacity var(--m-base) var(--ease) calc(min(var(--i,0),4) * 70ms),
      translate var(--m-base) var(--ease) calc(min(var(--i,0),4) * 70ms),
      background-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease),
      text-decoration-thickness var(--m-fast) var(--ease),text-underline-offset var(--m-fast) var(--ease);
  }
  /* The hero has its own entrance. Parts already on screen when the reveal script ran
     (marked by v3-motion.js) stay put: hiding text that was already painted would blink. */
  .hero [data-r],[data-r].v3-seen{opacity:1;translate:none}

  /* 2. Hero entrance, text-led, once per page load, about 660ms in total:
        label fades, title rises 12px, then the index and body follow. The photo does not move. */
  .hero .label{animation:v3-fade var(--m-base) var(--ease) both}
  .hero h1{animation:v3-rise-12 var(--m-hero) var(--ease) 60ms both}
  .hero .hero-row .index{animation:v3-rise var(--m-base) var(--ease) 360ms both}
  .hero .hero-body{animation:v3-rise var(--m-base) var(--ease) 420ms both}
  .hero figcaption{animation:v3-fade var(--m-base) var(--ease) 480ms both}

  /* 3. Mobile menu drops from the bar. The panel is absolutely placed, so nothing reflows. Closing is instant. */
  .nav-m[open] nav{animation:v3-drop var(--m-base) var(--ease) both}

  /* 4. FAQ: the answer settles in under its question when opened; the +/– mark answers hover. */
  .faq details[open]>:not(summary){animation:v3-rise 200ms var(--ease) both}
  .faq summary::after{transition:color var(--m-fast) var(--ease)}
  @media (hover:hover){.faq summary:hover::after{color:var(--text)}}

  /* 5. Text links: on hover the brass underline thickens (g.css) and tucks closer. Paint only, no reflow. */
  .tlink{transition:text-decoration-thickness var(--m-fast) var(--ease),text-underline-offset var(--m-fast) var(--ease)}
  @media (hover:hover){.tlink:hover{text-underline-offset:4px}}
}

@keyframes v3-fade{from{opacity:0}}
@keyframes v3-rise{from{opacity:0;translate:0 var(--m-rise)}}
@keyframes v3-rise-12{from{opacity:0;translate:0 12px}}
@keyframes v3-drop{from{opacity:0;translate:0 -8px}}