:root{
  --void:#000308; --surface:#0a0d14; --cyan:#00ffef; --magenta:#ff0080;
  --green:#00ff88; --blue:#4d9fff; --text:#fff;
  --glass:rgba(10,13,20,.65); --glass-border:rgba(255,255,255,.08);
  --mono:'JetBrains Mono','Space Mono',ui-monospace,monospace;
  --jp:'Noto Sans JP',sans-serif; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--text);font-family:var(--sans);overflow-x:hidden}
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
body::after{ /* CRT scanlines over everything */
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.35) 2px 3px);
}
#content{position:relative;z-index:2}
.panel{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  gap:1rem;padding:12vh 8vw;max-width:920px}
/* Task 6: GSAP ScrollTrigger fades each panel in (fromTo opacity/y). Hint the
   compositor so the per-scroll transform stays smooth, and keep panels out of
   the way of pointer events while transparent at the very start. */
.panel{will-change:opacity,transform}
.kicker{font-family:var(--mono);letter-spacing:.5em;font-size:.7rem;color:var(--cyan);opacity:.7;text-transform:uppercase}
.title{font-weight:900;font-size:clamp(2.5rem,9vw,7rem);letter-spacing:.06em;line-height:.95}
.subtitle{font-weight:800;font-size:clamp(1.5rem,5vw,3rem);letter-spacing:.15em}
.cyan{color:var(--cyan)}
.jp{font-family:var(--jp);color:var(--cyan);letter-spacing:.3em;opacity:.85}
.tagline{font-family:var(--mono);font-size:clamp(1rem,2.4vw,1.4rem);opacity:.9;margin-top:.5rem}
.badge{font-family:var(--mono);align-self:flex-start;border:1px solid var(--cyan);
  color:var(--cyan);padding:.5rem 1rem;letter-spacing:.2em;box-shadow:0 0 18px rgba(0,255,239,.25)}
.counter{font-family:var(--mono);opacity:.7;font-size:.9rem}
.cta{font-family:var(--mono);align-self:flex-start;margin-top:1rem;padding:.85rem 1.6rem;
  text-decoration:none;color:var(--void);background:var(--cyan);font-weight:700;letter-spacing:.15em;
  box-shadow:0 0 24px rgba(0,255,239,.45);transition:transform .15s, box-shadow .15s}
.cta:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(0,255,239,.7)}
.hud-row{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7;display:flex;gap:.6rem;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.ok{background:var(--green);box-shadow:0 0 8px var(--green)}
.muted{opacity:.5}
.h3{font-weight:800;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.04em}
.body{font-size:1.1rem;line-height:1.6;opacity:.85;max-width:46ch}
.tier-cards{display:flex;gap:1.2rem;flex-wrap:wrap}
.tier-card{background:var(--glass);backdrop-filter:blur(24px);border:1px solid var(--glass-border);
  border-radius:16px;padding:2rem;min-width:160px;display:flex;flex-direction:column;gap:.4rem;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.tier-card .rank{font-family:var(--mono);font-size:.8rem;opacity:.5}
.tier-card .amt{font-weight:800;font-size:1.6rem}
.tier-card .val{font-family:var(--mono);font-size:1.25rem;letter-spacing:.08em;color:var(--cyan);text-shadow:0 0 14px rgba(0,255,239,.4)}
.tier-card.c2 .val{color:var(--magenta);text-shadow:0 0 14px rgba(255,0,128,.4)}
.tier-card.c3 .val{color:var(--blue);text-shadow:0 0 14px rgba(77,159,255,.4)}
.tier-card.c1{border-color:rgba(0,255,239,.5);box-shadow:0 0 30px rgba(0,255,239,.18)}
.tier-card.c2{border-color:rgba(255,0,128,.5);box-shadow:0 0 30px rgba(255,0,128,.18)}
.tier-card.c3{border-color:rgba(77,159,255,.5);box-shadow:0 0 30px rgba(77,159,255,.18)}
.ladder{list-style:none;display:flex;flex-direction:column;gap:.8rem;font-family:var(--mono)}
.ladder li{padding-left:1.4rem;position:relative}
.ladder li::before{content:"◆";position:absolute;left:0;color:var(--cyan)}
.video-frame{aspect-ratio:16/9;width:100%;max-width:760px;border:1px solid var(--glass-border);
  background:var(--glass);border-radius:12px;box-shadow:0 0 40px rgba(0,255,239,.12);overflow:hidden}
.video-frame video{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.links a{color:var(--cyan);text-decoration:none}
.mono{font-family:var(--mono);letter-spacing:.3em}
/* Glitch wordmark (cyan/magenta chromatic aberration) */
.glitch{position:relative;text-shadow:0 0 24px rgba(0,255,239,.45)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0}
.glitch::before{color:var(--magenta);transform:translate(2px,0);mix-blend-mode:screen;clip-path:inset(0 0 55% 0)}
.glitch::after{color:var(--cyan);transform:translate(-2px,0);mix-blend-mode:screen;clip-path:inset(55% 0 0 0)}
@media (prefers-reduced-motion: reduce){.glitch::before,.glitch::after{display:none}}
/* Boot sequence overlay */
#boot{position:fixed;inset:0;z-index:50;background:var(--void);display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease;overflow:hidden}
#boot[aria-hidden="true"]{opacity:0;pointer-events:none}
#boot-rain{position:absolute;inset:0;opacity:.22}
.boot-corner{position:absolute;width:36px;height:36px;border:1px solid var(--cyan)}
.boot-corner.tl{top:24px;left:24px;border-right:0;border-bottom:0}
.boot-corner.tr{top:24px;right:24px;border-left:0;border-bottom:0}
.boot-corner.bl{bottom:24px;left:24px;border-right:0;border-top:0}
.boot-corner.br{bottom:24px;right:24px;border-left:0;border-top:0}
.boot-core{position:relative;text-align:center;display:flex;flex-direction:column;gap:.8rem;align-items:center;padding:2rem}
.boot-kicker{font-family:var(--mono);letter-spacing:.5em;font-size:.65rem;color:var(--cyan);opacity:.6}
.boot-word{font-weight:800;font-size:clamp(1.2rem,4vw,2.4rem);letter-spacing:.25em}
.boot-jp{font-family:var(--jp);color:var(--cyan);letter-spacing:.3em;opacity:.7;font-size:.8rem}
.boot-phase{font-family:var(--mono);color:var(--cyan);text-transform:uppercase;letter-spacing:.2em;font-size:.8rem}
.boot-phase .caret{color:var(--green)}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.boot-bar{width:min(420px,70vw);height:3px;background:rgba(0,255,239,.08);border:1px solid rgba(0,255,239,.3);position:relative}
#boot-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue));box-shadow:0 0 10px var(--cyan),0 0 24px rgba(0,255,239,.4);transition:width .25s}
.boot-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;opacity:.7}
.boot-ladder{list-style:none;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;margin-top:.6rem}
.boot-ladder li{opacity:.25;color:var(--cyan)}
.boot-ladder li::before{content:"○ "}
.boot-ladder li.active{opacity:1;animation:blink 1s steps(1) infinite}
.boot-ladder li.active::before{content:"◆ "}
.boot-ladder li.done{opacity:.9;color:var(--green)}
.boot-ladder li.done::before{content:"● "}
@media (prefers-reduced-motion: reduce){#boot-rain{display:none}.blink,.boot-ladder li.active{animation:none}}
/* Accessibility: motion-sensitive visitors get instant scroll (no smooth-scroll
   easing on the CTA anchor) and no decorative CSS transitions/animations. The
   scroll-driven camera dolly is scrub-tied to scroll position (not autoplay) and
   stays; JS also skips the per-section fade-in under reduced-motion (scroll.js). */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* Signup form (Task 10) */
#signup-form{display:flex;flex-direction:column;gap:.9rem;max-width:560px;font-family:var(--mono)}
#signup-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
#signup-form .req{color:var(--magenta)}
#signup-form input,#signup-form textarea{background:rgba(0,255,239,.04);border:1px solid rgba(0,255,239,.25);
  color:#fff;padding:.7rem .8rem;border-radius:8px;font-family:var(--mono);font-size:.95rem;outline:none;transition:border-color .15s,box-shadow .15s}
#signup-form input:focus,#signup-form textarea:focus{border-color:var(--cyan);box-shadow:0 0 16px rgba(0,255,239,.25)}
#signup-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
#signup-form button[type=submit]{margin-top:.5rem;background:var(--cyan);color:var(--void);border:0;padding:.9rem;
  font-weight:700;letter-spacing:.2em;cursor:pointer;border-radius:8px;box-shadow:0 0 24px rgba(0,255,239,.4)}
#signup-form button[type=submit]:disabled{opacity:.5;cursor:wait}
.team{border:1px solid var(--glass-border);border-radius:10px;padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.team legend{padding:0 .4rem;opacity:.7;font-size:.7rem;letter-spacing:.2em}
.team-row{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem}
.ghost{background:transparent;border:1px dashed rgba(0,255,239,.4);color:var(--cyan);padding:.5rem;border-radius:8px;cursor:pointer;font-family:var(--mono)}
.form-msg{font-size:.85rem;min-height:1.2em}
.form-msg.err{color:var(--magenta)}
.confirm{color:var(--green);font-weight:700;letter-spacing:.15em;text-shadow:0 0 12px rgba(0,255,136,.5)}
@media (max-width:680px){#signup-form .grid2,.team-row{grid-template-columns:1fr}}