/* ============================================================
   theC0D3 — Aesthetic Studio
   "SYSTEM" — a spatial, game-interface experience
   Blue #0332f5 / Cream #f0eeea · Helvetica Neue
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue:#0332f5;
  --cream:#f0eeea;
  --blue-2:#0a1fb0;
  --cd:rgba(240,238,234,0.55);
  --cf:rgba(240,238,234,0.22);
  --ch:rgba(240,238,234,0.12);
  --bd:rgba(3,50,245,0.55);
  --bf:rgba(3,50,245,0.20);
  --bh:rgba(3,50,245,0.10);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --pad:clamp(1.1rem,3.2vw,2.6rem);
  --hud:clamp(2.4rem,5vw,4rem);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--blue);color:var(--cream);
  overflow-x:clip;-webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;letter-spacing:-0.01em;
}
::selection{background:var(--cream);color:var(--blue)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* theme blocks */
.t-blue{background:var(--blue);color:var(--cream)}
.t-cream{background:var(--cream);color:var(--blue)}

/* ── TYPE ──────────────────────────────────────────────────── */
.mono{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(9px,0.92vw,11px);font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;line-height:1;
  font-variant-numeric:tabular-nums;
}
.dim{opacity:0.5}
.display{font-weight:700;line-height:0.86;letter-spacing:-0.035em;text-transform:uppercase}
.serif-em{font-style:italic;font-family:'Helvetica Neue',serif;font-weight:400;letter-spacing:-0.02em}
.body-lg{font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.45;text-wrap:pretty}
.body{font-size:clamp(0.95rem,1.1vw,1.08rem);line-height:1.55;text-wrap:pretty}

/* ============================================================
   PERSISTENT HUD  (game interface shell)
   ============================================================ */
.hud{position:fixed;inset:0;z-index:60;pointer-events:none;color:var(--cream);transition:color 0.6s var(--ease)}
.hud.on-cream{color:var(--blue)}

/* corner brackets */
.hud .corner{position:absolute;width:clamp(18px,2.2vw,30px);height:clamp(18px,2.2vw,30px);opacity:0.7}
.hud .corner::before,.hud .corner::after{content:"";position:absolute;background:currentColor}
.hud .corner::before{width:100%;height:1.5px}
.hud .corner::after{height:100%;width:1.5px}
.hud .tl{top:var(--pad);left:var(--pad)}
.hud .tr{top:var(--pad);right:var(--pad)}
.hud .tr::before{right:0}.hud .tr::after{right:0}
.hud .bl{bottom:var(--pad);left:var(--pad)}
.hud .bl::before{bottom:0}
.hud .br{bottom:var(--pad);right:var(--pad)}
.hud .br::before{bottom:0;right:0}.hud .br::after{right:0}

/* top HUD bar */
.hud-top{position:absolute;top:calc(var(--pad) + clamp(2px,0.5vw,6px));left:calc(var(--pad) + clamp(4px,0.8vw,9px));right:calc(var(--pad) + clamp(28px,3.4vw,46px));display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hud-brand{display:block;pointer-events:auto;color:inherit;transition:opacity .25s ease,transform .25s ease}
.hud-brand:hover{opacity:.7;transform:scale(1.06)}
.hud-dots{display:block;width:clamp(26px,2.4vw,34px);height:auto}
.hud-coords{display:flex;gap:clamp(0.8rem,2vw,1.8rem)}
@media(max-width:680px){.hud-coords .hide-s{display:none}}

/* bottom HUD bar */
.hud-bot{position:absolute;bottom:calc(var(--pad) + clamp(2px,0.5vw,6px));left:calc(var(--pad) + clamp(28px,3.4vw,46px));right:calc(var(--pad) + clamp(28px,3.4vw,46px));display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}

/* left depth meter */
.depth{position:absolute;left:calc(var(--pad) + clamp(4px,0.8vw,9px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:0;align-items:flex-start}
@media(max-width:680px){.depth{display:none}}
.depth .seg{display:flex;align-items:center;gap:0.6rem;height:clamp(26px,4.4vh,40px);pointer-events:auto;cursor:pointer}
.depth .tick{width:clamp(10px,1.4vw,18px);height:1.5px;background:currentColor;opacity:0.3;transition:width 0.5s var(--ease),opacity 0.5s var(--ease)}
.depth .seg .zn{font-size:clamp(8px,0.8vw,10px);font-weight:700;letter-spacing:0.16em;opacity:0;transform:translateX(-6px);transition:opacity 0.5s var(--ease),transform 0.5s var(--ease)}
.depth .seg.on .tick{width:clamp(26px,3.4vw,46px);opacity:1}
.depth .seg.on .zn{opacity:0.9;transform:none}
.depth .seg:hover .tick{opacity:0.7}

/* progress ring readout (bottom-right) */
.prog-read{font-variant-numeric:tabular-nums}

/* ============================================================
   WIREFRAME SPACE BACKDROP  (subtle)
   ============================================================ */
.space-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid-plane{position:absolute;left:50%;width:300vw;height:160vh;
  background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);
  background-size:8vmin 8vmin;
  opacity:0.05;color:var(--cream);
  transition:color 0.6s var(--ease);
}
.grid-plane.floor{bottom:-58vh;transform:translateX(-50%) perspective(60vh) rotateX(74deg)}
.grid-plane.ceil{top:-58vh;transform:translateX(-50%) perspective(60vh) rotateX(-74deg)}
.space-bg.on-cream .grid-plane{color:var(--blue);opacity:0.06}

/* ============================================================
   INTRO BOOT
   ============================================================ */
.boot{position:fixed;inset:0;z-index:120;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.3rem;transition:opacity 0.7s var(--ease),visibility 0.7s}
.boot.done{opacity:0;visibility:hidden}
.boot .bootline{width:min(70vw,340px);height:2px;background:var(--cf);position:relative;overflow:hidden}
.boot .bootline i{position:absolute;inset:0;width:0;background:var(--cream);transition:width 0.1s linear}
.boot .boottext{color:var(--cd);display:flex;gap:0.6rem}
.boot .boottext b{color:var(--cream);font-weight:700}
body.loading{overflow:hidden;height:100vh}

/* ============================================================
   STAGE / ZONES  (the spatial travel)
   ============================================================ */
.stage{position:relative;z-index:1}

.zone{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(5rem,12vh,9rem) calc(var(--hud) + var(--pad)) clamp(5rem,12vh,9rem);
  perspective:1300px;perspective-origin:50% 50%;
  overflow:hidden;
}
.zone-inner{
  position:relative;width:100%;
  transform-style:preserve-3d;
  /* driven by JS: --z (px back), --rx (deg), --o (opacity), --y (px) */
  transform:translate3d(0,var(--y,0),var(--z,0)) rotateX(var(--rx,0deg));
  opacity:var(--o,1);
  will-change:transform,opacity;
}
@media(prefers-reduced-motion:reduce){
  .zone-inner{transform:none !important;opacity:1 !important}
}

/* zone header — game label */
.zone-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:clamp(2rem,5vw,3.6rem);border-bottom:1px solid currentColor;padding-bottom:1rem;position:relative}
.zone-head::after{content:"";position:absolute;left:0;bottom:-1px;width:var(--hw,0%);height:2px;background:currentColor;transition:width 1.1s var(--ease)}
.in .zone-head::after{--hw:100%}
.zone-tag{display:flex;align-items:center;gap:0.8rem}
.zone-tag .zbig{font-weight:700;font-size:clamp(1rem,1.4vw,1.3rem);letter-spacing:-0.01em}

/* reveal primitives */
.rl{display:block;overflow:hidden;padding-bottom:0.04em}
.rl>span{display:block;transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:var(--ld,0s);will-change:transform}
.in .rl>span{transform:none}
.rise{opacity:0;transform:translateY(30px);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);transition-delay:var(--d,0s)}
.in .rise{opacity:1;transform:none}

/* ============================================================
   HERO  (calm — echoes the Under Construction page)
   ============================================================ */
/* ---- ENTRY: pinned zoom-portal transition into the cream world ---- */
.entry{position:relative;height:300vh;z-index:1}
.entry-pin{position:absolute;top:0;left:0;width:100%;height:100svh;overflow:hidden}
.entry-pin.is-fixed{position:fixed}
.entry-pin.is-parked{top:auto;bottom:0}
.entry-pin .hero{height:100svh;min-height:0;backface-visibility:hidden}
.portal{position:absolute;left:0;top:0;width:80px;height:80px;border-radius:50%;background:var(--cream);transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:8}
.portal-label{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.3rem;color:var(--blue);opacity:0;pointer-events:none;letter-spacing:0.18em;text-transform:uppercase;font-size:clamp(9px,0.9vw,11px)}
.portal-label .pl-big{font-size:clamp(2.6rem,8vw,6rem);letter-spacing:-0.03em;text-transform:none;font-weight:700;line-height:0.9}
/* reduced-motion / no-zoom: collapse to a plain hero, no transforms */
.no-zoom .entry{height:auto}
.no-zoom .entry-pin{position:static;height:auto;overflow:visible}
.no-zoom .entry-pin .hero{height:auto;min-height:100svh}
.no-zoom .portal,.no-zoom .portal-label{display:none}
/* drop the pricey goo/liquid filters while the hero dives, for a smooth zoom */
.hero.zooming svg.logo,.hero.zooming #logoGroup{filter:none !important}

.hero{min-height:100svh;display:flex;flex-direction:column;padding:0 var(--pad) clamp(1.4rem,3vw,2.4rem);position:relative;z-index:1}
.hero-top{flex:0 0 auto;padding-top:clamp(5rem,11vh,7.5rem);display:flex;justify-content:center}
.hero-eyebrow{display:flex;align-items:center;gap:1rem;color:var(--cd)}
.hero-eyebrow .bar{width:clamp(20px,5vw,46px);height:1px;background:var(--cf)}
.hero-mid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(1.4rem,3.5vw,2.6rem)}
.liquid-stage{position:relative;width:min(88vw,940px);aspect-ratio:4055/992;cursor:pointer;isolation:isolate;touch-action:manipulation}
.liquid-stage svg.logo{width:100%;height:100%;filter:url(#goo)}
/* keep the thin "Aesthetic" strokes from being eaten by the goo/liquid filter + downscale */
#logoGroup{stroke:#f0eeea;stroke-width:5;stroke-linejoin:round;paint-order:stroke fill}
@media (max-width:720px){#logoGroup{stroke-width:7}}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-sub{max-width:44ch;text-align:center;color:var(--cd)}
.hero-sub b{color:var(--cream);font-weight:600}
.hero-bottom{flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;color:var(--cd)}
.scrollcue{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.scrollcue .line{width:1px;height:34px;background:var(--cf);position:relative;overflow:hidden}
.scrollcue .line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--cream);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(300%)}}
@media(max-width:680px){.hero-bottom .hide-s{display:none}}

/* ============================================================
   ZONE 01 — STUDIO / MANIFESTO
   ============================================================ */
.manifesto{font-weight:700;line-height:0.9;letter-spacing:-0.04em;text-transform:uppercase;font-size:clamp(2.6rem,8.5vw,8.5rem);max-width:16ch}
.studio-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);margin-top:clamp(2.5rem,6vw,4.5rem)}
@media(min-width:900px){.studio-grid{grid-template-columns:1.3fr 1fr;align-items:end}}
.studio-grid .col-r{max-width:48ch}
.stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;margin-top:1.5rem}
.stats .n{font-weight:700;font-size:clamp(2rem,4.5vw,3.4rem);letter-spacing:-0.03em;line-height:1}
.stats .k{margin-top:0.5rem;opacity:0.55}

/* ============================================================
   ZONE 02 — CAPABILITIES / LOADOUT
   ============================================================ */
.loadout{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ch);border:1px solid var(--ch)}
.t-cream .loadout{background:var(--bh);border-color:var(--bh)}
.module{
  background:var(--blue);position:relative;cursor:pointer;
  padding:clamp(1.3rem,2.8vw,2.2rem) clamp(1.3rem,2.8vw,2.4rem);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,2.5vw,2rem);
  transition:background 0.5s var(--ease),color 0.5s var(--ease);
  overflow:hidden;
}
.t-cream .module{background:var(--cream)}
.module .m-id{font-weight:700;font-size:clamp(9px,1vw,12px);letter-spacing:0.15em;opacity:0.5}
.module .m-name{font-weight:700;font-size:clamp(1.5rem,4vw,3.2rem);letter-spacing:-0.03em;text-transform:uppercase;line-height:0.98;transition:transform 0.5s var(--ease)}
.module .m-right{display:flex;flex-direction:column;align-items:flex-end;gap:0.6rem;min-width:clamp(80px,18vw,200px)}
.module .m-bars{display:flex;gap:3px;align-items:flex-end;height:22px}
.module .m-bars i{width:clamp(4px,0.7vw,7px);background:currentColor;opacity:0.32;height:40%;transition:opacity 0.4s var(--ease),height 0.5s var(--ease)}
.module .m-desc{font-size:clamp(0.8rem,0.95vw,0.98rem);line-height:1.4;opacity:0;max-width:34ch;text-align:right;transition:opacity 0.5s var(--ease)}
.module .m-glow{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) 50%,currentColor,transparent 60%);opacity:0;transition:opacity 0.5s var(--ease);pointer-events:none}
@media(hover:hover){
  .module:hover .m-name{transform:translateX(6px)}
  .module:hover .m-bars i{opacity:0.85}
  .module:hover .m-bars i:nth-child(1){height:55%}
  .module:hover .m-bars i:nth-child(2){height:80%}
  .module:hover .m-bars i:nth-child(3){height:45%}
  .module:hover .m-bars i:nth-child(4){height:100%}
  .module:hover .m-bars i:nth-child(5){height:68%}
  .module:hover .m-desc{opacity:0.6}
  .module:hover .m-glow{opacity:0.07}
}
@media(max-width:820px){
  .module{grid-template-columns:auto 1fr;gap:0.9rem}
  .module .m-right{display:none}
}

/* ============================================================
   ZONE 03 — ARCHIVE / WORK
   ============================================================ */
.archive{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.6rem)}
@media(min-width:780px){.archive{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.archive{grid-template-columns:1fr 1fr 1fr}}
.file{cursor:pointer;display:flex;flex-direction:column;gap:0.9rem}
.file .scr{
  position:relative;aspect-ratio:5/4;overflow:hidden;
  border:1px solid currentColor;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.file .scr .abs{position:absolute;inset:0;transition:transform 1s var(--ease)}
.file .scr .scan{position:absolute;left:0;right:0;height:36%;top:-40%;background:linear-gradient(currentColor,transparent);opacity:0.12;pointer-events:none}
.file .fhead{display:flex;align-items:baseline;justify-content:space-between;gap:0.8rem}
.file .fname{font-weight:700;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:-0.03em;text-transform:uppercase;line-height:0.98;transition:transform 0.5s var(--ease)}
.file .fmeta{display:flex;justify-content:space-between;gap:1rem;opacity:0.55}
.file .fid{font-variant-numeric:tabular-nums}
@media(hover:hover){
  .file:hover .abs{transform:scale(1.05)}
  .file:hover .fname{transform:translateX(5px)}
  .file:hover .scan{animation:scan 1.4s var(--ease) infinite}
}
@keyframes scan{0%{top:-40%}100%{top:120%}}

/* ============================================================
   ZONE 04 — PROTOCOL / PROCESS
   ============================================================ */
.protocol{display:grid;grid-template-columns:1fr;gap:0;position:relative}
.pstep{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,4rem);align-items:start;
  padding:clamp(1.6rem,4vw,3rem) 0;border-top:1px solid currentColor;position:relative;
}
.pstep:last-child{border-bottom:1px solid currentColor}
.pstep .pn{font-weight:700;font-size:clamp(2.6rem,8vw,7rem);letter-spacing:-0.04em;line-height:0.8;opacity:0.25;transition:opacity 0.6s var(--ease)}
.pstep .pt{font-weight:700;font-size:clamp(1.6rem,4vw,3rem);letter-spacing:-0.03em;text-transform:uppercase;line-height:0.98;margin-bottom:0.9rem}
.pstep .pd{max-width:48ch;opacity:0.7}
.pstep .pmeta{margin-top:1.1rem;display:flex;gap:1.4rem;opacity:0.5}
@media(hover:hover){.pstep:hover .pn{opacity:1}}

/* ============================================================
   ZONE 05 — ALLIANCES / CLIENTS
   ============================================================ */
.roster{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:currentColor;border:1px solid currentColor}
@media(min-width:760px){.roster{grid-template-columns:repeat(4,1fr)}}
.ally{background:var(--blue);color:var(--cream);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(0.95rem,1.7vw,1.4rem);letter-spacing:-0.02em;text-transform:uppercase;transition:background 0.4s,color 0.4s;position:relative}
.t-cream .ally{background:var(--cream);color:var(--blue)}
@media(hover:hover){
  .t-cream .ally:hover{background:var(--blue);color:var(--cream)}
  .t-blue .ally:hover{background:var(--cream);color:var(--blue)}
}

/* ============================================================
   ZONE 06 — TRANSMISSION / CONTACT
   ============================================================ */
.transmission{display:flex;flex-direction:column;justify-content:center}
.trans-big{font-weight:700;line-height:0.86;letter-spacing:-0.04em;text-transform:uppercase;font-size:clamp(3rem,13vw,15rem)}
.trans-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(2.2rem,5vw,3.6rem)}
.channel{
  display:inline-flex;align-items:center;gap:0.7rem;
  padding:clamp(0.9rem,1.6vw,1.15rem) clamp(1.4rem,2.6vw,1.9rem);
  border:1px solid var(--cf);border-radius:999px;
  font-size:clamp(1rem,1.5vw,1.25rem);font-weight:600;
  transition:background 0.4s var(--ease),color 0.4s var(--ease),transform 0.4s var(--ease);
}
.channel:hover{background:var(--cream);color:var(--blue);border-color:var(--cream);transform:translateY(-2px)}
.channel .arrow{transition:transform 0.45s cubic-bezier(0.34,1.4,0.64,1)}
.channel:hover .arrow{transform:translate(4px,-4px)}
.trans-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;color:var(--cd);margin-top:clamp(3.5rem,9vh,6rem)}
.trans-cols{display:flex;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap}
.trans-cols .fc{display:flex;flex-direction:column;gap:0.5rem}
.trans-cols .fc .k{opacity:0.5}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important}
  .rl>span,.rise{transition:none !important;transform:none !important;opacity:1 !important}
}
@media print{
  .hud,.space-bg,.boot{display:none !important}
  .zone-inner{transform:none !important;opacity:1 !important}
  .rl>span,.rise{transform:none !important;opacity:1 !important}
}