/* motion.css — calm motion. ONE orchestrated moment (the hero entrance); everything else only responds.
   All optional polish: the page reads perfectly with this file deleted and under prefers-reduced-motion.
   transform + opacity only. Content is visible by default; `html.js` (set in <head>) is what lets reveals start hidden. */

@layer components {
  /* Scroll reveal: site.js adds .is-in once; stagger with style="--i:2". */
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* Whisker rules draw themselves when their heading reveals. */
  .whisk path { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .js .reveal .whisk path { stroke-dashoffset: 1; transition: stroke-dashoffset 1s .25s var(--ease-out); }
  .js .reveal.is-in .whisk path { stroke-dashoffset: 0; }
  .js .reveal .whisk path:nth-child(2) { transition-delay: .4s; } .js .reveal .whisk path:nth-child(3) { transition-delay: .55s; }

  @media (prefers-reduced-motion: no-preference) {
    /* The one orchestrated moment: words and the arch rise in together, then everything stays still. */
    .hero__word--a { animation: word-in 1s var(--ease-out) both; }
    .hero__word--b { animation: word-in 1s .16s var(--ease-out) both; }
    .hero__arch { animation: arch-in 1.1s .08s var(--ease-out) both; }      /* transform only: an opacity fade-in delays the LCP paint of the hero photo by the whole animation */
    .stamp { animation: stage-in 1.1s .5s var(--ease-out) both; }
    .hero__kicker, .hero__copy, .hero__ctas { animation: fade-up .8s .42s var(--ease-out) both; }
    @keyframes word-in { from { opacity: 0; transform: translateY(.16em) rotate(-1.2deg); } }
    @keyframes stage-in { from { opacity: 0; transform: translateY(5%) scale(.95); } }
    @keyframes arch-in { from { transform: translateY(5%) scale(.95); } }
    @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
    /* Barely-there life: the sunbeam drifts very slowly. */
    .hero__beam { animation: beam-drift 26s ease-in-out infinite alternate; }
    @keyframes beam-drift { to { transform: rotate(20deg) translate3d(-3%, 2%, 0); opacity: .75; } }
  }

  /* The header stays put across page transitions instead of cross-fading. */
  .site-header { view-transition-name: site-header; }
  .action-bar { view-transition-name: action-bar; }
  ::view-transition-group(site-header), ::view-transition-group(action-bar) { animation: none; }
  @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .js .reveal .whisk path { stroke-dashoffset: 0; transition: none; } }
}