/* ============================================================
   AgenTech — cinematic motion system
   Loaded on every page. All visual styling stays in the page's
   own stylesheet; this file only provides motion primitives.
   ============================================================ */

/* The legacy IntersectionObserver reveal is disarmed in JS by stripping the
   .reveal class on boot — not with an !important override, which would also
   beat the inline styles GSAP writes. If GSAP never loads, the legacy
   system keeps running untouched. */

/* Lenis needs the native smooth-scroll off, or the two fight each other. */
html.lenis, html.lenis body { height: auto; }
html.cine { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Pre-hide only the nav elements the load-time timeline owns, so they never
   flash before it runs. `cine-pre` is set by a tiny inline script in <head>
   and is removed again if the motion engine fails to boot. */
html.cine-pre .nav .brand,
html.cine-pre .nav-links a,
html.cine-pre .nav .cta-pill { opacity: 0; }

/* ...and anything the scroll choreography owns. `cine-pre` is removed
   synchronously once the engine has written its own inline styles, so these
   never linger. */
html.cine-pre [data-c="head"],
html.cine-pre [data-c="text"],
html.cine-pre [data-c="stagger"] > * { opacity: 0; }

/* ---------- text: masked line / word reveal ---------- */
.c-line { display: block; overflow: hidden; }
.c-line > i { display: block; font-style: inherit; will-change: transform; }
.c-word { display: inline-block; overflow: hidden; vertical-align: top; }
.c-word > i { display: inline-block; font-style: inherit; will-change: transform; }
/* keep gradient-clipped spans painting correctly once split */
.c-line > i > .g-text, .c-line > i > .g { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- cinematic image frames ---------- */
.c-frame { overflow: hidden; position: relative; }
.c-frame > img, .c-frame .c-scale { will-change: transform; transform-origin: center center; }

/* ---------- custom cursor (desktop, fine pointer only) ---------- */
.c-cursor {
  position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(143, 186, 255, .55);
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: width .28s cubic-bezier(.2,.7,.2,1), height .28s cubic-bezier(.2,.7,.2,1),
              margin .28s cubic-bezier(.2,.7,.2,1), background-color .28s, border-color .28s, opacity .3s;
  mix-blend-mode: screen; opacity: 0;
}
.c-cursor.on { opacity: 1; }
.c-cursor.hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(79,140,255,.14); border-color: rgba(143,186,255,.8); }
@media (pointer: coarse) { .c-cursor { display: none !important; } }

/* ---------- magnetic buttons ---------- */
.c-mag { will-change: transform; }

/* ---------- page transition veil ---------- */
.c-veil {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: #070a10; opacity: 0; visibility: hidden;
}
.c-veil.show { visibility: visible; }

/* ---------- scroll progress rail ---------- */
.c-prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #2f6de6, #8fbaff);
  pointer-events: none;
}

/* ---------- pinned storytelling stage ---------- */
.c-stage { position: relative; }
.c-stage__layer { will-change: transform, opacity; }

/* ---------- ambient section texture (Higgsfield plates) ---------- */
.c-atmos {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 10%, transparent 78%);
          mask-image: radial-gradient(75% 70% at 50% 50%, #000 10%, transparent 78%);
  will-change: transform, opacity;
}
.c-atmos + * { position: relative; z-index: 1; }

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html.cine .c-in { opacity: 1 !important; }
  html.cine-pre * { opacity: 1 !important; }
  .c-line > i, .c-word > i { transform: none !important; }
  .c-cursor, .c-prog, .c-veil { display: none !important; }
  .c-atmos { opacity: .18 !important; transform: none !important; }
  .c-frame > img, .c-frame .c-scale { transform: none !important; }
}