/* ========= Theme ========= */
:root{
  --bg:#0a0e18;
  --text:#e8eefc;
  --muted:#a8b6d9;
  --panel:rgba(255,255,255,0.06);
  --panel-strong:rgba(255,255,255,0.12);
  --blue:#5aa9ff;
  --green:#34d399;
  --red:#ef4444;
  --pulse: var(--blue);
  --font:'Rajdhani','Exo 2','Montserrat Alternates','Eurostile','Segoe UI',Roboto,system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%; background:var(--bg); color:var(--text); font-family:var(--font)}

/* ========= Space Layers ========= */
#stars{position:fixed; inset:0; z-index:-3; will-change: transform}
.nebula{
  position:fixed; inset:-10vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 20% 30%, rgba(88,165,255,0.14), transparent 60%),
    radial-gradient(70vmax 70vmax at 80% 20%, rgba(52,211,153,0.1), transparent 60%),
    radial-gradient(60vmax 60vmax at 60% 80%, rgba(239,68,68,0.08), transparent 60%);
  filter: blur(14px) saturate(1.08);
  animation: nDrift 16s ease-in-out infinite alternate;
  will-change: transform, filter;
}
@keyframes nDrift{from{transform:translateY(-0.6%) scale(1)} to{transform:translateY(0.6%) scale(1.01)}}
.nebula.idle{animation-duration:8s; filter: blur(18px) saturate(1.25)}

/* ========= Header ========= */
.header{ text-align:center; padding: clamp(14px,3vw,26px) 16px 0;}
.mantra{ font-weight:800; letter-spacing:.4px; font-size: clamp(18px,2.4vw,28px); }
.mantra .blue{color:var(--blue)} .mantra .green{color:var(--green)} .mantra .red{color:var(--red)}

/* ========= Orb ========= */
.orb-stage{ display:grid; place-items:center; padding: 6px 16px; margin-top: 6px;}
.orb-wrap{ position:relative; width:min(64vmin,520px); aspect-ratio:1/1; }
.orb{
  position:absolute; inset:0; border-radius:50%; display:grid; place-items:center;
  filter: drop-shadow(0 0 20px rgba(90,169,255,.22));
  transform-style:preserve-3d; will-change: transform;
}
.orb-core{ width:70%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  animation: heartbeat 4s ease-in-out infinite; will-change: transform, filter }
.crest{ width:92%; height:auto; opacity:.95; filter: drop-shadow(0 0 10px rgba(255,255,255,.12));
  transform-origin:50% 50%; animation: crestSpin 28s linear infinite; will-change: transform }
.plasma{ position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:screen; will-change: transform, box-shadow }
.plasma.one{ box-shadow: inset 0 0 54px rgba(90,169,255,.22), 0 0 70px rgba(90,169,255,.16) }
.plasma.two{ box-shadow: inset 0 0 70px rgba(52,211,153,.2), 0 0 88px rgba(239,68,68,.14) }
.lens{ position:absolute; inset:0; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.2), transparent 55%);
  mix-blend-mode:screen }

.halo{ position:absolute; inset:0; animation: halo 20s linear infinite; will-change: transform }
.halo-text{ font-size:6.6px; letter-spacing:2.2px; fill: var(--pulse); opacity:.9 }

@keyframes heartbeat{
  0%{ transform: scale(0.985) }
  16%{ transform: scale(1.02) }
  33%{ transform: scale(0.99) }
  50%{ transform: scale(1.03) }
  66%{ transform: scale(1.0) }
  83%{ transform: scale(1.02) }
  100%{ transform: scale(0.985) }
}
@keyframes crestSpin{ from{ transform: rotateY(0deg) } to{ transform: rotateY(360deg) } }
@keyframes halo{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}

/* ========= Console ========= */
.layout{ display:grid; place-items:center; margin-top: 4px; }
.console{ width:min(1100px,92vw); background:var(--panel); border:1px solid var(--panel-strong);
  border-radius:16px; padding:10px; backdrop-filter: blur(8px); transform: translateX(18px); opacity:0;
  transition: transform .7s ease, opacity .7s ease; will-change: transform, opacity }
.console.active{ transform: translateX(0); opacity:1 }
.console-head{ display:flex; gap:10px; align-items:center; padding: 4px 6px 8px }
.console-head h2{ font-size: clamp(16px,2vw,20px); font-weight:700; letter-spacing:.6px}
.console-head input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--panel-strong);
  background: rgba(255,255,255,0.04); color:var(--text); outline:none }
.console-head input:focus{ border-color: var(--pulse); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse) 22%, transparent) }

.faq{ display:grid; gap:8px; padding:6px }
.item{ background: rgba(255,255,255,0.05); border:1px solid var(--panel-strong); border-radius:14px; overflow:hidden }
.item summary{ list-style:none; cursor:pointer; padding:12px 14px; font-weight:600; position:relative }
.item summary::-webkit-details-marker{ display:none }
.item[open] summary{ background: rgba(255,255,255,0.04) }
.item .answer{ padding:0 14px 14px; color:var(--muted); line-height:1.7 }

/* ========= Footer ========= */
.footer{ text-align:center; padding:18px 16px 34px; color:var(--muted) }

/* ========= Boot sequence visibility ========= */
.boot-void .orb, .boot-void .mantra, .boot-void .console{ opacity:0 }
.boot-phase2 .mantra{ opacity:.45; transition: opacity 1s ease }
.boot-phase3 .orb{ opacity:1; transition: opacity 1.1s ease }
.boot-phase4 .console{ opacity:1 }

@media (max-width:900px){
  .orb-wrap{ width:min(78vmin,520px) }
  .console-head{ flex-direction:column; align-items:stretch }
}