:root {
  --bg: #0a0a0b;
  --fg: #f2f2ef;
  --muted: #8b8b90;
  --accent: #cbff4d;
  --font-display: "Clash Display", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --scroll: 700vh; /* total scroll length of the descent */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #0a0a0b; }
button { cursor: pointer; }

/* fixed 3D stage */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(10,10,11,0.5) 100%),
    linear-gradient(180deg, rgba(10,10,11,0.6) 0%, transparent 18%, transparent 62%, rgba(10,10,11,0.85) 100%);
}

/* creates the long scroll */
.scroll-space { height: var(--scroll); width: 1px; pointer-events: none; }

/* ---------- LOADER ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg); display: grid; place-items: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loader.is-hidden { opacity: 0; visibility: hidden; }
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.loader__mono { font-family: var(--font-mono); font-size: 2.2rem; color: var(--accent); }
.loader__label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem clamp(1.25rem, 4vw, 3.5rem);
  mix-blend-mode: difference;
}
.brand { display: flex; align-items: baseline; gap: 0.6rem; color: var(--fg); text-decoration: none; }
.brand__mark { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); letter-spacing: 0.1em; }
.brand__name { font-weight: 600; font-size: 1.1rem; }
.lang {
  background: none; border: none; color: var(--fg);
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em;
  display: flex; gap: 0.35rem; align-items: center;
}
.lang span { opacity: 0.4; transition: opacity 0.3s; }
.lang span.is-active { opacity: 1; color: var(--accent); }
.lang .sep { opacity: 0.3; }

/* ---------- INTRO ---------- */
.intro {
  position: fixed; z-index: 10;
  left: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(2.5rem, 8vh, 5rem);
  max-width: 40ch; pointer-events: none;
  will-change: opacity, transform;
}
.intro__eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1rem;
}
.intro__eyebrow::before {
  content: ""; display: inline-block; width: 36px; height: 1px;
  background: var(--accent); vertical-align: middle; margin-right: 0.8rem;
}
.intro__title { font-weight: 600; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.02em; }

/* ---------- DEPTH MARKERS ---------- */
.depths { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.depth {
  position: absolute; left: clamp(1.25rem, 4vw, 3.5rem); top: 50%;
  transform: translateY(-50%); opacity: 0;
  display: flex; align-items: baseline; gap: 1.2rem;
  will-change: opacity, transform;
}
.depth__k { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); }
.depth__t { font-weight: 500; font-size: clamp(1.8rem, 5vw, 4rem); letter-spacing: -0.02em; }

/* ---------- PROGRESS RAIL ---------- */
.progress { position: fixed; top: 0; right: 0; width: 2px; height: 100vh; background: rgba(255,255,255,0.08); z-index: 15; }
.progress__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--accent); }

/* ---------- SCROLL HINT ---------- */
.scrollhint {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  transition: opacity 0.5s ease;
}
.scrollhint__arr { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- CREDIT ---------- */
.credit {
  position: fixed; right: clamp(1rem, 3vw, 2.5rem); bottom: 1.2rem; z-index: 12;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em;
  color: var(--muted); opacity: 0.6;
}

@media (max-width: 640px) {
  .credit { display: none; }
  .depth__t { font-size: 2rem; }
}