/* ═══════════════════════════════════════════════════════════════
   AAA CPA Services — motion layer

   Additive only. Layout, palette and type live in base.css and are
   not touched here; this file only gives them a way to arrive.

   The contract with the scripts:
   · html.js is set by a one-line inline script before first paint,
     so an element is hidden for its entrance only when JavaScript
     exists to reveal it. If the motion script then never runs
     (blocked, failed, slow), a zero-duration delayed animation pops
     every hidden element back at 2.4s. Reading never depends on JS.
   · html.motion is added by the script once it owns every hidden
     element inline, and the pre-init rules stop matching.
   · html.rm (reduced motion) gets none of it: no smooth scroll, no
     entrances, no WebGL, no marquee, no magnetism.
   ═══════════════════════════════════════════════════════════════ */

@keyframes reveal-safety{to{opacity:1}}

html.js:not(.motion):not(.rm) :is(
  .nav>*, .hero__body>*, .hero__corners, .band>*,
  .h2:not(.prose *), .statement, .card, .numlist__row, #multistate,
  .close__body>*, .foot__grid>*, [data-reveal]
){opacity:0;animation:reveal-safety 0s 2.4s forwards}

/* ── smooth scroll (Lenis) ─────────────────────────────────────── */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* ── hero field (WebGL) ────────────────────────────────────────────
   The canvas takes exactly the image's box, so the picture beneath
   stays the LCP element and the fallback. It fades in only after
   the first frame has been drawn. */
.hero__gl{
  position:absolute;left:0;bottom:0;width:100%;height:auto;aspect-ratio:2752/1536;
  opacity:0;transition:opacity .9s ease;pointer-events:none;
}
.hero__gl.is-live{opacity:1}
/* on a phone or tablet the canvas covers the hero like the image (see
   base.css); the shader maps the texture with the same bottom-anchored cover */
@container page (width < 1000px){
  .hero__gl{top:0;height:100%;aspect-ratio:auto}
}
.hero__img,.hero__gl,.close__img,#multistate img{will-change:transform}

/* split lines: the mask clips at the line box, and Source Serif's
   descenders reach past it at these leadings — give them room */
.line-mask{padding-bottom:.12em;margin-bottom:-.12em}

/* ── parallax containers ───────────────────────────────────────── */
#multistate picture{display:block;overflow:hidden;margin-top:auto}
#multistate img{margin-top:0}
.sec--tight>picture{display:block;overflow:hidden;border-radius:var(--r-section)}

/* ── credentials marquee ───────────────────────────────────────── */
.marquee{
  overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{display:inline-flex;align-items:center;will-change:transform}
.marquee__item{display:inline-flex;align-items:center;gap:clamp(22px,3.4vw,46px);padding-right:clamp(22px,3.4vw,46px)}
.marquee__dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ── hover states that answer the cursor ──────────────────────────
   A hairline draws itself under text links; the numbered rows light
   their number; arrows nudge; linked cards lift. All on transform or
   opacity — nothing that relayouts. Scoped to html.fine, which the
   inline script sets only for a device that can hover with a fine
   pointer: on a touch screen a hover state sticks after a tap. */
html.fine .nav__links a,html.fine .foot__list a,html.fine .numlist__t a{position:relative;display:inline-block;padding-bottom:2px}
html.fine .nav__links a::after,html.fine .foot__list a::after,html.fine .numlist__t a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
html.fine .nav__links a:hover,html.fine .foot__list a:hover,html.fine .numlist__t a:hover{opacity:1}
html.fine .nav__links a:hover::after,html.fine .foot__list a:hover::after,html.fine .numlist__t a:hover::after{transform:scaleX(1)}
.numlist__n{transition:color .35s ease}
html.fine .numlist__row:hover .numlist__n{color:var(--accent)}
.arrowlink svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
html.fine .arrowlink:hover svg{transform:translateX(3px)}
a.card{transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease}
html.fine a.card:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.btn--deep{transition:opacity .18s ease,box-shadow .45s ease}
html.fine .btn--deep:hover{opacity:1;box-shadow:0 18px 44px rgba(30,24,56,.32)}
#multistate picture{transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
html.fine #multistate:hover picture{transform:scale(1.03)}

/* ── atmosphere ────────────────────────────────────────────────────
   A paper grain at 3.5%: enough that flat lavender reads as a
   surface, not a fill. Fixed and inert; it sits under the veil. */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* the page fades to its own ground before a link is followed */
.veil{position:fixed;inset:0;z-index:300;background:var(--card);opacity:0;pointer-events:none}

/* ── reduced motion ────────────────────────────────────────────── */
html.rm .grain{display:none}
html.rm .marquee{overflow:visible;white-space:normal;-webkit-mask-image:none;mask-image:none}