/* Landing motion only (founder 01.11.2026: the landing loads smoothly). Linked from index.html alone, so the
   checker app, which shares the other site files, is untouched. Rules from the /check rounds: only opacity and
   translate, a few px, inside each element's own box, no layout change. Everything is visible by default:
   the load entrance is a self-finishing CSS animation and the scroll reveal hides only elements that are fully
   off screen and only when page.js runs. Reduced motion and print: no motion at all. */

@media screen and (prefers-reduced-motion: no-preference) {
  /* Load: header, headline, text, the example editor, then the hedgehog steps onto its edge. */
  @keyframes rise { from { opacity: 0; translate: 0 10px; } }
  .masthead, .hero-text > *, .editor, .hero-art {
    animation: rise 400ms cubic-bezier(.2, .7, .3, 1) backwards;
  }
  /* The headline is the LCP element: it is painted at once and only settles; a fade from 0 cost ~500 ms of LCP. */
  @keyframes settle { from { translate: 0 10px; } }
  .hero h1 { animation-name: settle; }
  .hero-text > :nth-child(2) { animation-delay: 120ms; }
  .hero-text > :nth-child(3) { animation-delay: 160ms; }
  .hero-text > :nth-child(4) { animation-delay: 200ms; }
  .editor { animation-delay: 240ms; }
  .hero-art { animation-delay: 360ms; }
  /* Phones and tablets: the hedgehog sits beside the headline, so it comes with the text, not after the editor. */
  @media (max-width: 899px) { .hero-art { animation-delay: 120ms; } }

  /* The underline draw-in (components.css) starts when the editor has finished entering (page.js sets the delay). */
  .examples.is-drawn .err { animation-delay: var(--draw-delay, 0ms); }

  /* Scroll: blocks below the first screen fade in and rise a few px, once (page.js sets the stagger). */
  .reveal { transition: opacity 400ms cubic-bezier(.2, .7, .3, 1), translate 400ms cubic-bezier(.2, .7, .3, 1); }
  .reveal.is-waiting { opacity: 0; translate: 0 12px; transition: none; }
}