/* reveal-once.css (SK-M6.1): motion level "balanced" only (src/lib/motion.ts, feature reveal-first-view), with
   public/js/reveal-once.js, which adds "reveal-once" to <html> and "is-revealed" to a section the first time it
   is in view. Until then the blocks of that section (the children of its .container-kit) wait see-through and a
   little lower; then they rise into place one after the other (0.5 s each, 90 ms apart, at most 270 ms late).
   Without the module nothing is hidden. Under prefers-reduced-motion nothing waits and nothing moves.
   Linked by src/layouts/Page.astro. The prefix of the revealed rules sits in :where() (specificity 0 for the prefix),
   so a block's own `transition` or `transition-delay` wins over these, as with :where(.call-ripple-host). */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal-once main > .section:not(:first-child, .is-revealed) .container-kit > * {
    opacity: 0;
    translate: 0 1.5rem;
  }
  :where(.reveal-once main > .section.is-revealed .container-kit) > * {
    transition: opacity 0.5s ease-out, translate 0.5s ease-out;
  }
  :where(.reveal-once main > .section.is-revealed .container-kit) > :nth-child(2) { transition-delay: 90ms; }
  :where(.reveal-once main > .section.is-revealed .container-kit) > :nth-child(3) { transition-delay: 180ms; }
  :where(.reveal-once main > .section.is-revealed .container-kit) > :nth-child(n+4) { transition-delay: 270ms; }
}