/* ============================================================================
   NorthAxis motion layer. Loaded render-blocking in <head>, so above-the-fold
   content is hidden BEFORE the first paint — no flash-of-visible-then-hidden.
   Everything is gated on:
     html.na  — set by a tiny inline <head> script that runs ONLY when JS is on,
                so with JS off nothing is hidden (content renders fully static).
     @media (prefers-reduced-motion: no-preference)
                — so a visitor who asks for less motion gets a static page.
   site.js then adds .na-in (reveal) and .na-pxwrap (parallax). Theme-agnostic:
   the same rules serve both the Glass and Industrial stylesheets.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* generic reveal — below-the-fold blocks; site.js adds .na-reveal at runtime */
  html.na .na-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .72s cubic-bezier(.2,.7,.3,1), transform .72s cubic-bezier(.2,.7,.3,1);
  }
  html.na .na-reveal.na-in { opacity: 1; transform: none; }

  /* above-the-fold — hero + every section-head, hidden STRUCTURALLY before paint
     (their markup exists at parse time, so no flash). site.js adds .na-in. */
  html.na .hero-grid > div:first-child > *,
  html.na .hero-grid > .showcase,
  html.na .hero-grid > .hero-form,
  html.na .section-head {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .72s cubic-bezier(.2,.7,.3,1), transform .72s cubic-bezier(.2,.7,.3,1);
  }
  html.na .hero-grid > div:first-child > .na-in,
  html.na .hero-grid > .showcase.na-in,
  html.na .hero-grid > .hero-form.na-in,
  html.na .section-head.na-in { opacity: 1; transform: none; }

  /* parallax frame — site.js adds .na-pxwrap to a .showcase that has a direct
     <img>. The scale (headroom for the drift) is applied ONLY in the Industrial
     variant; the Glass variant keeps its inset photo frame static and intact. */
  html.na .na-pxwrap { overflow: hidden; }
  html.na[data-variant="industrial"] .na-pxwrap > img,
  html.na[data-variant="industrial"] .na-pxwrap > picture > img {
    transform: scale(1.2);
    transform-origin: center center;
    will-change: transform;
  }
}

/* print + reduced-motion belts: never keep anything hidden */
@media print {
  .na-reveal,
  .hero-grid > div:first-child > *,
  .hero-grid > .showcase,
  .hero-grid > .hero-form,
  .section-head { opacity: 1 !important; transform: none !important; }
  .na-pxwrap > img, .na-pxwrap > picture > img { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .na-reveal,
  .hero-grid > div:first-child > *,
  .hero-grid > .showcase,
  .hero-grid > .hero-form,
  .section-head { opacity: 1 !important; transform: none !important; }
  .na-pxwrap > img, .na-pxwrap > picture > img { transform: none !important; }
}