@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(/assets/fonts/SpaceGrotesk-700.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url(/assets/fonts/SpaceGrotesk-500.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/assets/fonts/JetBrainsMono-400.woff2) format('woff2'); }

:root { --green: #00d68f; --cream: #ece4d3; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #08090b;
  overflow: hidden;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  user-select: none;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 2.4s ease; }
#scene.on { opacity: 1; }

.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 18%, transparent 78%, rgba(0,0,0,.45));
}
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 3; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); }
  40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-2%); } 80% { transform: translate(3%,3%); }
}

.copy {
  position: fixed; left: 50%; bottom: clamp(48px, 9vh, 110px); transform: translateX(-50%);
  text-align: center; z-index: 4; pointer-events: none;
}
/* typed lines: an invisible sizer reserves the final width/height so
   nothing shifts while characters land; the typed text overlays it */
.copy h1, .copy .soon { display: grid; justify-content: center; }
.copy .sizer { grid-area: 1 / 1; visibility: hidden; white-space: pre; }
.copy .typed { grid-area: 1 / 1; text-align: left; white-space: pre; justify-self: start; }
.copy h1 {
  color: var(--cream);
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  text-shadow: 0 0 60px rgba(0,214,143,.15);
}
.copy .by {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .5em; text-indent: .5em;
  color: rgba(236,228,211,.45);
  opacity: 0;
}
.copy .by.in { animation: blurIn .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes blurIn {
  from { opacity: 0; filter: blur(10px); transform: translateY(6px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
.copy .soon {
  margin-top: 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .3em; text-indent: .3em;
  color: var(--green);
  position: relative;
}
.cursor { animation: blink 1.1s steps(1) infinite; font-size: 10px; }
@keyframes blink { 50% { opacity: 0; } }

.hint {
  position: fixed; top: 26px; left: 50%; transform: translateX(-50%);
  z-index: 4; pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .4em; text-indent: .4em;
  color: rgba(236,228,211,.22);
  opacity: 0; animation: fadein 2s ease 3s forwards;
}
@keyframes fadein { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .grain, .cursor { animation: none; }
}