/* ═══ KACHTAN — STYLE ═══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0B0D12;--bg2:#12151C;--fg:#E2E6ED;
  --dim:rgba(226,230,237,0.25);--ghost:rgba(226,230,237,0.04);--mute:rgba(226,230,237,0.10);
  --cyan:#00D4FF;--c-dim:rgba(0,212,255,0.20);--c-ghost:rgba(0,212,255,0.05);
  --purple:#A855F7;--blue:#3B82F6;--green:#4ADE80;--pink:#FF6B9D;--red:#FF5A5A;--amber:#FBBF24;
}
html{font-size:18px}
body{background:var(--bg);color:var(--fg);font-family:'JetBrains Mono',monospace;overflow:hidden;cursor:crosshair;-webkit-font-smoothing:antialiased;height:100vh;height:100dvh}
::-webkit-scrollbar{width:0}
::selection{background:rgba(0,212,255,0.15);color:var(--fg)}

/* ═══ OVERLAYS ═══ */
.ov-scan{position:fixed;inset:0;z-index:9998;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.007) 2px,rgba(0,0,0,0.007) 4px)}
.ov-grain{position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:0.025;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:512px}
.ov-vig{position:fixed;inset:0;z-index:9996;pointer-events:none;background:radial-gradient(ellipse 70% 70% at center,transparent 0%,rgba(11,13,18,0.6) 100%)}

/* ═══ FRAME ═══ */
.frame{position:fixed;z-index:100;pointer-events:none;opacity:0;transition:opacity 1.2s ease-out 0s}
body.ready .frame{opacity:1}
.frame-t{top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--c-ghost) 20%,var(--c-dim) 50%,var(--c-ghost) 80%,transparent)}
.frame-b{bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--c-ghost) 20%,var(--c-dim) 50%,var(--c-ghost) 80%,transparent)}
.frame-l{top:0;bottom:0;left:0;width:1px;background:linear-gradient(180deg,transparent,var(--c-ghost) 20%,var(--c-dim) 50%,var(--c-ghost) 80%,transparent)}
.frame-r{top:0;bottom:0;right:0;width:1px;background:linear-gradient(180deg,transparent,var(--c-ghost) 20%,var(--c-dim) 50%,var(--c-ghost) 80%,transparent)}

/* ═══ INTRO (dark overlay, fades via JS) ═══ */
#intro{position:fixed;inset:0;z-index:10000;background:var(--bg);pointer-events:none}

/* ═══ THREE.JS CANVAS ═══ */
#c{position:fixed;inset:0;z-index:0;transition:opacity 0.8s ease}

/* ═══ CURSOR GLOW ═══ */
#glow{position:fixed;width:500px;height:500px;border-radius:50%;pointer-events:none;z-index:5;background:radial-gradient(circle,rgba(0,212,255,0.02),transparent 70%);transform:translate(-50%,-50%);opacity:0}

/* ═══ GLITCH / SWEEP ═══ */
.gbar{position:fixed;left:0;right:0;height:2px;z-index:9999;pointer-events:none;opacity:0;background:linear-gradient(90deg,var(--cyan),var(--purple));box-shadow:0 0 10px var(--cyan)}
.sweep{position:fixed;left:0;right:0;height:1px;z-index:90;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--purple) 50%,var(--pink) 70%,transparent);box-shadow:0 0 15px rgba(0,212,255,0.15)}

/* ═══ HUD (staggered reveal) ═══ */
.hud{position:fixed;z-index:100;font-size:0.52rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-dim);pointer-events:none;opacity:0;transition:opacity 1.2s ease-out 0.3s;font-weight:300}
body.ready .hud{opacity:1}
.hud-tl{top:1rem;left:1.2rem}
.hud-tr{top:1rem;right:1.2rem;text-align:right}
.hud-line{margin-bottom:0.2rem}
.hud-v{color:var(--cyan);font-weight:500}

/* ═══ NAV (staggered reveal) ═══ */
.nav{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:500;display:flex;gap:0.15rem;opacity:0;transition:opacity 1.2s ease-out 0.6s;pointer-events:none;max-width:95vw}
body.ready .nav{opacity:1;pointer-events:all}
.nav-btn{font-family:'Orbitron',sans-serif;font-size:0.5rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);padding:0.55rem 0.9rem;background:rgba(11,13,18,0.7);border:1px solid var(--ghost);border-radius:2px;cursor:pointer;transition:all 0.4s ease;backdrop-filter:blur(10px);white-space:nowrap;-webkit-appearance:none;appearance:none;line-height:inherit}
.nav-btn:hover{color:var(--cyan);border-color:var(--c-dim)}
.nav-btn.active{color:var(--cyan);border-color:var(--cyan);background:rgba(0,212,255,0.04)}

/* ═══ SECTORS ═══ */
.sector{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:5rem 2rem 5.5rem;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity 0.6s ease,transform 0.6s cubic-bezier(0.22,1,0.36,1);overflow-y:auto}
.sector.active{opacity:1;pointer-events:all;transform:translateY(0)}
.sector-content{max-width:900px;width:100%;position:relative}

/* ═══ MAINFRAME — HERO ═══ */
.hero-center{text-align:center}
.wordmark{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(2.8rem,11vw,8rem);letter-spacing:0.18em;color:var(--fg);position:relative;line-height:0.85;text-shadow:0 0 80px rgba(0,212,255,0.04),0 0 120px rgba(168,85,247,0.02);user-select:none;-webkit-user-select:none;white-space:nowrap;text-align:center;width:100%}

/* Chromatic glitch pseudo-elements */
.wordmark::before,.wordmark::after{content:'KACHTAN';position:absolute;inset:0}
.wordmark::before{color:var(--cyan);animation:gc1 5s step-end infinite;opacity:0.1}
.wordmark::after{color:var(--purple);animation:gc2 5s step-end infinite;opacity:0.08}

/* Hidden before intro reveals it */
.wordmark.wm-hidden{opacity:0;transform:translateY(10px);filter:blur(4px)}
.wordmark.wm-hidden::before,.wordmark.wm-hidden::after{opacity:0;animation:none}

/* Revealing animation (JS adds this class) */
.wordmark.wm-revealing{opacity:1;transform:translateY(0);filter:blur(0);transition:opacity 0.6s ease,transform 0.6s cubic-bezier(0.22,1,0.36,1),filter 0.4s ease}
.wordmark.wm-revealing::before,.wordmark.wm-revealing::after{opacity:0;animation:none}

/* Single glitch burst after reveal */
.wordmark.wm-glitch-once::before{opacity:0.25;clip-path:inset(10% 0 70% 0);transform:translateX(-4px);transition:none}
.wordmark.wm-glitch-once::after{opacity:0.2;clip-path:inset(60% 0 15% 0);transform:translateX(5px);transition:none}

@keyframes gc1{0%,88%{clip-path:inset(0 0 100% 0)}89%{clip-path:inset(10% 0 70% 0);transform:translateX(-4px)}90%{clip-path:inset(60% 0 15% 0);transform:translateX(5px)}91%{clip-path:inset(30% 0 45% 0);transform:translateX(-3px)}92%,100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}}
@keyframes gc2{0%,91%{clip-path:inset(0 0 100% 0)}92%{clip-path:inset(70% 0 5% 0);transform:translateX(6px)}93%{clip-path:inset(5% 0 80% 0);transform:translateX(-5px)}94%,100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}}

/* Sub-elements start hidden, revealed by JS classes */
.wm-line{display:block;width:0;height:1px;margin:1.8rem auto 0;background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),transparent);opacity:0.3;transition:width 0.8s cubic-bezier(0.22,1,0.36,1)}
.wm-line.wm-line-show{width:min(50%,350px)}
.hero-tagline{margin-top:2.5rem;font-size:0.6rem;letter-spacing:0.45em;text-transform:uppercase;color:var(--c-dim);opacity:0;transition:opacity 0.6s ease}
.hero-sub{margin-top:1.5rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(1rem,1.8vw,1.25rem);color:var(--dim);opacity:0;transition:opacity 0.6s ease}
.hero-tagline.hero-show,.hero-sub.hero-show{opacity:1}

/* Terminal breadcrumb hint */
.term-hint{position:fixed;bottom:8rem;left:50%;transform:translateX(-50%);z-index:200;font-size:0.55rem;letter-spacing:0.15em;color:rgba(0,212,255,0.12);pointer-events:none;opacity:0;transition:opacity 0.5s ease;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.term-hint.show{opacity:1}

/* ═══ ORIGIN ═══ */
#sec-origin{overflow:hidden;align-items:center;justify-content:center;padding:4rem 2rem}
.origin-label{font-family:'Orbitron',sans-serif;font-size:0.5rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.8rem;display:flex;align-items:center;gap:1.5rem}
.origin-rule{flex:1;height:1px;background:var(--c-ghost)}
.origin-prose{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:1rem;line-height:1.8;color:var(--dim);margin-bottom:2rem}
.origin-coda{margin-top:2rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:0.85rem;color:var(--mute)}
.dossier{background:rgba(0,212,255,0.01);border:1px solid var(--c-ghost);padding:1.8rem 2rem;position:relative;font-size:0.72rem;line-height:2;color:var(--dim)}
.dossier-label{position:absolute;top:-0.45rem;left:1.5rem;background:var(--bg);padding:0 0.8rem;font-family:'Orbitron',sans-serif;font-size:0.4rem;letter-spacing:0.3em;color:var(--c-dim);font-weight:500}
.d-meta{display:flex;gap:2.5rem;margin-bottom:1.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--c-ghost);font-size:0.55rem;letter-spacing:0.08em}
.d-k{color:var(--c-dim)}.d-v{color:var(--fg);margin-left:0.4rem}.d-v.on{color:var(--green)}
.rx{background:var(--dim);color:transparent;padding:0 0.3rem;user-select:none;border-radius:1px;transition:background 0.3s}.rx:hover{background:var(--red);cursor:not-allowed}
/* (dossier-footer removed) */

/* ═══ LABORATORY ═══ */
.lab-tabs{position:absolute;top:5rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:0.1rem}
.lab-tab{font-family:'Orbitron',sans-serif;font-size:0.42rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--dim);padding:0.45rem 0.8rem;background:rgba(11,13,18,0.7);border:1px solid var(--ghost);border-radius:2px 2px 0 0;cursor:pointer;transition:all 0.3s ease;backdrop-filter:blur(10px);white-space:nowrap}
.lab-tab:hover{color:var(--cyan);border-color:var(--c-dim)}
.lab-tab.active{color:var(--cyan);border-color:var(--cyan);border-bottom-color:transparent;background:rgba(0,212,255,0.04)}

.lab-panel{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.4s ease}
.lab-panel.active{opacity:1;pointer-events:all}
.lab-panel canvas{position:absolute;inset:0;cursor:crosshair;touch-action:none}

.lab-hud{position:absolute;z-index:2;pointer-events:none}
.lab-hud-tl{top:8rem;left:2rem;font-size:0.55rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--c-dim)}
.lab-title{font-family:'Orbitron',sans-serif;font-weight:700;font-size:1rem;color:var(--fg);margin-bottom:0.5rem}
.lab-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:0.85rem;color:var(--dim)}
.lab-hud-br{bottom:6rem;right:2rem;font-size:0.5rem;letter-spacing:0.15em;color:var(--dim);text-align:right;line-height:1.8}
.lab-inst{position:absolute;bottom:6rem;left:2rem;z-index:2;font-size:0.52rem;letter-spacing:0.12em;color:var(--dim);pointer-events:none;line-height:2;background:rgba(11,13,18,0.6);padding:0.4rem 0.8rem;border-radius:2px;backdrop-filter:blur(10px)}
.lab-reset{position:absolute;top:8rem;right:2rem;z-index:2;font-family:'Orbitron',sans-serif;font-size:0.48rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-dim);padding:0.5rem 1rem;border:1px solid var(--c-ghost);border-radius:2px;background:rgba(11,13,18,0.6);cursor:pointer;backdrop-filter:blur(10px);transition:all 0.3s ease}
.lab-reset:hover{color:var(--cyan);border-color:var(--c-dim)}
.lab-reset:active{color:var(--fg);border-color:var(--cyan)}

/* Frequency unlock button */
#freq-unlock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;font-family:'Orbitron',sans-serif;font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cyan);padding:1rem 2rem;border:1px solid var(--c-dim);border-radius:2px;background:rgba(11,13,18,0.85);cursor:pointer;backdrop-filter:blur(15px);transition:all 0.3s ease;box-shadow:0 0 30px rgba(0,212,255,0.05)}
#freq-unlock:hover{border-color:var(--cyan);box-shadow:0 0 40px rgba(0,212,255,0.1)}
#freq-unlock.hidden{opacity:0;pointer-events:none}

/* ═══ SIGNAL ═══ */
.signal-center{text-align:center;max-width:700px}
.quotes-section{margin-bottom:6rem}
.quotes-label{font-family:'Orbitron',sans-serif;font-size:0.5rem;letter-spacing:0.5em;color:var(--c-dim);margin-bottom:3rem;display:flex;align-items:center;gap:1.5rem}
.quotes-label::after{content:'';flex:1;height:1px;background:var(--c-ghost)}
.quote-carousel{position:relative;min-height:260px}
.quote-card{position:absolute;width:100%;padding:3rem 3rem 2.5rem 3.5rem;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity 0.8s ease;border-left:1px solid var(--c-ghost)}
.quote-card.active{opacity:1;position:relative}
.quote-mark{position:absolute;top:0.5rem;left:0.8rem;font-family:'Cormorant Garamond',serif;font-size:6rem;color:var(--c-dim);line-height:1;pointer-events:none}
.quote-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.8;color:var(--fg);margin-bottom:1.5rem}
.quote-attr{font-family:'Orbitron',sans-serif;font-size:0.5rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--cyan)}
.quote-role{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--dim);margin-top:0.3rem;font-weight:300}
.quote-nav{display:flex;gap:0.8rem;margin-top:2rem;justify-content:center;align-items:center}
.quote-arrow{width:28px;height:28px;border:1px solid var(--c-ghost);border-radius:2px;background:rgba(11,13,18,0.6);color:var(--c-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.6rem;transition:all 0.3s;backdrop-filter:blur(10px)}
.quote-arrow:hover{color:var(--cyan);border-color:var(--c-dim)}
.quote-dots{display:flex;gap:0.5rem}
.quote-dot{width:6px;height:6px;border-radius:50%;border:1px solid var(--c-dim);background:transparent;cursor:pointer;transition:all 0.3s}
.quote-dot.active{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px rgba(0,212,255,0.3)}

.signal-end{margin-top:5rem;font-family:'Orbitron',sans-serif;font-size:0.5rem;letter-spacing:0.5em;color:var(--mute)}
.blink-c{display:inline-block;width:6px;height:11px;background:var(--cyan);animation:bk 0.5s step-end infinite;vertical-align:middle;margin-left:0.5rem}
@keyframes bk{50%{opacity:0}}

/* Signal FX canvas */
.fx-canvas{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 0.8s ease}
.fx-canvas.active{opacity:1}

/* ═══ TERMINAL ═══ */
#term-ov{position:fixed;inset:0;z-index:9000;background:rgba(11,13,18,0.88);backdrop-filter:blur(30px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s}
#term-ov.open{opacity:1;pointer-events:all}
#term{width:min(92vw,720px);height:min(75vh,520px);background:rgba(18,21,28,0.97);border:1px solid var(--c-ghost);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 80px rgba(0,212,255,0.02),0 0 1px rgba(0,212,255,0.15)}
#term-head{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;background:rgba(0,212,255,0.02);border-bottom:1px solid var(--c-ghost);font-size:0.48rem;letter-spacing:0.1em;color:var(--c-dim)}
#term-body{flex:1;padding:1rem;overflow-y:auto;font-size:0.65rem;line-height:1.8;color:var(--cyan)}
.to{margin-bottom:0.1rem}.dim{color:var(--dim)}.g{color:var(--cyan)}.c{color:var(--blue)}.a{color:var(--amber)}.r{color:var(--red)}.gn{color:var(--green)}.pp{color:var(--purple)}
#term-in-row{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 1rem;border-top:1px solid var(--c-ghost)}
#term-prompt{color:var(--cyan);font-size:0.65rem;white-space:nowrap}
#term-in{flex:1;background:none;border:none;outline:none;color:var(--fg);font-family:'JetBrains Mono',monospace;font-size:0.65rem;caret-color:var(--cyan)}

/* Mobile terminal button */
.mobile-term{display:none;position:fixed;bottom:4.5rem;right:1.2rem;z-index:500;width:34px;height:34px;border:1px solid var(--c-ghost);border-radius:4px;background:rgba(11,13,18,0.8);color:var(--c-dim);font-family:'JetBrains Mono',monospace;font-size:0.65rem;cursor:pointer;align-items:center;justify-content:center;backdrop-filter:blur(10px);opacity:0;transition:opacity 2s ease 3s}
body.ready .mobile-term{opacity:1}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .hud{font-size:0.35rem}
  .hud-tr{display:none}
  .nav{gap:0.1rem;left:0;right:0;transform:none;padding:0 0.3rem;justify-content:center;bottom:0.6rem}
  .nav-btn{font-size:0.38rem;padding:0.5rem 0.5rem;letter-spacing:0.06em;flex-shrink:0;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
  .sector{padding:4.5rem 1.2rem 4.5rem}
  #sec-origin{padding:3rem 1.2rem}
  .origin-label{margin-bottom:1.2rem;font-size:0.4rem}
  .origin-prose{font-size:0.85rem;margin-bottom:1.5rem}
  .origin-coda{margin-top:1.5rem;font-size:0.75rem}
  .wordmark{font-size:clamp(2rem,10vw,4rem);letter-spacing:0.12em}
  .d-meta{flex-direction:column;gap:0.5rem}
  .dossier{padding:1.2rem 1rem;font-size:0.6rem}
  .mobile-term{display:flex}
  #glow{display:none}
  .frame-l,.frame-r{display:none}
  .term-hint{display:none}

  .lab-tabs{top:4.2rem;gap:0.05rem}
  .lab-tab{font-size:0.32rem;padding:0.35rem 0.45rem;letter-spacing:0.08em}
  .lab-hud-tl{top:7rem;left:1rem;font-size:0.38rem}
  .lab-hud-br{bottom:5rem;right:1rem;font-size:0.32rem}
  .lab-inst{font-size:0.38rem;bottom:4rem;left:0.5rem;right:0.5rem;text-align:center;padding:0.3rem 0.5rem}
  .lab-reset{top:7rem;right:1rem;font-size:0.35rem;padding:0.45rem 0.8rem}

  .quote-card{padding:1.5rem 1rem 1rem}
  .quote-mark{font-size:3rem;left:0.3rem}
  .quote-carousel{min-height:220px}

  #term{width:96vw;height:85vh}
}
@media(max-width:400px){
  .nav-btn{padding:0.45rem 0.35rem;font-size:0.32rem}
  .hud-tl{display:none}
  .lab-tab{font-size:0.28rem;padding:0.3rem 0.3rem}
  .wordmark{font-size:clamp(1.6rem,9vw,3rem);letter-spacing:0.08em}
}