/* One entrance system for every /nn/ page (applied at build time by scripts/nn-motion.mjs).

   Why this exists: three systems used to decide on their own timing when content appeared
   (Webflow IX2 entrances bound after its late-loading chunk, a hero boot-hide waiting on a
   letter split that rarely happened, and a reveal for custom sections). Content painted,
   vanished and rose again, differently on every load and every page.

   Now there is one rule set. The hidden starting state lives here, in CSS that loads in the
   head, so nothing can paint before it is hidden. It only applies once the inline head script
   has set html.nn-js, so a reader without JavaScript sees everything. reveal.js flips .nn-in:
   the first screen rises in document order with a short stagger, the rest rises as it
   scrolls into view. If reveal.js never runs, html.nn-all-in shows everything after 2.5s. */

html.nn-js .nn-reveal { opacity: 0; transform: translate3d(0, 2.5rem, 0);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); }
html.nn-js .nn-reveal.nn-in { opacity: 1; transform: none; }

/* Stagger: children of a revealed grid arrive one beat apart. */
html.nn-js .nn-reveal.nn-stagger { opacity: 1; transform: none; }
html.nn-js .nn-reveal.nn-stagger > * { opacity: 0; transform: translate3d(0, 2rem, 0);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1); }
html.nn-js .nn-reveal.nn-stagger.nn-in > * { opacity: 1; transform: none; }
html.nn-js .nn-reveal.nn-stagger.nn-in > *:nth-child(2) { transition-delay: .07s; }
html.nn-js .nn-reveal.nn-stagger.nn-in > *:nth-child(3) { transition-delay: .14s; }
html.nn-js .nn-reveal.nn-stagger.nn-in > *:nth-child(4) { transition-delay: .21s; }
html.nn-js .nn-reveal.nn-stagger.nn-in > *:nth-child(5) { transition-delay: .28s; }
html.nn-js .nn-reveal.nn-stagger.nn-in > *:nth-child(6) { transition-delay: .35s; }
html.nn-js .nn-reveal.nn-stagger.nn-in > *:nth-child(n+7) { transition-delay: .4s; }

/* Failsafe and reduced motion: everything in place, no movement. */
html.nn-all-in .nn-reveal, html.nn-all-in .nn-reveal.nn-stagger > * { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.nn-js .nn-reveal, html.nn-js .nn-reveal.nn-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Two template blocks still get a GSAP load entrance from Webflow IX3, bound by class. Pin
   them so they arrive with the rest instead of on their own clock. */
.hero-2-dashboard-wrapper { opacity: 1 !important; transform: none !important; }

/* Images carry their real width and height (added at build time) so space is reserved before
   they load. Both dimensions fall back to auto at zero specificity: a class that sets only a
   height (the case study logos) or only a width keeps the natural proportions, and a class
   that sets both still wins. Without the width reset, a 32px-tall logo took its file width. */
:where(img[width][height]) { width: auto; height: auto; }