/* ============================================================
   PENCE OPERATIONS · MOTION LAYER · motion.css
   Progressive enhancement only. No brand colors changed — all
   effects use the existing tokens (--void, --ink, --bone,
   --fog, --accent, --hairline). If JS or the CDNs fail, the
   site renders exactly as before.
   States:
     html.mx-boot  — set inline pre-paint, hides choreographed
                     elements so there is no flash before JS
     html.mx       — engine running (full or lite tier)
     html.mx-fine  — desktop / fine pointer tier
   ============================================================ */

/* ---------- Motion tokens ---------- */
:root{
  --mx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* "certain" deceleration */
  --mx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --mx-fast: .35s;
  --mx-med: .7s;
  --mx-slow: 1.1s;
}

/* ---------- Boot guard: hide choreographed elements pre-paint.
   The inline boot script removes this class within 2.5s even if
   every CDN fails, so content can never stay hidden. ---------- */
@media (prefers-reduced-motion: no-preference){
  html.mx-boot .hero .eyebrow,
  html.mx-boot .hero .breadcrumb,
  html.mx-boot .hero .headline,
  html.mx-boot .hero .hero-sub,
  html.mx-boot .hero .hero-actions,
  html.mx-boot .hero .hero-proof-item,
  html.mx-boot .hero .trust-item,
  html.mx-boot .hero .updated{
    opacity:0;
  }
}

/* ---------- Engine active: neutralize the legacy reveal system.
   GSAP owns visibility from here; the old IntersectionObserver
   still runs but its .in-view class no longer transitions. ---- */
html.mx .reveal{opacity:1;transform:none;transition:none;}
html.mx{scroll-behavior:auto;} /* Lenis owns scrolling + anchors */

/* ---------- Split headline machinery ---------- */
/* Word masks carry glyph-safe padding: descenders and ascenders of
   display faces (g, y, p, accents) render fully — the negative margins
   cancel the padding so layout and letter-fit stay identical. */
html.mx .mx-w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:0.14em 0.07em 0.2em;margin:-0.14em -0.07em -0.2em;
}
html.mx .mx-wi{display:inline-block;will-change:transform;}

/* ---------- Scroll progress hairline ---------- */
.mx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:linear-gradient(90deg, var(--accent), rgba(52,226,122,0.35));
  transform-origin:0 50%;transform:scaleX(0);opacity:.8;pointer-events:none;
}

/* ---------- Nav choreography ---------- */
html.mx nav{
  transition:background-color var(--mx-fast) var(--mx-ease-out),
             box-shadow var(--mx-fast) var(--mx-ease-out);
  will-change:transform;
}
html.mx nav.mx-nav-scrolled{
  background:rgba(11,11,12,0.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 12px 40px -18px rgba(0,0,0,0.8);
}
/* Animated underline draw on nav links (replaces plain color swap) */
html.mx .nav-link{
  position:relative;
  transition:color .25s var(--mx-ease-out);
}
html.mx .nav-link::after{
  content:'';position:absolute;left:0;right:auto;bottom:-4px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .35s var(--mx-ease-out);
}
html.mx .nav-link:hover::after,
html.mx .nav-link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%;}

/* Quiet links: underline draws toward accent on hover */
html.mx .link-quiet{
  border-bottom-color:transparent;
  background-image:linear-gradient(var(--hairline-strong), var(--hairline-strong)),
                   linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%, 0 100%;
  background-size:100% 1px, 0% 1px;
  transition:color .25s var(--mx-ease-out), background-size .4s var(--mx-ease-out);
}
html.mx .link-quiet:hover,
html.mx .link-quiet:focus-visible{background-size:100% 1px, 100% 1px;}

/* ---------- Buttons: pressable, magnetic-ready ---------- */
html.mx .btn-primary,
html.mx .btn-outline,
html.mx .nav-cta{
  will-change:transform;
  transition:box-shadow .3s var(--mx-ease-out), border-color .25s var(--mx-ease-out),
             color .25s var(--mx-ease-out), background-color .25s var(--mx-ease-out);
}
html.mx .btn-primary:hover{box-shadow:0 10px 40px -8px rgba(52,226,122,0.55);}
html.mx .btn-primary:active,
html.mx .btn-outline:active,
html.mx .nav-cta:active{transform:scale(0.97);}

/* ---------- Cards: depth, pointer glow, glass edge ---------- */
html.mx-fine .choice-grid,
html.mx-fine .proof-grid,
html.mx-fine .how-grid,
html.mx-fine .what-grid,
html.mx-fine .market-grid{perspective:1200px;}
html.mx .mx-card{
  position:relative;overflow:hidden;
  will-change:transform;
  transition:border-color .3s var(--mx-ease-out);
}
html.mx .mx-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .4s var(--mx-ease-out);
  background:radial-gradient(420px circle at var(--mx-x,50%) var(--mx-y,50%),
             rgba(52,226,122,0.09), transparent 60%);
}
html.mx .mx-card:hover::after{opacity:1;}
html.mx .mx-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  border:1px solid transparent;
  background:linear-gradient(135deg, rgba(52,226,122,0.25), transparent 30%) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--mx-ease-out);
}
html.mx .mx-card:hover::before{opacity:1;}

/* Book card gets the glass treatment (bg stays --ink, just adds depth) */
html.mx .book-card{
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .45s var(--mx-ease-out), box-shadow .45s var(--mx-ease-out);
}
html.mx-fine .book-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(52,226,122,0.12);
}

/* ---------- Ambient parallax auras (injected by JS) ---------- */
.mx-aura{
  position:fixed;z-index:0;pointer-events:none;border-radius:50%;
  filter:blur(110px);will-change:transform;
}
.mx-aura-a{
  width:56vw;height:56vw;max-width:820px;max-height:820px;
  left:-14vw;top:-12vw;
  background:radial-gradient(circle, rgba(52,226,122,0.07), transparent 65%);
}
.mx-aura-b{
  width:44vw;height:44vw;max-width:640px;max-height:640px;
  right:-12vw;top:34vh;
  background:radial-gradient(circle, rgba(52,226,122,0.05), transparent 65%);
}
/* Keep page content above the auras.
   NOTE: nav is intentionally NOT in this list — it is position:fixed
   (permanent trailing header, per Sam) and already sits at z-index:100.
   Adding it here once reset it to position:relative and broke pinning. */
html.mx header.hero .wrap, html.mx section .wrap,
html.mx footer .wrap, html.mx .sticky-cta{position:relative;z-index:2;}

/* ---------- Three.js hero mount (index only) ---------- */
html.mx header.hero{position:relative;overflow:hidden;}
.mx-hero3d{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--mx-ease-out);
}
.mx-hero3d.mx-live{opacity:1;}
.mx-hero3d canvas{display:block;width:100%;height:100%;}
/* Soft floor fade so the scene melts into the page, not a hard edge */
.mx-hero3d::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0) 30%,
             rgba(11,11,12,0) 55%, var(--void) 96%);
}

/* ---------- Sticky CTA: springier entrance ---------- */
html.mx .sticky-cta{transition:transform .55s var(--mx-ease-spring);}

/* ---------- Mobile nav panel: eased height ---------- */
html.mx .nav-mobile-panel{transition:max-height .45s var(--mx-ease-out);}

/* ---------- FAQ: answers get GSAP height animation; keep summary snappy ---------- */
html.mx .faq-item summary{transition:color .25s var(--mx-ease-out);}
html.mx .faq-item summary:hover{color:var(--accent);}
html.mx .faq-item summary::after{transition:transform .3s var(--mx-ease-out);}
html.mx .faq-item[open] summary::after{transform:rotate(180deg);}

/* ---------- Reduced motion: hard kill-switch ----------
   The engine never boots under reduced motion, but if a user
   flips the OS setting mid-session, this freezes everything. */
@media (prefers-reduced-motion: reduce){
  html.mx *, html.mx *::before, html.mx *::after{
    animation-duration:0.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001s !important;
  }
  .mx-aura, .mx-progress, .mx-hero3d{display:none !important;}
}