/* motion.css — the signature moment: micro-interaction craft (D5). CSS-only, self-hosted, no CDN.
   Never hides content (screenshot-safe). Fully disabled under prefers-reduced-motion. */
[data-role="btn-primary"], [data-role="btn-secondary"] {
  transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease;
}
[data-role="btn-primary"]:hover, [data-role="btn-secondary"]:hover {
  transform: translateY(-2px); box-shadow: 0 8px 22px -8px var(--accent-dark, rgba(0,0,0,.35));
}
[data-role="btn-primary"]:active, [data-role="btn-secondary"]:active { transform: translateY(0); }
[data-role="nav-item"] { position: relative; transition: color .18s ease; }
[data-role="nav-item"]::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: var(--accent); transition: right .22s ease;
}
[data-role="nav-item"]:hover::after, [data-role="nav-item"]:focus-visible::after { right: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---- SIGNATURE MOMENTS (IDEAS-WAVE #7c floor — KB 24191ad0: 1-2 per page, calm elsewhere) ----
   Moment 1 (load): hero text reveals — fade+rise, settles in 700ms.
   Moment 2 (scroll): section headlines rise into place as they enter the viewport.
   TRANSFORM-ONLY on scroll (opacity constant) so content reads in any screenshot state; both
   moments fully collapse under prefers-reduced-motion. */
@keyframes sig-hero-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-role="hero"] [data-role="text-on-image"], [data-role="text-on-image"] {
  animation: sig-hero-reveal .7s ease-out both;
}
@supports (animation-timeline: view()) {
  /* rise distance MUST stay below the SMALLEST rhythm-ladder rung (--gap-eyebrow-head, the
     tightest related pair) or the headline enters its neighbor's box mid-scroll. Derived from
     that token at build time — it is no longer pinned to the old flat 1rem=16px gap, which had
     throttled this signature moment to a ~12px twitch. Emitted as a LITERAL px (not calc/var)
     so the motion-rise design check can still measure it; that check's cap is the measured
     min gap, so widening the ladder is what earns the bigger rise. */
  @keyframes sig-rise { from { transform: translateY(18px); } to { transform: none; } }
  [data-role="section"] [data-role="headline"] {
    animation: sig-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-role="btn-primary"], [data-role="btn-secondary"], [data-role="nav-item"],
  [data-role="nav-item"]::after { transition: none !important; }
  [data-role="btn-primary"]:hover, [data-role="btn-secondary"]:hover { transform: none !important; box-shadow: none !important; }
  [data-role="text-on-image"], [data-role="section"] [data-role="headline"] { animation: none !important; }
}