@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#030308;
  --panel:#0c0f24;
  --panel-2:#10142e;
  --violet:#8b6bff;
  --gold:#ffcf5c;
  --teal:#4fe8d4;
  --magenta:#ff5da2;
  --text:#eef0ff;
  --muted:#9491b8;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif;
  overflow:hidden;
}

#starfield{ position:fixed; inset:0; z-index:0; }

.hud-mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em; }

/* ---------- Sound toggle ---------- */
#sound-toggle{
  position:fixed; top:1.25rem; right:1.25rem; z-index:50;
  background:rgba(12,15,36,0.6); border:1px solid rgba(139,107,255,0.4);
  color:var(--text); border-radius:999px; padding:0.5rem 0.9rem;
  font-family:'IBM Plex Mono',monospace; font-size:0.75rem; cursor:pointer;
  backdrop-filter:blur(6px); display:flex; align-items:center; gap:0.4rem;
  transition:border-color .2s, background-color .15s;
  min-height:44px; min-width:44px; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
}
#sound-toggle:hover{ border-color:var(--gold); }
#sound-toggle:active{ background:rgba(139,107,255,0.25); }

/* ---------- Splash ---------- */
#splash{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
  background:radial-gradient(ellipse at 50% 40%, rgba(139,107,255,0.12), transparent 60%);
  transition:opacity .9s ease, transform .9s ease;
}
#splash.hide{ opacity:0; transform:scale(1.15); pointer-events:none; }

.splash-title{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(2.5rem,7vw,5.5rem); line-height:1.02; margin:0 0 1rem 0;
  background:linear-gradient(120deg,#eef0ff 20%,var(--violet) 55%,var(--gold) 85%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; animation:fadeUp 1s ease forwards .55s;
}
.splash-sub{
  max-width:520px; color:var(--muted); font-size:1.05rem; line-height:1.6;
  margin:0 0 2.25rem 0;
  opacity:0; animation:fadeUp 1s ease forwards .8s;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

.enter-btn{
  position:relative; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem;
  color:var(--bg); background:linear-gradient(120deg,var(--gold),var(--violet));
  border:none; border-radius:999px; padding:1rem 2.5rem; cursor:pointer;
  box-shadow:0 0 0 0 rgba(139,107,255,0.6);
  opacity:0; animation:fadeUp 1s ease forwards 1.05s, pulse 2.4s ease-in-out infinite 2s;
  letter-spacing:0.02em;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(139,107,255,0.45); }
  50%{ box-shadow:0 0 0 14px rgba(139,107,255,0); }
}
.enter-btn:hover{ filter:brightness(1.08); }
.enter-btn:active{ filter:brightness(1.15); transform:scale(0.97); }
.enter-btn{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* ---------- Warp transition ---------- */
#warp{
  position:fixed; inset:0; z-index:45; pointer-events:none;
  background:var(--bg); opacity:0;
}
#warp.active{ animation:warpFlash 0.7s ease forwards; }
@keyframes warpFlash{
  0%{ opacity:0; }
  35%{ opacity:1; }
  100%{ opacity:0; }
}
.warp-line{
  position:absolute; top:50%; left:50%; height:2px; width:2px;
  background:linear-gradient(90deg, transparent, #fff, transparent);
  transform-origin:left center;
}

/* ---------- App shell ---------- */
#app{
  position:fixed; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center;
  padding:2.5rem 1.5rem;
  opacity:0; pointer-events:none;
  transition:opacity .6s ease;
  /* The porthole grid can be taller than the viewport (9 domains and
     growing) — without this, that extra content was simply unreachable,
     clipped with no way to scroll to it. overflow-y lets #app itself
     become the scroll container; the fixed #starfield canvas behind it
     is unaffected and stays put as a backdrop while this scrolls over it. */
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch; /* momentum scroll on iOS */
  overscroll-behavior:contain; /* stop a scroll here from bouncing/refreshing the page behind it */
  scrollbar-width:thin; scrollbar-color:rgba(139,107,255,0.45) transparent; /* Firefox */
}
#app.visible{ opacity:1; pointer-events:auto; }
#app::-webkit-scrollbar{ width:8px; }
#app::-webkit-scrollbar-track{ background:transparent; }
#app::-webkit-scrollbar-thumb{ background:rgba(139,107,255,0.45); border-radius:999px; }
#app::-webkit-scrollbar-thumb:hover{ background:rgba(139,107,255,0.7); }

/* progress */
.hud-progress{
  display:flex; gap:0.85rem; align-items:center; margin-bottom:2.5rem;
}
.hud-progress .step-star{
  width:9px; height:9px; border-radius:50%;
  background:rgba(148,145,184,0.3);
  box-shadow:none; transition:all .4s ease;
}
.hud-progress .step-star.active{
  background:var(--gold); box-shadow:0 0 10px var(--gold);
  transform:scale(1.3);
}
.hud-progress .step-star.done{
  background:var(--teal); box-shadow:0 0 8px var(--teal);
}

.stage{
  width:100%; max-width:1000px; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; position:relative;
}

.step-panel{
  display:none; width:100%; flex-direction:column; align-items:center; text-align:center;
}
.step-panel.active{ display:flex; }

.stage-title{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0 0 0.5rem 0;
}
.stage-sub{ color:var(--muted); max-width:560px; margin:0 0 2.5rem 0; line-height:1.6; }

/* ---------- Porthole cards ---------- */
.porthole-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem; width:100%; max-width:900px;
}
.porthole{
  position:relative; aspect-ratio:1/1; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.08), transparent 55%),
    radial-gradient(circle, var(--panel-2) 0%, var(--panel) 70%, #030308 100%);
  border:6px solid transparent;
  background-clip:padding-box;
  box-shadow:0 0 0 2px rgba(139,107,255,0.25), inset 0 0 40px rgba(0,0,0,0.6);
  transition:transform .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
.porthole::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; padding:6px;
  background:conic-gradient(from 0deg, var(--violet), var(--teal), var(--gold), var(--magenta), var(--violet));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0.55; z-index:-1;
}
.porthole:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 0 30px rgba(139,107,255,0.45); }
.porthole:active{ transform:translateY(-2px) scale(0.99); box-shadow:0 0 24px rgba(139,107,255,0.4); }
.porthole.locked{ cursor:not-allowed; filter:grayscale(0.6) brightness(0.6); }
.porthole.locked:hover{ transform:none; box-shadow:0 0 0 2px rgba(139,107,255,0.25); }
.porthole.locked:active{ transform:none; box-shadow:0 0 0 2px rgba(139,107,255,0.25); }
.porthole{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

.porthole-inner{ padding:1rem; }
.porthole-icon{ font-size:2.4rem; margin-bottom:0.6rem; display:block; }
.porthole-label{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; }
.porthole-tag{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--muted); margin-top:0.3rem; display:block; }

/* iris reveal for the briefing window */
.iris-window{
  position:relative; width:100%; max-width:620px; margin:0 auto;
  background:var(--panel); border-radius:20px; padding:2.5rem;
  border:1px solid rgba(139,107,255,0.3);
  clip-path:circle(0% at 50% 50%);
  transition:clip-path .8s cubic-bezier(.2,.9,.25,1);
}
.iris-window.open{ clip-path:circle(75% at 50% 50%); }
.iris-window h3{ font-family:'Space Grotesk',sans-serif; font-size:1.5rem; margin:0 0 0.75rem 0; }
.iris-window p{ color:var(--muted); line-height:1.7; margin:0 0 1.5rem 0; }

/* buttons */
.btn{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.95rem;
  border:none; border-radius:999px; padding:0.85rem 2rem; cursor:pointer;
  transition:transform .15s ease, filter .15s ease;
  min-height:44px; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.btn:active{ transform:translateY(0) scale(0.97); filter:brightness(1.15); }
.btn-primary{ background:linear-gradient(120deg,var(--gold),var(--violet)); color:var(--bg); }
.btn-ghost{
  background:transparent; color:var(--text); border:1px solid rgba(148,145,184,0.4);
}
.btn-row{ display:flex; gap:1rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }

/* final launch */
.launch-orb{
  width:140px; height:140px; border-radius:50%; margin:0 auto 2rem auto;
  background:radial-gradient(circle at 40% 35%, #fff, var(--gold) 30%, var(--violet) 70%, transparent 100%);
  box-shadow:0 0 60px rgba(139,107,255,0.6);
  animation:orbFloat 4s ease-in-out infinite;
}
@keyframes orbFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

/* ---------- Ambient rocket (idle, randomized path every visit) ---------- */
#rocket-ambient{
  position:fixed; top:0; left:0; z-index:5; width:42px; height:42px;
  pointer-events:none; will-change:transform;
  filter:drop-shadow(0 0 8px rgba(139,107,255,0.85)) drop-shadow(0 0 16px rgba(79,232,255,0.5));
}
#rocket-ambient svg, #rocket-transition svg{ width:100%; height:100%; display:block; }

.rocket-flame{ animation:flameFlicker 0.35s ease-in-out infinite alternate; transform-origin:32px 46px; }
@keyframes flameFlicker{
  0%{ transform:scaleY(1) scaleX(1); opacity:0.9; }
  100%{ transform:scaleY(1.35) scaleX(0.85); opacity:0.6; }
}

/* ---------- Transition rocket (fires on every step/page change) ---------- */
#rocket-transition{
  position:fixed; top:45%; left:-120px; z-index:46; width:52px; height:52px;
  pointer-events:none; opacity:0;
  filter:drop-shadow(0 0 12px rgba(139,107,255,0.9)) drop-shadow(0 0 20px rgba(79,232,255,0.55));
}
#rocket-transition.flying{ animation:rocketTurn 0.95s cubic-bezier(.45,0,.2,1) forwards; }
#rocket-transition::before{
  content:''; position:absolute; top:50%; right:100%; width:150px; height:4px;
  background:linear-gradient(90deg, transparent, rgba(79,232,255,0.75), rgba(139,107,255,0.55));
  transform:translateY(-50%); border-radius:4px; opacity:0.9;
}
@keyframes rocketTurn{
  0%   { left:-120px; top:62%; transform:rotate(102deg) scale(0.75); opacity:0; }
  12%  { opacity:1; }
  50%  { top:32%; transform:rotate(112deg) scale(1.15); }
  88%  { opacity:1; }
  100% { left:112%; top:44%; transform:rotate(108deg) scale(0.85); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .enter-btn, .launch-orb, .splash-title, .splash-sub,
  #rocket-ambient, #rocket-transition, .rocket-flame{ animation:none !important; opacity:1 !important; }
}
@media (max-width:640px){
  #app{ padding:1.5rem 1rem; }
  .hud-progress{ margin-bottom:1.5rem; }
  .porthole-grid{ grid-template-columns:1fr 1fr; gap:1rem; }
  .porthole{ min-height:44px; }
  .btn{ padding:0.85rem 1.6rem; }
  .iris-window{ padding:1.75rem 1.25rem; }
  .stage-sub{ margin-bottom:1.5rem; }
}
/* Narrow phones: two circular portholes side by side get cramped once the
   label is something like "Time, Determinism & Free Will" — one column
   reads far better here, capped so a single porthole doesn't balloon to
   the full screen width. */
@media (max-width:420px){
  .porthole-grid{ grid-template-columns:1fr; max-width:260px; margin:0 auto; gap:0.85rem; }
}
/* Short viewports (landscape phones, small laptop windows) — tighten
   vertical spacing so there's less to scroll through in the first place;
   the overflow-y:auto on #app is still there as the safety net regardless. */
@media (max-height:700px){
  #app{ padding-top:1.1rem; padding-bottom:1.1rem; }
  .hud-progress{ margin-bottom:1.1rem; }
  .stage-sub{ margin-bottom:1.25rem; }
  .porthole-grid{ gap:1.25rem; }
}