/* ============================================================
   Make It Crazy — the journey (home page only)
   ============================================================ */
html{ scroll-behavior:auto; }
html,body{ height:auto; }
canvas#bg{
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
  z-index:0; display:block;
}
/* the score HUD sits in the shared nav on the home page too */
.nav .score-hud{ margin-left:auto; }
.nav .nav-links{ margin-left:8px; }

.scroll-hint{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:2px; text-transform:uppercase; color:var(--paper);
  opacity:0.7; display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:auto; transition:opacity 0.4s ease;
  position:fixed; left:50%; bottom:36px; transform:translateX(-50%); z-index:50;
}
.scroll-hint .coin{
  font-family:'Press Start 2P', monospace; font-size:11px; color:var(--yellow);
  animation:coin-blink 1s steps(1) infinite;
}
@keyframes coin-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
.scroll-hint .arrow{ animation:bob 1.6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }

/* ===== FLIGHT PATH (radar-style nav) ===== */
.flight-path{
  position:fixed; right:5vw; top:50%; transform:translateY(-50%);
  z-index:50; height:340px; width:1px;
  background:linear-gradient(rgba(228,217,204,0), rgba(228,217,204,0.25), rgba(228,217,204,0));
}
.flight-node{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%;
  border:2px solid rgba(228,217,204,0.45); background:var(--ink);
  cursor:pointer; transition:border-color 0.3s ease, transform 0.3s ease;
}
.flight-node:hover{ transform:translate(-50%,-50%) scale(1.3); border-color:var(--teal); }
.flight-node-label{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(228,217,204,0.7);
  opacity:0; white-space:nowrap; transition:opacity 0.3s ease;
  pointer-events:none;
}
.flight-node:hover .flight-node-label{ opacity:1; }
.flight-ship{
  position:absolute; left:50%; top:0%;
  width:11px; height:11px; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--crazy);
  box-shadow:0 0 12px 3px rgba(255,61,31,0.65);
}
@media (max-width:700px){ .flight-path{ display:none; } }

/* ===== FLIGHT HUD (bottom-left telemetry) ===== */
.hud{
  position:fixed; left:5vw; bottom:32px; z-index:50;
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:1px; padding:14px 16px;
  background:rgba(10,10,15,0.7);
  border:1px solid rgba(228,217,204,0.18); border-radius:2px;
  display:flex; flex-direction:column; gap:6px; min-width:190px;
}
.hud-row{ display:flex; justify-content:space-between; gap:18px; }
.hud-label{ color:rgba(228,217,204,0.45); text-transform:uppercase; }
.hud-value{ color:var(--crazy); font-weight:700; }
@media (max-width:700px){ .hud{ display:none; } }

/* ===== LEVEL-UP TOAST ===== */
.level-toast{
  position:fixed; top:90px; left:50%; transform:translate(-50%,-30px);
  z-index:9997; pointer-events:none;
  font-family:'Press Start 2P', monospace; font-size:11px;
  color:var(--ink); background:var(--yellow);
  padding:14px 22px; border:3px solid var(--ink);
  box-shadow:5px 5px 0 rgba(0,0,0,0.5);
  opacity:0; transition:opacity 0.35s ease, transform 0.35s ease;
  text-align:center; white-space:nowrap;
}
.level-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ===== CUSTOM COMET CURSOR (desktop only) ===== */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  .cursor-core{
    position:fixed; top:0; left:0; z-index:9999;
    pointer-events:none; border-radius:50%;
    transform:translate(-50%,-50%);
    width:6px; height:6px; background:var(--crazy);
  }
}

/* ===== HIDDEN GEM: warp transition + bonus galaxy overlay ===== */
.warp-flash{
  position:fixed; inset:0; z-index:10000; pointer-events:none;
  background:radial-gradient(circle, #fff 0%, var(--teal) 35%, var(--crazy) 70%, transparent 100%);
  opacity:0; transition:opacity 0.35s ease;
}
.warp-flash.flash{ opacity:1; transition:opacity 0.15s ease; }

.bonus-overlay{
  position:fixed; inset:0; z-index:9990;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:8vh;
  opacity:0; pointer-events:none;
  transition:opacity 0.5s ease;
}
.bonus-overlay.show{ opacity:1; pointer-events:auto; }
.bonus-content{
  text-align:center; max-width:600px; padding:28px 32px;
  background:rgba(5,5,10,0.75);
  border:1px solid rgba(228,217,204,0.2); border-radius:4px;
  transition:opacity 0.6s ease;
}
.bonus-content.faded{ opacity:0; pointer-events:none; }
.bonus-eyebrow{
  font-family:'Press Start 2P', monospace; font-size:10px; color:var(--yellow);
  letter-spacing:1px; margin-bottom:14px;
}
.bonus-title{
  font-weight:700; text-transform:uppercase; font-size:clamp(1.6rem,4vw,2.6rem);
  line-height:1; letter-spacing:-1px; color:var(--paper);
}
.bonus-title .wobble{ font-family:'Kalam', cursive; color:var(--teal); display:inline-block; transform:rotate(-2deg); }
.bonus-body{
  margin-top:14px; font-size:14px; line-height:1.6; color:rgba(228,217,204,0.75);
}
.bonus-back{
  margin-top:20px; padding:14px 26px; border:2px solid var(--paper); background:transparent;
  color:var(--paper); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all 0.2s ease;
}
.bonus-back:hover{ background:var(--paper); color:var(--ink); }

.bonus-readout{
  position:fixed; top:100px; left:50%; transform:translateX(-50%);
  z-index:9991; pointer-events:none; text-align:center;
  opacity:0; transition:opacity 0.4s ease;
}
.bonus-readout.show{ opacity:1; }
.bonus-readout-name{
  font-family:'Press Start 2P', monospace; font-size:12px; letter-spacing:1px;
  color:var(--yellow); text-shadow:2px 2px 0 rgba(0,0,0,0.7);
}
.bonus-exit-fixed{
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:9993;
}

.scroll-track{ position:relative; z-index:10; }
section.stage{ min-height:100vh; display:flex; align-items:center; padding:0 6vw; position:relative; }
.panel{ max-width:540px; opacity:0; transform:translateY(50px); transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.panel.visible{ opacity:1; transform:translateY(0); }

.stage-eyebrow{
  font-family:'Press Start 2P', monospace; font-size:10px; font-weight:400;
  letter-spacing:1px; text-transform:uppercase; color:var(--crazy); margin-bottom:18px;
  border-right:2px solid transparent; white-space:nowrap; overflow:hidden;
}
.stage-eyebrow.typing{ border-right-color:var(--crazy); }
.stage-title{
  font-weight:700; text-transform:uppercase;
  font-size:clamp(2.2rem, 5.5vw, 4.2rem);
  line-height:0.98; letter-spacing:-1.5px;
}
.stage-title .wobble{ font-family:'Kalam', cursive; color:var(--crazy); display:inline-block; transform:rotate(-2deg); }
.stage-body{ margin-top:22px; font-size:16px; line-height:1.75; color:rgba(228,217,204,0.72); max-width:460px; }

#stage-0{ justify-content:center; text-align:center; }
#stage-0 .panel{ max-width:800px; margin:0 auto; }
#stage-0 .stage-title{ font-size:clamp(2.8rem, 8vw, 6rem); }

#stage-1{ justify-content:flex-end; }
#stage-1 .panel{ text-align:right; margin-left:auto; }

#stage-2{ justify-content:flex-start; }

#stage-3{ justify-content:flex-start; min-height:220vh; }
.work-list{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.work-item{
  font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:1px;
  text-transform:uppercase; padding:12px 0; border-bottom:1px solid rgba(228,217,204,0.15);
  display:flex; justify-content:space-between; align-items:center;
  opacity:0.35; transition:opacity 0.4s ease, color 0.4s ease, padding-left 0.4s ease;
}
.work-item.active{ opacity:1; color:var(--teal); padding-left:14px; }
.work-item span.n{ font-size:11px; opacity:0.6; }

#stage-4{ justify-content:flex-end; }
#stage-4 .panel{ text-align:right; margin-left:auto; }

.join-form{ display:flex; flex-direction:column; gap:12px; max-width:420px; margin:30px auto 0; }
.join-form input, .join-form textarea{
  background:transparent; border:2px solid var(--paper); padding:14px 16px;
  color:var(--paper); font-family:'JetBrains Mono', monospace; font-size:13px;
  width:100%; resize:vertical;
}
.join-form textarea{ min-height:90px; font-family:'JetBrains Mono', monospace; }
.join-form input::placeholder, .join-form textarea::placeholder{ color:rgba(228,217,204,0.5); }
.join-form input:focus, .join-form textarea:focus{ outline:2px solid var(--teal); outline-offset:-2px; }
.join-form button{
  background:linear-gradient(135deg, var(--crazy), #ff7a1f);
  border:none; padding:16px 24px;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12px;
  letter-spacing:1px; text-transform:uppercase; color:var(--ink); cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
  animation:cta-pulse 2.6s ease-in-out infinite;
}
.join-form button:hover{ background:var(--teal); color:var(--ink); transform:scale(1.04); animation-play-state:paused; }
.join-form button:disabled{ opacity:.7; cursor:progress; animation:none; transform:none; }
.join-form .hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.join-status{ margin:2px 0 0; min-height:1.4em; font-family:'JetBrains Mono', monospace; font-size:12px; line-height:1.5; text-align:left; color:rgba(228,217,204,0.7); }
.join-status.ok{ color:var(--teal); }
.join-status.err{ color:#ff8a70; }
.join-fallback{ font-family:'JetBrains Mono', monospace; font-size:12px; text-align:left; color:var(--yellow); text-decoration:underline; text-underline-offset:3px; }
.join-fallback[hidden]{ display:none; }
.join-note{ max-width:420px; margin:14px auto 0; font-family:'JetBrains Mono', monospace; font-size:11px; line-height:1.6; color:rgba(228,217,204,0.6); }
.join-note a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
@keyframes cta-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,61,31,0.5); }
  50%{ box-shadow:0 0 24px 6px rgba(255,61,31,0.4); }
}
.live-indicator{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:16px; font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:1px; text-transform:uppercase; color:rgba(228,217,204,0.6);
}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 8px 2px rgba(45,232,201,0.7);
  animation:live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.4; transform:scale(0.7); } }

.planet-readout{
  position:fixed; left:50%; bottom:110px; transform:translate(-50%,10px);
  z-index:50; text-align:center; pointer-events:none;
  opacity:0; transition:opacity 0.4s ease, transform 0.4s ease;
}
.planet-readout.show{ opacity:1; transform:translate(-50%,0); }
.planet-readout-name{
  font-family:'Press Start 2P', monospace; font-size:14px; color:var(--paper);
  text-shadow:2px 2px 0 rgba(0,0,0,0.7);
}
.planet-readout-fact{
  margin-top:8px; font-family:'JetBrains Mono', monospace; font-size:11px;
  color:rgba(228,217,204,0.7); letter-spacing:0.5px;
}
@media (max-width:700px){ .planet-readout{ display:none; } }


/* ===== NEW: nav + comet cursor feedback ===== */
.flight-node:focus-visible{ outline:2px solid var(--teal); outline-offset:4px; }
@media (hover:hover) and (pointer:fine){
  .cursor-core{ transition:width 0.15s ease, height 0.15s ease, background 0.15s ease; }
  .cursor-core.hot{ width:18px; height:18px; background:var(--teal); box-shadow:0 0 14px 4px rgba(45,232,201,0.6); }
}

/* ===== NEW: what this place is, said plainly on the first screen ===== */
.intro-who{ margin-top:18px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--soft); }

/* ===== NEW: LEVEL 05 — the launch bay ===== */
#stage-5{ justify-content:flex-start; }
#stage-5 .panel{ max-width:520px; }
.bay-cards{ margin-top:26px; display:grid; gap:12px; max-width:470px; }
.bay-card{
  position:relative; display:block; padding:16px 18px 16px 84px;
  border:1px solid var(--line); background:rgba(5,5,10,0.86);
  transition:border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.bay-card::before{ content:""; position:absolute; left:-1px; top:-1px; width:14px; height:14px; border-left:3px solid var(--c); border-top:3px solid var(--c); }
.bay-card:hover, .bay-card:focus-visible{ border-color:var(--c); transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(0,0,0,0.6); }
.bay-card.sonda{ --c:var(--blue); }
.bay-card.orbit{ --c:var(--crazy); }
.bay-card.canis{ --c:#C6E265; }
.bay-card .emblem{ position:absolute; left:16px; top:16px; width:52px; height:52px; border-radius:12px; }
.bay-card .k{ display:block; font-family:'Press Start 2P', monospace; font-size:8px; letter-spacing:1px; color:var(--c); margin-bottom:8px; line-height:1.5; }
.bay-card h3{ font-size:1.15rem; text-transform:uppercase; letter-spacing:0.3px; line-height:1.2; }
.bay-card p{ margin-top:5px; font-size:0.9rem; line-height:1.5; color:var(--muted); }
.bay-card .go{ position:absolute; right:16px; top:16px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px; color:var(--c); }
.bay-note{ margin-top:14px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px; color:var(--soft); text-transform:uppercase; }

.bay-tag{
  position:fixed; left:0; top:0; z-index:55; pointer-events:none;
  font-family:'Press Start 2P', monospace; font-size:10px; letter-spacing:1px; line-height:1;
  padding:9px 11px; border:2px solid var(--c); color:var(--c); background:rgba(5,5,10,0.78);
  text-shadow:2px 2px 0 rgba(0,0,0,0.6); white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity 0.3s ease, background 0.15s, color 0.15s;
}
.bay-tag.on{ opacity:1; visibility:visible; }
.bay-tag.hot{ background:var(--c); color:var(--ink); text-shadow:none; }
.bay-tag.sonda{ --c:var(--blue); }
.bay-tag.orbit{ --c:var(--crazy); }
.bay-tag.canis{ --c:#C6E265; }
@media (max-width:760px){
  #stage-5{ align-items:flex-end; padding-bottom:5vh; }
  #stage-5 .stage-body{ display:none; }
  #stage-5 .stage-title{ font-size:clamp(1.8rem, 9vw, 2.6rem); }
  .bay-card{ padding:12px 14px 12px 76px; }
  .bay-card .emblem{ left:12px; top:12px; width:48px; height:48px; }
  .bay-card p{ display:none; }
  .bay-card .go{ display:none; }
  .bay-card .k{ font-size:7px; }
  .bay-note{ display:none; }
  .bay-tag{ font-size:8px; padding:7px 8px; }
}

/* ===== NEW: final stage ===== */
#stage-6{ justify-content:center; text-align:center; }
#stage-6 .panel{ max-width:520px; margin:0 auto; }
.final-links{ margin-top:22px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--soft); }
.final-links a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.final-links a:hover{ color:var(--teal); }

/* ===== NEW: no WebGL, no JavaScript, or reduced motion: the page is still a page ===== */
.no-webgl body{ background:radial-gradient(ellipse at 50% 0%, #140a14 0%, var(--ink) 55%); }
.no-webgl canvas#bg, .no-webgl .scroll-hint, .no-webgl .hud, .no-webgl .flight-path, .no-webgl .planet-readout, .no-webgl .bay-tag{ display:none !important; }
.no-webgl .panel{ opacity:1; transform:none; }
.no-webgl section.stage{ min-height:0; padding-top:12vh; padding-bottom:12vh; }
.no-webgl #stage-3{ min-height:0; }
@media (prefers-reduced-motion: reduce){
  .panel{ transition:none; }
  .scroll-hint .coin, .scroll-hint .arrow, .join-form button, .live-dot{ animation:none; }
}

/* without JavaScript the journey is simply a column of panels */
html:not(.js) .panel{ opacity:1; transform:none; }
html:not(.js) canvas#bg, html:not(.js) .scroll-hint, html:not(.js) .hud, html:not(.js) .flight-path, html:not(.js) .planet-readout, html:not(.js) .bay-tag{ display:none; }
html:not(.js) section.stage{ min-height:0; padding-top:12vh; padding-bottom:12vh; }
html:not(.js) #stage-3{ min-height:0; }

/* tuck the HUD and level dots away while the footer is on screen */
.hud, .flight-path{ transition:opacity 0.3s ease; }
html.at-footer .hud, html.at-footer .flight-path{ opacity:0; pointer-events:none; }

/* keep the nav links readable when level text scrolls underneath them */
body.home .nav{ background:linear-gradient(180deg, rgba(5,5,10,0.6) 0%, rgba(5,5,10,0.3) 60%, rgba(5,5,10,0) 100%); padding-bottom:26px; }