/* ============================================================
   THE PANTHEON — pure HTML/CSS/JS living portal
   ============================================================ */
:root{
  --green:#2bff88;
  --neon:#46ffa0;
  --bg:#04050b;
  --hair:rgba(255,255,255,.10);
  --fontD:'Cinzel',serif;
  --fontT:'Chakra Petch',sans-serif;
  --fontM:'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:#e7e9f3;font-family:var(--fontT);overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

#stage{position:fixed;inset:0;overflow:hidden;isolation:isolate}
.layer{position:absolute;inset:0;pointer-events:none}

/* ---- painted world (parallax base) ---- */
.painting{
  background:url("gods-bg.jpg") center 20%/cover no-repeat;
  inset:-4%;
  transform:translate(0,0) scale(1.02);
  will-change:transform;
  animation:breathe 18s ease-in-out infinite;
}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}

#fx{z-index:2}
#hood{z-index:3;mix-blend-mode:screen}

.vignette{
  z-index:4;
  background:
    radial-gradient(120% 92% at 50% 42%,transparent 33%,rgba(2,3,10,.6) 100%),
    linear-gradient(180deg,rgba(2,3,10,.55) 0%,transparent 18% 60%,rgba(2,3,10,.94) 100%);
}
.scanlines{z-index:40;opacity:.05;background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}

/* god hover-glows over the painted gods */
.godglow{position:absolute;width:42vh;height:42vh;border-radius:50%;transform:translate(-50%,-50%);z-index:5;
  pointer-events:none;opacity:0;transition:opacity .45s;mix-blend-mode:screen;filter:blur(4px)}
.godglow[data-realm="media"]{left:33%;top:46%;background:radial-gradient(circle,#a45cff66,transparent 62%)}
.godglow[data-realm="cloud"]{left:66%;top:44%;background:radial-gradient(circle,#2f9be666,transparent 62%)}
.godglow[data-realm="infra"]{left:31%;top:65%;background:radial-gradient(circle,#e5700066,transparent 62%)}
.godglow[data-realm="home"]{left:69%;top:63%;background:radial-gradient(circle,#21c7f566,transparent 62%)}
.godglow.on{opacity:1}

/* ============ HUD ============ */
.hud{position:absolute;inset:0;z-index:10;pointer-events:none}
.hud>*{pointer-events:auto}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float{animation:floaty 7s ease-in-out infinite}

/* node core */
.nodecore{position:absolute;left:50%;top:clamp(10px,2vh,22px);transform:translateX(-50%);text-align:center;max-width:min(540px,92vw)}
.nodecore .crown{color:var(--neon);font-size:15px;filter:drop-shadow(0 0 10px var(--green))}
.node-name{font-family:var(--fontD);font-weight:900;font-size:clamp(16px,2.2vw,22px);letter-spacing:3px;color:#fff;text-shadow:0 0 18px var(--green);margin-top:2px}
.node-spec{font-family:var(--fontM);font-size:11px;letter-spacing:.5px;color:rgba(255,255,255,.82);margin-top:6px}
.node-cluster{font-family:var(--fontT);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--neon);opacity:.92;margin-top:5px}
.node-cluster::first-letter{color:#e57000;text-shadow:0 0 8px #e5700088}
.node-backup{font-family:var(--fontM);font-size:9.5px;letter-spacing:1px;color:rgba(255,255,255,.5);margin-top:3px}
.seam{height:1px;width:200px;margin:9px auto 0;background:linear-gradient(90deg,transparent,var(--green),transparent);box-shadow:0 0 10px var(--green)}

/* ============ REALMS — holographic projections (no boxes) ============ */
.realm{position:absolute;width:clamp(208px,21vw,272px);padding:8px 16px;display:block;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.realm::before{content:"";position:absolute;inset-block:6px;width:1px;
  background:linear-gradient(180deg,transparent,var(--acc),transparent);box-shadow:0 0 14px var(--acc);transition:box-shadow .3s}
.realm::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 45%,transparent) 0%,transparent 64%);
  opacity:.14;transition:opacity .4s,transform .4s;filter:blur(3px)}
.realm--media{left:clamp(14px,3vw,52px);top:26vh}
.realm--cloud{right:clamp(14px,3vw,52px);top:26vh;text-align:right}
.realm--infra{left:clamp(14px,3vw,52px);bottom:clamp(94px,15vh,150px)}
.realm--home{right:clamp(14px,3vw,52px);bottom:clamp(94px,15vh,150px);text-align:right}
.realm--media::before,.realm--infra::before{left:0}
.realm--cloud::before,.realm--home::before{right:0}
.realm--media::after{left:-70px;top:-30px}
.realm--cloud::after{right:-70px;top:-30px}
.realm--infra::after{left:-70px;bottom:-50px}
.realm--home::after{right:-70px;bottom:-50px}

.realm:hover{transform:translateY(-3px) scale(1.03)}
.realm:hover::before{box-shadow:0 0 26px var(--acc)}
.realm:hover::after{opacity:.5;transform:scale(1.12)}

.r-head{display:flex;align-items:center;gap:11px}
.realm--cloud .r-head,.realm--home .r-head{flex-direction:row-reverse}
.r-glyph{width:34px;height:34px;flex:0 0 auto;color:var(--acc);filter:drop-shadow(0 0 10px var(--acc));animation:floaty 6s ease-in-out infinite}
.r-glyph svg{width:100%;height:100%;display:block}
.r-title{display:flex;flex-direction:column;min-width:0;flex:1}
.r-name{font-family:var(--fontD);font-weight:700;font-size:clamp(15px,1.6vw,19px);letter-spacing:1.6px;color:#fff;line-height:1.04;text-shadow:0 0 4px #000,0 0 16px var(--acc)}
.r-role{font-family:var(--fontT);font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--acc);margin-top:2px;text-shadow:0 0 8px color-mix(in srgb,var(--acc) 50%,transparent)}
.r-led{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#27f08a;box-shadow:0 0 9px #27f08a;animation:pulse 2.2s infinite}
.r-led.down{background:#ff4040;box-shadow:0 0 9px #ff4040;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.r-url{display:inline-block;margin-top:12px;font-family:var(--fontM);font-size:11.5px;color:rgba(255,255,255,.9);
  padding:6px 14px;border-radius:20px;background:rgba(3,5,12,.5);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--acc) 22%,transparent);text-shadow:0 1px 3px #000;white-space:nowrap}
.r-url .arr{color:var(--acc);margin-left:6px;transition:margin-left .2s}
.realm:hover .r-url .arr{margin-left:10px}
.r-feats{display:flex;gap:13px;margin-top:13px}
.realm--cloud .r-feats,.realm--home .r-feats{justify-content:flex-end}
.r-feats span{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--fontT);font-size:8.5px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.72);text-shadow:0 1px 4px #000;text-align:center;line-height:1.1}
.r-feats .fi{width:22px;height:22px;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--acc) 55%,transparent));transition:transform .2s}
.realm:hover .r-feats .fi{transform:translateY(-2px)}

/* satellites */
.sat{position:absolute;z-index:10;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px}
.sat[data-pos="req"]{left:37.5%;top:21%}
.sat[data-pos="notify"]{left:62.5%;top:21%}
.sat[data-pos="auth"]{left:32.5%;top:33%}
.sat svg.si{width:18px;height:18px;fill:none;stroke:var(--neon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px var(--green))}
.sat>svg{display:grid;place-items:center;width:38px;height:38px;padding:9px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,11,20,.85) 30%,transparent 100%);border:1px solid rgba(70,255,160,.35);
  box-shadow:0 0 14px rgba(43,255,136,.25);transition:transform .25s,box-shadow .25s;animation:floaty 8s ease-in-out infinite}
.sat:hover>svg{transform:scale(1.15);box-shadow:0 0 22px rgba(43,255,136,.5)}
.sat-lbl{font-family:var(--fontM);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--neon);
  opacity:0;transition:opacity .2s;text-shadow:0 1px 4px #000}
.sat:hover .sat-lbl{opacity:1}

/* creed */
.creed{position:absolute;left:50%;top:51%;transform:translateX(-50%);text-align:center;max-width:min(720px,92vw)}
.creed h1{font-family:var(--fontD);font-weight:900;font-size:clamp(40px,7.2vw,82px);letter-spacing:.3em;color:#fff;padding-left:.3em;
  text-shadow:0 0 40px rgba(43,255,136,.5),0 2px 34px rgba(0,0,0,.9)}
.mantra{margin-top:8px;font-family:var(--fontT);font-size:clamp(11px,1.4vw,14px);letter-spacing:.3em;text-transform:uppercase;color:rgba(180,255,214,.82);text-shadow:0 1px 6px #000}
.mantra b{color:var(--green)}
.oracle{margin-top:12px;font-family:var(--fontM);font-size:11px;letter-spacing:2.5px;color:rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;gap:9px}
.oracle.up{color:#27f08a;text-shadow:0 0 12px rgba(39,240,138,.6)}
.oracle.down{color:#ff6b6b}
.o-dot{width:9px;height:9px;border-radius:50%;background:#555}
.oracle.up .o-dot{background:#27f08a;box-shadow:0 0 10px #27f08a;animation:pulse 2.2s infinite}
.oracle.down .o-dot{background:#ff4040;box-shadow:0 0 10px #ff4040}

/* codex */
.codex{position:absolute;left:50%;bottom:clamp(12px,2.6vh,28px);transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
.cx-clock{font-family:var(--fontM);font-size:10px;letter-spacing:.35em;color:rgba(70,255,160,.7);text-shadow:0 1px 4px #000}
.cx-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 13px;max-width:min(960px,94vw)}
.cx-storage{font-family:var(--fontM);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(70,255,160,.8)}
.cx-storage b{color:#fff}
.cx-svc{font-family:var(--fontT);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(70,255,160,.62);gap:4px 11px}
.cx-svc .dot{opacity:.4}
.cx-svc .nd{color:#e57000;text-shadow:0 0 10px #e5700088}
.cx-links{display:flex;gap:24px;margin-top:1px;font-family:var(--fontM);font-size:10px;letter-spacing:2px;text-transform:uppercase}
.cx-links a{color:var(--neon);opacity:.72;transition:opacity .2s,text-shadow .2s}
.cx-links a:hover{opacity:1;text-shadow:0 0 10px var(--green)}

/* hood gateway + runes */
.hood-gate{position:absolute;left:50%;top:17%;width:16vw;height:38vh;transform:translateX(-50%);z-index:8;
  background:transparent;border:0;cursor:pointer}
.runes{position:absolute;left:50%;top:35%;width:44vh;height:44vh;transform:translate(-50%,-50%) scale(.85);z-index:6;
  pointer-events:none;opacity:0;transition:opacity .5s,transform .5s}
.runes.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.runes .ring{position:absolute;inset:16%;border:1px solid rgba(43,255,136,.28);border-radius:50%;box-shadow:inset 0 0 36px rgba(43,255,136,.14)}
.runes .glyphs{position:absolute;inset:0;animation:spin 26s linear infinite}
.runes .glyphs span{position:absolute;left:50%;top:50%;font-family:var(--fontD);font-size:18px;color:var(--green);text-shadow:0 0 10px var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ LOGIN PORTAL (emerges from the hood) ============ */
.portal{position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,rgba(1,4,2,.55),rgba(1,2,8,.94) 60%);
  opacity:0;transition:opacity .8s}
.portal[hidden]{display:none}
.portal.show{opacity:1}
.chamber{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;width:320px;text-align:center;
  transform:scale(.6);opacity:0;filter:blur(8px);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s,filter .9s;transition-delay:.25s}
.portal.show .chamber{transform:scale(1);opacity:1;filter:blur(0)}
.ch-title{font-family:var(--fontD);font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--green);text-shadow:0 0 16px var(--green)}
.ch-err{font-family:var(--fontM);font-size:13px;letter-spacing:3px;color:#ff5a6a;text-shadow:0 0 12px #ff3b3b;min-height:0;opacity:0;transition:opacity .2s}
.ch-err.on{opacity:1;animation:jit .35s}
@keyframes jit{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.field{position:relative;display:block;width:100%}
.f-lbl{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--fontM);font-size:8px;letter-spacing:.4em;text-transform:uppercase;color:var(--neon);opacity:.6}
.field input{width:100%;background:transparent;border:0;outline:0;text-align:center;color:#fff;font-family:var(--fontT);font-size:16px;letter-spacing:.25em;padding:4px 0;caret-color:var(--green);text-shadow:0 0 8px rgba(43,255,136,.4)}
.field::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);box-shadow:0 0 10px var(--green)}
.enter{position:relative;margin-top:6px;background:transparent;border:0;cursor:pointer;font-family:var(--fontD);font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--green);text-shadow:0 0 14px var(--green);padding:10px 26px;transition:transform .2s}
.enter::before{content:"";position:absolute;inset:0;border-radius:30px;border:1px solid rgba(43,255,136,.5);box-shadow:0 0 22px rgba(43,255,136,.35),inset 0 0 18px rgba(43,255,136,.15)}
.enter:hover{transform:scale(1.06)}
.withdraw{background:transparent;border:0;cursor:pointer;font-family:var(--fontM);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--neon);opacity:.4;transition:opacity .2s}
.withdraw:hover{opacity:.85}

/* flash overlays */
.flash{position:absolute;inset:0;z-index:35;pointer-events:none;opacity:0}
#flashG{background:radial-gradient(circle at 50% 42%,rgba(43,255,136,.85),rgba(43,255,136,.3) 30%,transparent 70%)}
#flashR{background:radial-gradient(circle at 50% 32%,rgba(255,40,60,.8),transparent 65%)}

/* sound sigil */
.sound{position:absolute;left:18px;bottom:16px;z-index:45;background:transparent;border:0;cursor:pointer;
  font-family:var(--fontM);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--neon);opacity:.6;transition:opacity .2s;text-shadow:0 0 10px var(--green)}
.sound:hover{opacity:1}

/* entered state — fade the world UI as the portal opens */
#stage.entered .hud,#stage.entered .hood-gate,#stage.entered .runes,#stage.entered .codex,#stage.entered .sound{opacity:0;pointer-events:none;transition:opacity .8s}

/* ============ RESPONSIVE ============ */
@media (max-width:880px){
  .painting{background-position:center 30%}
  .realm{position:static!important;width:100%;max-width:460px;margin:14px auto 0;text-align:left!important;
    padding:14px 16px;border-radius:12px;background:rgba(6,8,14,.62);border:1px solid var(--hair);border-left:3px solid var(--acc)}
  .realm::before,.realm::after{display:none}
  .realm--cloud .r-head,.realm--home .r-head{flex-direction:row}
  .realm--cloud .r-feats,.realm--home .r-feats{justify-content:flex-start}
  .hud{overflow-y:auto;display:flex;flex-direction:column;padding:0 14px 40px}
  .nodecore{position:static;transform:none;margin:74px auto 0}
  .creed{position:static;transform:none;margin:clamp(140px,40vh,300px) auto 0}
  .codex{position:static;transform:none;margin:18px auto 0}
  .sat{display:none}
  .hood-gate{top:8%;height:30vh}
}

@media (prefers-reduced-motion:reduce){
  .painting,.float,.r-glyph,.sat>svg,.runes .glyphs,.fog,.realmbg .rb{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ============================================================
   7-LAYER PARALLAX  (Stars · Fog · Realm-bg · Gods · Energy · Holo · UI)
   ============================================================ */
.px{will-change:transform}
/* L1 stars */
#stars{z-index:0;opacity:.7;mix-blend-mode:screen}
/* L2 fog */
.fog{z-index:1;opacity:.7;
  background:radial-gradient(60% 50% at 50% 42%,rgba(60,100,150,.05),transparent 75%),
             radial-gradient(38% 30% at 26% 30%,rgba(43,255,136,.04),transparent 70%);
  animation:fogpulse 26s ease-in-out infinite}
@keyframes fogpulse{0%,100%{opacity:.5}50%{opacity:.9}}
/* L3 realm backgrounds — coloured deep-space at each corner */
.realmbg{z-index:2}
.realmbg .rb{position:absolute;width:56vw;height:56vh;border-radius:50%;filter:blur(38px);mix-blend-mode:screen;opacity:.4;animation:rbpulse 9s ease-in-out infinite}
.realmbg .rb.m{left:-10%;top:-12%;background:radial-gradient(circle,rgba(122,60,255,.5),transparent 60%)}
.realmbg .rb.c{right:-10%;top:-12%;background:radial-gradient(circle,rgba(30,111,217,.5),transparent 60%);animation-delay:-2s}
.realmbg .rb.i{left:-10%;bottom:-12%;background:radial-gradient(circle,rgba(181,80,0,.5),transparent 60%);animation-delay:-4s}
.realmbg .rb.h{right:-10%;bottom:-12%;background:radial-gradient(circle,rgba(21,151,200,.5),transparent 60%);animation-delay:-6s}
@keyframes rbpulse{0%,100%{opacity:.26}50%{opacity:.5}}
/* L4 gods — painting, edge-masked so deep layers show behind */
.painting{z-index:3;
  -webkit-mask:radial-gradient(140% 135% at 50% 40%,#000 64%,rgba(0,0,0,.55) 86%,transparent 100%);
          mask:radial-gradient(140% 135% at 50% 40%,#000 64%,rgba(0,0,0,.55) 86%,transparent 100%)}
.godglows{z-index:4}
/* L5 energy + particles */
#fx{z-index:5}
/* matrix hood rides with the gods */
.hoodwrap{z-index:6;pointer-events:none}
#hood{position:absolute;left:50%;top:18%;transform:translateX(-50%);mix-blend-mode:screen;
  /* feathered well inside the canvas box so no rectangular edge ("frame") shows */
  -webkit-mask:radial-gradient(54% 64% at 50% 30%,#000 6%,rgba(0,0,0,.45) 40%,transparent 80%);
          mask:radial-gradient(54% 64% at 50% 30%,#000 6%,rgba(0,0,0,.45) 40%,transparent 80%)}
.vignette{z-index:7}
/* L6 holograms */
.hud{z-index:10}
/* L7 UI */
.ui{z-index:11;pointer-events:none}
.codex a{pointer-events:auto}
.runes{z-index:9}
.scanlines{z-index:40}

/* ---- awakening intro ---- */
.awaken{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:#01020a;pointer-events:none;animation:awaken 2.1s ease forwards}
.awaken span{font-family:var(--fontD);font-size:13px;letter-spacing:.6em;text-transform:uppercase;color:var(--green);text-shadow:0 0 18px var(--green);animation:pulse 1.2s ease-in-out infinite}
@keyframes awaken{0%,52%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.awaken{animation:none!important;opacity:0;visibility:hidden}}