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

:root{
  --bg:#03050a;
  --text:#edf3ff;
  --muted:#7d899d;
  --line:rgba(164,190,230,.18);
  --cyan:#69eaff;
  --violet:#a68cff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
button{font:inherit}

.intro{
  position:fixed;
  inset:0;
  z-index:20;
  background:#020307;
  overflow:hidden;
  transition:opacity 1.2s ease,visibility 1.2s ease;
}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}

#particles{position:absolute;inset:0;width:100%;height:100%}
.scanlines{
  position:absolute;inset:0;opacity:.08;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px,transparent 5px);
  mix-blend-mode:overlay;
}
.vignette{
  position:absolute;inset:-10%;
  background:radial-gradient(circle at center,transparent 20%,rgba(0,0,0,.25) 52%,#000 100%);
  pointer-events:none;
}
.flash{
  position:absolute;inset:0;background:white;opacity:0;pointer-events:none;
}
.flash.fire{animation:flash .55s ease-out}

.hud{
  position:absolute;
  z-index:4;
  left:32px;right:32px;
  display:flex;justify-content:space-between;
  color:#607089;
  font:10px "Space Mono",monospace;
  letter-spacing:.22em;
}
.hud-top{top:26px}.hud-bottom{bottom:26px}
#status{color:#8ea6c6}

.intro-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:3;
  text-align:center;
  pointer-events:none;
}
.micro{
  position:absolute;
  top:18%;
  font:10px "Space Mono",monospace;
  letter-spacing:.42em;
  color:#728098;
  opacity:0;
  animation:fadeUp 1s 1.2s forwards;
}
.sigil{
  display:flex;align-items:center;gap:15px;
  color:var(--cyan);
  opacity:0;
  animation:sigilIn 1.2s .6s forwards;
}
.sigil span{height:1px;width:65px;background:linear-gradient(90deg,transparent,var(--cyan))}
.sigil span:last-child{background:linear-gradient(90deg,var(--cyan),transparent)}
.sigil i{font-style:normal;font-size:16px;text-shadow:0 0 18px var(--cyan)}

.question{
  margin-top:24px;
  display:flex;flex-direction:column;
  font-size:clamp(14px,1.5vw,20px);
  font-weight:300;
  letter-spacing:.48em;
  line-height:1.7;
  color:#c0c9d8;
  opacity:0;
  animation:fadeUp 1s 1.1s forwards;
}
.year{
  position:absolute;
  top:31%;
  font:12px "Space Mono",monospace;
  color:var(--cyan);
  letter-spacing:.3em;
  text-shadow:0 0 20px rgba(105,234,255,.8);
}
.surname-wrap{
  position:relative;
  margin-top:28px;
  opacity:0;
  transform:scale(.82);
  animation:nameReveal 2s 2.1s cubic-bezier(.16,1,.3,1) forwards;
}
.surname-shadow{
  position:absolute;inset:0;
  font-size:clamp(64px,13vw,190px);
  font-weight:800;
  letter-spacing:-.08em;
  color:transparent;
  -webkit-text-stroke:1px rgba(105,234,255,.22);
  filter:blur(10px);
  transform:scale(1.04);
}
#surname{
  position:relative;
  margin:0;
  font-size:clamp(64px,13vw,190px);
  font-weight:800;
  letter-spacing:-.08em;
  line-height:.8;
  color:#eaf6ff;
  text-shadow:0 0 8px rgba(255,255,255,.25),0 0 45px rgba(105,234,255,.35);
}
.origin{
  margin-top:38px;
  display:flex;gap:12px;
  font:10px "Space Mono",monospace;
  letter-spacing:.25em;
  color:#77859c;
  opacity:0;
  animation:fadeUp 1s 3.2s forwards;
}
.origin span:last-child{color:#b7c4d8}
#enter{
  pointer-events:auto;
  margin-top:48px;
  padding:13px 22px;
  border:1px solid rgba(105,234,255,.35);
  background:rgba(3,8,14,.45);
  color:#dcefff;
  cursor:pointer;
  font:11px "Space Mono",monospace;
  letter-spacing:.22em;
  opacity:0;
  animation:fadeUp 1s 3.7s forwards;
  transition:.3s;
}
#enter:hover{
  background:rgba(105,234,255,.1);
  border-color:var(--cyan);
  box-shadow:0 0 30px rgba(105,234,255,.15);
  transform:translateY(-2px);
}
#enter b{color:var(--cyan);margin-left:10px}

main{background:var(--bg)}
.hero,.timeline,.game,.final{
  min-height:100vh;
  position:relative;
  padding:100px max(7vw,32px);
}
.hero{display:flex;align-items:center;overflow:hidden}
.hero-noise{
  position:absolute;inset:0;opacity:.18;
  background-image:radial-gradient(circle at 30% 40%,rgba(105,234,255,.12),transparent 25%),radial-gradient(circle at 80% 65%,rgba(166,140,255,.09),transparent 25%);
}
.hero-inner{position:relative;z-index:1}
.eyebrow,.section-label,.date,.final-code{
  font:10px "Space Mono",monospace;
  letter-spacing:.3em;
  color:#66748b;
}
.hero h2{
  font-size:clamp(48px,9vw,130px);
  line-height:.88;
  letter-spacing:-.07em;
  margin:28px 0;
}
.hero h2 em{font-style:normal;color:var(--cyan);text-shadow:0 0 35px rgba(105,234,255,.18)}
.hero p{color:#8290a5;font-size:16px;line-height:1.8}
.scroll{margin-top:90px;font:10px "Space Mono",monospace;color:#647187;letter-spacing:.25em}
.scroll span{color:var(--cyan);margin-left:15px}

.timeline{padding-top:140px}
.timeline .line{
  position:absolute;left:50%;top:230px;bottom:0;width:1px;background:linear-gradient(#69eaff,rgba(105,234,255,0));
  opacity:.25;
}
.timeline article{width:min(520px,43%);margin:180px 0}
.timeline article:nth-of-type(2){margin-left:auto}
.timeline article:nth-of-type(3){margin-top:250px}
.timeline h3{font-size:clamp(28px,4vw,60px);letter-spacing:-.05em;margin:15px 0}
.timeline p{color:#7d899d;line-height:1.8;max-width:480px}

.game{display:flex;flex-direction:column;justify-content:center;align-items:center}
.game-card{
  width:min(760px,100%);
  margin-top:40px;
  padding:70px 30px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(105,234,255,.035),rgba(166,140,255,.025));
  text-align:center;
  box-shadow:0 0 100px rgba(0,0,0,.35);
}
.fragment{font:11px "Space Mono",monospace;color:#6f7d92;letter-spacing:.25em}
.letters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:45px 0}
.letter{
  width:50px;height:62px;
  display:grid;place-items:center;
  border:1px solid #28384b;
  color:#a9b7ca;
  cursor:pointer;
  font-size:20px;
  transition:.25s;
}
.letter:hover,.letter.selected{
  color:var(--cyan);
  border-color:var(--cyan);
  box-shadow:0 0 25px rgba(105,234,255,.14);
  transform:translateY(-4px);
}
#game-message{min-height:20px;color:#77869d;font-size:13px}
#resetGame{
  margin-top:25px;background:none;border:0;color:#55647a;
  font:10px "Space Mono",monospace;letter-spacing:.2em;cursor:pointer
}

.final{
  min-height:90vh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.final-orbit{
  position:absolute;width:70vw;height:70vw;max-width:800px;max-height:800px;
  border:1px solid rgba(105,234,255,.08);border-radius:50%;
  right:-20%;top:10%;
  box-shadow:inset 0 0 80px rgba(105,234,255,.025);
}
.final h2{font-size:clamp(45px,8vw,110px);line-height:.9;letter-spacing:-.07em;margin:30px 0}
.final h2 span{color:#66748b}
.final p{color:#77869d}
.final-code{margin-top:80px;color:#b8c8dd}
.final-code span{color:var(--cyan);animation:blink 1s infinite}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(15px)}}
@keyframes sigilIn{from{opacity:0;transform:scale(.5);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:none}}
@keyframes nameReveal{
  0%{opacity:0;transform:scale(.82);filter:blur(30px)}
  55%{opacity:1;transform:scale(1.03);filter:blur(0)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes flash{0%{opacity:0}20%{opacity:.45}100%{opacity:0}}
@keyframes blink{50%{opacity:0}}

@media(max-width:700px){
  .hud{left:16px;right:16px;font-size:8px}
  .micro{letter-spacing:.2em;text-align:center}
  .question{letter-spacing:.25em}
  .origin{flex-direction:column;gap:4px}
  .timeline .line{left:20px}
  .timeline article,.timeline article:nth-of-type(2),.timeline article:nth-of-type(3){width:calc(100% - 30px);margin:140px 0 0 30px}
  .game-card{padding:55px 18px}
  .letter{width:43px;height:55px}
}