/* ============================================================
   nawa — motion layer styles (loaded only by index.motion.html)
   Pre-hide states, drawn ink accents, scrub-mode overrides.

   All hiding is double-gated: html.mjs (set inline in <head>
   only when JS is live; removed if the CDN stack fails) AND
   prefers-reduced-motion: no-preference. Reduced-motion users
   and no-JS visitors therefore always get the full, still page.
   ============================================================ */

/* CTA parity — the final row mixes <a class="cta-btn"> with
   <button class="cta-btn">; .cta-btn never sets line-height, so
   the two can differ under inline-flex. Make them identical in
   both themes, on the very first frame. */
.cta-btn{line-height:1}
button.cta-btn{appearance:none;-webkit-appearance:none;margin:0}
/* the ghost variant carries a real border (1px dark / 1.5px light);
   give the solid variant the same border, transparent, so both boxes
   compute the same height in either theme */
.cta-btn:not(.ghost){border:var(--ghost-border);border-color:transparent}

@media (prefers-reduced-motion: no-preference){
  /* reveal targets wait invisibly — visibility only, so layout
     is untouched and trigger positions never shift */
  html.mjs [data-mrv],
  html.mjs header,
  html.mjs .monitor,
  html.mjs .phone,
  html.mjs .fab-wrap{visibility:hidden}
  html.mjs #net{opacity:0}

  /* drawn ink accents — armed here, released by .mx-in / .mx-th */
  html.mjs .eyebrow::before{transform:scaleX(0);transform-origin:0 50%;
    transition:transform .7s cubic-bezier(.7,0,.2,1) .15s}
  html.mjs .eyebrow.mx-in::before{transform:scaleX(1)}
  html.mjs .prob .pn::before{transform:scaleX(0);transform-origin:0 50%;
    transition:transform .6s cubic-bezier(.7,0,.2,1) .3s}
  html.mjs .prob.mx-in .pn::before{transform:scaleX(1)}
  html.mjs .pillar::before{transform:scaleY(0);transform-origin:50% 0;
    transition:transform .9s cubic-bezier(.7,0,.2,1) .25s}
  html.mjs .pillar.mx-in::before{transform:scaleY(1)}
  html.mjs .hero h1 .th::after{transform:scaleX(0);transform-origin:0 50%;
    transition:transform .9s cubic-bezier(.7,0,.2,1)}
  html.mjs .hero h1.mx-th .th::after{transform:scaleX(1)}

  /* scrub mode (fine pointer + wide viewport): scroll drives the
     device screens; the CSS slideshow clock stands down and each
     slide crossfades on its own compositor layer */
  html.mx-scrub .monitor .slide,
  html.mx-scrub .phone .pslide{animation:none !important;will-change:opacity}

  /* perf: paint the fixed page background once on its own layer —
     identical rendering to body{background-attachment:fixed}, but
     scroll and the pinned hero never trigger full-viewport repaints */
  html.mjs body{background:transparent}
  html.mjs body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:var(--page-bg)}
}

/* magnetic buttons (fine pointers): GSAP owns transform while the
   cursor is near; CSS keeps shadow/filter/color hovers */
@media (prefers-reduced-motion: no-preference) and (pointer: fine){
  html.mjs .cta-btn,
  html.mjs .fab{transition-property:box-shadow,filter,background,border-color,color}
  html.mjs .cta-btn:hover,
  html.mjs .fab:hover{transform:none}
}
