/* Page-level motion styles (motion-012). Linked once from index.html, after every Design stylesheet.
   Everything that changes how the static page looks sits behind html[data-motion-mode], which motion/runtime.js
   sets only once it has decided to run. With JavaScript off the page is Design's, untouched. The two exceptions
   are named below (the disclosure is CSS-only by spec). Never opacity: 0 on anything that must be visible. */
@import url("system/motion.css");

/* ---------- Sticky stages (one rule for s1 to s5; was injected by s2) ----------
   Design ships no sticky. The held distance is the stepper's spacer (JS, full mode only), so this is full mode only.
   --hdr-h is measured from the header by ui.js (56 px phone, 64 px from 760). A demo that needs a different top
   (s2 centres its grid) sets --sticky-top on its own wrapper. */
html[data-motion-mode="full"] [data-motion="sticky"] {
  position: sticky;
  top: var(--sticky-top, calc(var(--hdr-h, 56px) + 12px));
}

/* ---------- s7.disclosure ----------
   Native <details>. Open: the answer's height goes 0 to auto (--dur-base, --ease-in-out) and its opacity follows 60 ms
   later; the plus turns in --dur-fast. Close is 30% shorter on --ease-in. Needs ::details-content and
   interpolate-size (Chromium 131+, Safari 18.4+); elsewhere <details> keeps its native instant toggle.
   Spec said grid-template-rows 0fr to 1fr, but that needs a wrapper inside the answer and the answer's own
   padding would leave a gap at 0fr, so this animates block-size. Same look, same timing.
   Static markup is unchanged: it works without JavaScript, because the toggle is native. */
@supports selector(::details-content) {
  [data-section="s7-strip"] details {
    interpolate-size: allow-keywords;
  }
  [data-section="s7-strip"] details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size calc(var(--dur-base) * 0.7) var(--ease-in),
      content-visibility calc(var(--dur-base) * 0.7) allow-discrete;
  }
  [data-section="s7-strip"] details[open]::details-content {
    block-size: auto;
    transition:
      block-size var(--dur-base) var(--ease-in-out),
      content-visibility var(--dur-base) allow-discrete;
  }
  [data-section="s7-strip"] details > :not(summary) {
    opacity: 0;
    transition: opacity calc(var(--dur-base) * 0.7) var(--ease-in);
  }
  [data-section="s7-strip"] details[open] > :not(summary) {
    opacity: 1;
    transition: opacity var(--dur-base) var(--ease-soft) 60ms;
  }
  [data-section="s7-strip"] details > summary > svg {
    transition: transform var(--dur-fast) var(--ease-in-out);
  }
  @media (prefers-reduced-motion: reduce) {
    /* Opacity only: the height changes at once, the answer fades (--dur-base is 120 ms here). */
    [data-section="s7-strip"] details::details-content,
    [data-section="s7-strip"] details[open]::details-content {
      block-size: auto;
      transition: content-visibility var(--dur-base) allow-discrete;
    }
    [data-section="s7-strip"] details > :not(summary),
    [data-section="s7-strip"] details[open] > :not(summary) { transition-delay: 0ms; }
    [data-section="s7-strip"] details > summary > svg { transition: none; }
  }
}

/* ---------- ui.press and ui.hover ----------
   Design gave the buttons no hook, so these are its component classes (.cta, .hbtn, .menu). Asked for: data-motion="btn".
   Hover: 1 px lift and a shadow layer (a pseudo-element) fading in over --dur-instant.
   Press: scale 0.97 in 70 ms, released on spring.press (CSS linear(), generated by springLinear in system/motion.js). */
html[data-motion-mode] :is(.cta, .hbtn, .menu) {
  position: relative;
  transition:
    background-color var(--dur-instant) var(--ease-soft),
    border-color var(--dur-instant) var(--ease-soft),
    box-shadow var(--dur-instant) var(--ease-soft),
    transform var(--dur-spring-press) var(--ease-spring-press);
}
html[data-motion-mode] :is(.cta, .hbtn, .menu)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ink) 38%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-instant) var(--ease-soft);
}
html[data-motion-mode] .cta--night::after { box-shadow: 0 6px 14px -6px color-mix(in srgb, #120A08 70%, transparent); }
@media (hover: hover) {
  html[data-motion-mode="full"] :is(.cta, .hbtn, .menu):hover {
    transform: translateY(-1px);
    transition:
      background-color var(--dur-instant) var(--ease-soft),
      border-color var(--dur-instant) var(--ease-soft),
      box-shadow var(--dur-instant) var(--ease-soft),
      transform var(--dur-instant) var(--ease-out);
  }
  html[data-motion-mode="full"] :is(.cta, .hbtn, .menu):hover::after { opacity: 1; }
}
html[data-motion-mode="full"] :is(.cta, .hbtn, .menu):active {
  transform: scale(0.97);
  transition:
    background-color var(--dur-instant) var(--ease-soft),
    border-color var(--dur-instant) var(--ease-soft),
    box-shadow var(--dur-instant) var(--ease-soft),
    transform 70ms var(--ease-in-out);
}
html[data-motion-mode="full"] :is(.cta, .hbtn, .menu):active::after { opacity: 0; }
/* Reduced motion: colour only. No lift, no scale, no shadow layer. */
@media (prefers-reduced-motion: reduce) {
  html[data-motion-mode] :is(.cta, .hbtn, .menu),
  html[data-motion-mode] :is(.cta, .hbtn, .menu):active {
    transform: none;
    transition: background-color var(--dur-instant) linear, border-color var(--dur-instant) linear;
  }
  html[data-motion-mode] :is(.cta, .hbtn, .menu)::after { display: none; }
}

/* ---------- header ----------
   Design's header carries its shadow in box-shadow. Motion keeps the 1 px inner highlight on the header and
   moves the outer part (the hairline and the soft drop, copied from --sh-header) to a pseudo-element that
   fades in over --dur-fast once scrollY is over 8 (ui.js sets data-scrolled on <html>). */
html[data-motion-mode] body > header { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
html[data-motion-mode] body > header::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(70, 38, 20, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
html[data-motion-mode][data-scrolled] body > header::after { opacity: 1; }

/* ---------- idle loops: stop off-screen, still under reduced motion ----------
   Design's window spinner and pulse dot run forever. ui.js marks a section data-offscreen when it is more than
   10% of a viewport away, and the loops pause. Reduced motion: both are static. */
html[data-motion-mode] [data-section][data-offscreen] :is(.spin, .dot--pulse) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html[data-motion-mode] :is(.spin, .dot--pulse) { animation: none; }
}