/* Monark motion layer: openings, scroll moments and micro-interactions driven by assets/js/motion.js (GSAP).
   Everything here applies only with html.has-motion, which the <head> sets unless the visitor prefers reduced motion.
   Without it the site keeps the calmer CSS reveals from site.css. */

/* ---------- Hand entrances over to GSAP ---------- */
.has-motion .reveal,
.has-motion .fade-up { opacity: 1; transform: none; }
.has-motion .split .w > span { opacity: 1; transform: none; filter: none; transition: none; }
.has-motion #player { opacity: 1; transform: none; transition: box-shadow .3s; will-change: auto; }
.has-motion .marquee__track { animation: none; }
/* while GSAP animates an element, CSS transitions must not smooth its frames */
.has-motion .m-anim { transition: none !important; }

/* Pre-cover: hides the page from first paint until motion.js has set up the opening (fallback timer in <head>) */
.has-motion.is-entering body::after {
  content: ""; position: fixed; inset: 0; z-index: 10000; background: var(--bg);
}

/* ---------- Living gradient behind the heroes (WebGL, Stripe-like ribbons in Monark blues) ---------- */
.aurora {
  position: absolute; left: 0; right: 0; top: 0; height: min(100%, 1000px); width: 100%; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.has-aurora { position: relative; }
.has-aurora > .container { position: relative; }

/* ---------- Line burst behind the closing call to action ---------- */
.burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.cta > .container { position: relative; }

/* ---------- Card edges catch the light under the cursor ---------- */
.has-motion .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(115, 143, 255, .65), rgba(115, 143, 255, 0) 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s var(--ease-out);
}
.has-motion .card:hover::after { opacity: 1; }

/* ---------- Button labels roll on hover ---------- */
.roll { position: relative; display: inline-grid; overflow: hidden; vertical-align: top; }
.roll { translate: var(--lx, 0px) var(--ly, 0px); padding-right: 6px; margin-right: -6px; } /* room for the arrow's nudge, which the roll's clip would cut */
.roll__a, .roll__b {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .65s cubic-bezier(.65, 0, .35, 1), opacity .5s cubic-bezier(.65, 0, .35, 1);
}
.roll__b { transform: translateY(110%); opacity: 0; }
.btn:hover .roll__a, .btn:focus-visible .roll__a { transform: translateY(-110%); opacity: 0; }
.btn:hover .roll__b, .btn:focus-visible .roll__b { transform: none; opacity: 1; }

/* ---------- Contextual pill that follows the pointer over videos and articles ---------- */
.mpill {
  position: fixed; left: 0; top: 0; z-index: 9000; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 500; font-size: 13px; line-height: 1; white-space: nowrap;
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden;
}
.mpill svg { width: 12px; height: 12px; }
.has-pill, .has-pill * { cursor: none !important; }

/* ---------- Nav tucks away on the way down, returns on the way up ---------- */
.has-motion .nav { transition: background-color .4s, border-color .4s, backdrop-filter .4s, transform .6s var(--ease-out); }
.has-motion .nav.is-tucked { transform: translateY(-100%); }

/* ---------- Omnibus steps light up in sequence ---------- */
.has-motion .steps .step .step__num { transition: background-color .5s, box-shadow .6s var(--ease-out), transform .6s var(--ease-out); }
.has-motion .steps .step:not(.is-lit) .step__num { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.has-motion .steps .step.is-lit .step__num { box-shadow: 0 0 0 6px rgba(30, 58, 242, .16), 0 10px 30px -8px rgba(30, 58, 242, .8); }

/* phone float wrapper keeps the phone's own pointer tilt free */
.m-float { flex: none; display: flex; justify-content: center; }
@media (max-width: 900px) { .m-float { align-self: center; } }

/* ---------- Smoother interactions ---------- */
/* hover lift rides on `translate`, so it composes with scroll-driven depth on `transform` */
.has-motion .card, .has-motion .card.reveal, .has-motion .card.reveal.is-done {
  transition: border-color .5s, box-shadow .7s var(--ease-out), translate .8s var(--ease-out), opacity .6s;
  transition-delay: 0s;
}
.has-motion .eg-chain__node { transition: border-color .4s, translate .8s var(--ease-out); }


/* mobile menu: a slower open, links cascading in */
@media (max-width: 900px) {
  .nav__drawer { transition: grid-template-rows .8s cubic-bezier(.65, 0, .35, 1) !important; }
  .nav__drawer nav > a { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .8s var(--ease-out), color .3s; }
  .nav.is-open .nav__drawer nav > a { opacity: 1; transform: none; }
  .nav.is-open .nav__drawer nav > a:nth-child(1) { transition-delay: .12s; }
  .nav.is-open .nav__drawer nav > a:nth-child(2) { transition-delay: .18s; }
  .nav.is-open .nav__drawer nav > a:nth-child(3) { transition-delay: .24s; }
  .nav.is-open .nav__drawer nav > a:nth-child(4) { transition-delay: .30s; }
  .nav.is-open .nav__drawer nav > a:nth-child(5) { transition-delay: .36s; }
  .nav__menu-btn span { transition: transform .6s var(--ease-out), top .6s var(--ease-out) !important; }
}

/* accordions and the press list open more slowly */
.has-motion .faq__a, .has-motion .faq__panel { transition-duration: .75s !important; transition-timing-function: cubic-bezier(.65, 0, .35, 1) !important; }
.has-motion .press li.is-entering { animation-duration: .9s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* smooth-scroll plumbing (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }