/* ===== Logicraft v5 — cinematic scroll-film motion language ==========
   Layered on top of site.css. assets/cine.js owns every load + scroll
   animation on v5 (and, on home, assets/cine-globe.js renders the
   persistent WebGL Earth the scroll timeline films). Ported from the
   wip/cinematic.html "flight-film" system onto the site's own tokens.
   Degrades to a static, readable page under prefers-reduced-motion. */

/* html.cn       = cinematic layer active (added at script parse)
   html.cn-boot  = engine not initialised yet (pre-hides split headings)
   html.cn-film  = the WebGL Earth is running (home)
   html.cn-in    = interior page: enters through a curtain cut (head script)
   html.cn-entered = curtain lifted */

@property --scene-accent{syntax:'<color>';inherits:true;initial-value:#26B9E8}
@property --wx{syntax:'<percentage>';inherits:true;initial-value:78%}

/* the page background moves to <html> so the fixed film layers can sit
   between it and the content (body is transparent above them) */
html.cn{background:var(--bg);transition:background .4s var(--ease-soft),--scene-accent 1.1s ease,--wx 1.6s var(--ease)}
html.cn body{background:transparent}
html.cn ::selection{background:var(--scene-accent);color:#04060A}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* =====================================================================
   PERSISTENT FILM LAYERS
   ===================================================================== */
#film{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
html.rm #film{position:absolute;height:100svh}
#cn-wash{position:fixed;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(70% 62% at var(--wx) 40%,color-mix(in srgb,var(--scene-accent) 15%,transparent) 0%,transparent 62%)}
html.light #cn-wash{mix-blend-mode:multiply;
  background:radial-gradient(70% 62% at var(--wx) 40%,color-mix(in srgb,var(--scene-accent) 9%,transparent) 0%,transparent 62%)}
.cn-vignette{position:fixed;inset:0;z-index:180;pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(0,0,0,.30),inset 0 0 60px 10px rgba(0,0,0,.14)}
html.light .cn-vignette{box-shadow:inset 0 0 220px 60px rgba(15,23,42,.06)}
.cn-grain{position:fixed;inset:-120%;z-index:181;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:cnGrain 1.1s steps(3) infinite}
html.light .cn-grain{opacity:.03;mix-blend-mode:multiply}
@keyframes cnGrain{
  0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-6%,3%,0)}
  40%{transform:translate3d(4%,-5%,0)}60%{transform:translate3d(-3%,4%,0)}
  80%{transform:translate3d(5%,2%,0)}100%{transform:translate3d(0,0,0)}}

/* scroll progress rail — left edge, tinted by the active beat */
#cn-prog{position:fixed;top:0;left:0;width:2px;height:100vh;z-index:320;transform-origin:top;transform:scaleY(0);
  pointer-events:none;background:linear-gradient(var(--scene-accent),transparent);box-shadow:0 0 12px var(--scene-accent)}

/* =====================================================================
   HOME — the Earth shows through the bands; the hero globe slot is a stage
   ===================================================================== */
html.cn-film .odo-strip{background:color-mix(in srgb,var(--bg-elev) 62%,transparent);position:relative}
html.cn-film .future{background:color-mix(in srgb,var(--bg-elev) 42%,transparent)}
html.cn-film .cta{background:color-mix(in srgb,var(--bg-elev) 66%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.cn-film .hero-glow{opacity:.75}
#globe.stage{display:block;width:min(560px,100%);aspect-ratio:1;cursor:grab;touch-action:pan-y;border-radius:50%}
html.cn-dragging #globe.stage{cursor:grabbing}
html.cn-film footer{background:color-mix(in srgb,var(--bg) 82%,transparent)}

/* =====================================================================
   LOADER (home) — the gallons title card, then a curtain lift
   ===================================================================== */
#loader{display:none}
html.cn-js #loader{position:fixed;inset:0;z-index:1500;background:var(--bg);display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(24px,5vw,60px);
  transition:transform 1.1s cubic-bezier(.76,0,.24,1);
  animation:cnLoaderFailsafe .9s cubic-bezier(.76,0,.24,1) 4.5s forwards}
#loader.done{transform:translateY(-101%)}
@keyframes cnLoaderFailsafe{to{transform:translateY(-101%);visibility:hidden}}
.ld-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.ld-brand{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3vw,34px);line-height:1;letter-spacing:-.6px;color:var(--fg-strong)}
.ld-note,.ld-cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-subtle)}
.ld-mid{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ld-num{font-family:var(--font-mono);font-size:clamp(38px,8vw,120px);line-height:.9;font-weight:400;text-align:right;
  letter-spacing:-.02em;color:var(--fg-strong);font-variant-numeric:tabular-nums}
.ld-bar{height:2px;background:var(--border);width:100%;margin-top:20px;overflow:hidden}
.ld-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--c-scan),var(--c-count),var(--c-deck),var(--c-duty));box-shadow:0 0 18px var(--c-deck)}
body.is-loading{overflow:hidden}

/* =====================================================================
   CURTAIN CUTS — interior entrance + page exit
   ===================================================================== */
html.cn-in::before{content:"";position:fixed;inset:0;z-index:1400;background:var(--bg);pointer-events:none;
  transform:translateY(0);transition:transform .85s cubic-bezier(.76,0,.24,1);
  animation:cnLoaderFailsafe .8s cubic-bezier(.76,0,.24,1) 2.6s forwards}
html.cn-in.cn-entered::before{transform:translateY(-101%)}
.cn-cut{position:fixed;inset:0;z-index:1400;background:var(--bg);pointer-events:none;
  transform:translateY(101%);transition:transform .5s cubic-bezier(.76,0,.24,1)}
.cn-cut.on{transform:translateY(0);pointer-events:auto}

/* =====================================================================
   TYPE — masked word rise
   ===================================================================== */
html.cn.cn-boot .hero-copy h1,html.cn.cn-boot .phero h1,html.cn.cn-boot .sec-head h2,
html.cn.cn-boot h2.h2,html.cn.cn-boot .center-head h2,html.cn.cn-boot .future h2,
html.cn.cn-boot .cta h2{visibility:hidden}
.cn-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .03em .16em;margin:-.1em -.03em -.16em}
.cn-wi{display:inline-block;will-change:transform}
/* background-clip:text doesn't paint through inline-block wrappers, so each
   word inside a .grad span re-inherits the gradient and clips it itself */
.grad .cn-w,.grad .cn-wi{background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cn-sw{display:inline}

/* =====================================================================
   FIG pipeline caption stepper (scroll-scrubbed scene)
   ===================================================================== */
.cn-stepper{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:22px auto 0;max-width:640px}
.cs-step{display:inline-flex;align-items:center;gap:7px;font-family:"DM Mono";font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-subtle);padding:6px 12px;border-radius:999px;opacity:.55;
  transition:color .45s var(--ease),background .45s,box-shadow .45s,opacity .45s}
.cs-step i{font-style:normal;font-size:9px;padding:2px 5px;border-radius:5px;
  background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg-muted);transition:all .45s}
.cs-step.on{color:var(--fg-strong);opacity:1;background:color-mix(in srgb,var(--sc) 12%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--sc) 40%,transparent),0 8px 26px -14px color-mix(in srgb,var(--sc) 70%,transparent)}
.cs-step.on i{background:var(--sc);color:#fff}
.cs-div{width:22px;height:1px;background:color-mix(in srgb,var(--fg) 14%,transparent);margin:0 2px;flex:0 0 auto}
@media(max-width:560px){.cs-div{width:12px}.cs-step{padding:5px 8px;font-size:10px}}

/* =====================================================================
   CURSOR — dot + trailing ring (cinematic)
   ===================================================================== */
html.cn-has-cursor,html.cn-has-cursor a,html.cn-has-cursor button,html.cn-has-cursor input,
html.cn-has-cursor textarea,html.cn-has-cursor select,html.cn-has-cursor label,html.cn-has-cursor summary,
html.cn-has-cursor [role="button"],html.cn-has-cursor #globe.stage{cursor:none}
#cn-cur,#cn-curo{position:fixed;left:0;top:0;z-index:2000;pointer-events:none;border-radius:50%;will-change:transform}
#cn-cur{width:10px;height:10px;background:var(--fg-strong);mix-blend-mode:difference}
html.light #cn-cur{mix-blend-mode:normal}
#cn-curo{width:38px;height:38px;border:1px solid color-mix(in srgb,var(--fg) 45%,transparent);
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),border-color .3s,background .3s,opacity .3s}
html.cur-hover #cn-curo{width:62px;height:62px;margin:-12px 0 0 -12px;border-color:var(--scene-accent);
  background:color-mix(in srgb,var(--scene-accent) 10%,transparent)}
html.cur-down #cn-curo{width:26px;height:26px;margin:6px 0 0 6px}
html.cur-out #cn-cur,html.cur-out #cn-curo{opacity:0}

/* =====================================================================
   NAV choreography — glass on scroll, hide on scroll-down
   ===================================================================== */
html.cn .announce{transition:transform .55s var(--ease)}
html.cn .nav{transition:transform .55s var(--ease),background .35s,box-shadow .35s}
html.cn.cn-scrolled .nav{background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:0 10px 34px -22px rgba(0,0,0,.55)}
html.cn .nav-links a{position:relative}
html.cn .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--scene-accent);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
html.cn .nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
html.cn .nav-links .has-drop::after{content:none}

/* =====================================================================
   MICRO-INTERACTIONS
   ===================================================================== */
.cn-glow{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--ac,var(--scene-accent)) 13%,transparent),transparent 70%)}
@media(hover:hover) and (pointer:fine){
  html.cn .mod:hover .cn-glow,html.cn .sol:hover .cn-glow,html.cn .acap:hover .cn-glow,html.cn .trust-card:hover .cn-glow,
  html.cn .req-card:hover .cn-glow,html.cn .card:hover .cn-glow,html.cn .suite-mod:hover .cn-glow{opacity:1}
  html.cn .mod:hover,html.cn .sol:hover,html.cn .acap:hover{
    box-shadow:0 22px 50px -28px color-mix(in srgb,var(--ac,var(--scene-accent)) 60%,transparent)}
}
html.cn .acap,html.cn .req-card,html.cn .suite-mod,html.cn .card{position:relative}
html.cn .btn{will-change:transform}
html.cn .btn:hover{box-shadow:0 8px 30px -8px color-mix(in srgb,var(--scene-accent) 55%,transparent)}
html.cn .cmarq-track{animation:none;will-change:transform}
.ct,.hero-count{font-variant-numeric:tabular-nums}

/* =====================================================================
   REDUCED MOTION — engine bails, everything static & readable
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html.cn.cn-boot .hero-copy h1,html.cn.cn-boot .phero h1,html.cn.cn-boot .sec-head h2,html.cn.cn-boot h2.h2,
  html.cn.cn-boot .center-head h2,html.cn.cn-boot .future h2,html.cn.cn-boot .cta h2{visibility:visible}
  #loader,html.cn-in::before,.cn-cut,.cn-grain,#cn-prog,#cn-cur,#cn-curo{display:none!important}
  html.cn-has-cursor,html.cn-has-cursor *{cursor:auto}
  html.cn .announce,html.cn .nav{transition:none}
}