@font-face {
  font-family: "Inter var";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono var";
  src: url("/fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #02060c;
  --ink: #eaf2f7;
  --dim: #8fa3b3;
  --faint: #4f6475;
  --line: rgba(234, 242, 247, 0.1);
  --sea: #63d8ff;
  --sea-dim: rgba(99, 216, 255, 0.55);
  --bio: #66ffd9;
  --mono: "JetBrains Mono var", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#water {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

/* ---- top bar ---- */
#bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1rem clamp(1.2rem, 4vw, 2.6rem);
  background: linear-gradient(rgba(2, 6, 12, 0.6), transparent);
}
.brand { font-weight: 850; letter-spacing: 0.32em; font-size: 0.95rem; }
.bar-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
#btn-audio {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea);
  background: rgba(2, 6, 12, 0.55);
  border: 1px solid rgba(99, 216, 255, 0.3);
  border-radius: 4px;
  padding: 0.55em 0.9em;
  cursor: pointer;
}
#btn-audio.active { background: rgba(99, 216, 255, 0.16); }

/* ---- HUD instrument cluster ---- */
#hud {
  position: fixed;
  left: clamp(1rem, 3vw, 2.4rem);
  bottom: 3vh;
  z-index: 5;
  font-family: var(--mono);
  background: rgba(2, 6, 12, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(99, 216, 255, 0.14);
  border-radius: 12px;
  padding: 0.9rem 1.1rem 1rem;
}
.hud-depth {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.hud-depth b {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-shadow: 0 0 26px rgba(99, 216, 255, 0.35);
}
.hud-depth span {
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sea-dim);
}
.hud-rows { display: grid; gap: 0.22rem; margin-top: 0.6rem; }
.hud-rows div { display: flex; gap: 0.9em; font-size: 0.62rem; letter-spacing: 0.14em; }
.hud-rows span { color: var(--faint); width: 6.5em; text-transform: uppercase; }
.hud-rows b { color: var(--sea); font-weight: 500; }
.hud-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.hud-actions button {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #03202b;
  background: var(--sea);
  border: none;
  border-radius: 4px;
  padding: 0.65em 1.3em;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.hud-actions button:hover { box-shadow: 0 0 22px rgba(99, 216, 255, 0.5); }
#btn-surface { background: transparent; color: var(--sea); border: 1px solid rgba(99, 216, 255, 0.4); }
#btn-dive.active { background: #ff8b6b; color: #2b0d03; }

/* ---- zone rail minimap ---- */
#rail {
  position: fixed;
  right: clamp(0.9rem, 2.4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  height: 58vh;
}
.rail-track {
  position: relative;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rz { display: block; width: 100%; cursor: pointer; }
.rz-sun { background: #6fc3e8; }
.rz-twi { background: #23648f; }
.rz-mid { background: #123049; }
.rz-aby { background: #0a1c2e; }
.rz-had { background: #050e18; }
.rz:hover { filter: brightness(1.8); }
#rail-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink);
  box-shadow: 0 0 14px rgba(99, 216, 255, 0.8);
  pointer-events: none;
}

/* ---- the ocean column ---- */
#ocean { position: relative; z-index: 1; }

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 16vh;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(3, 30, 44, 0.75);
  margin-bottom: 1.4rem;
}
h1 {
  font-size: clamp(4.5rem, 18vw, 14.5rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.92;
  color: #06283a;
  user-select: none;
}
.hero .tag {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(6, 40, 58, 0.85);
  font-weight: 550;
}
.cue {
  position: absolute;
  bottom: 26vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(6, 40, 58, 0.7);
}
.cue i {
  width: 1px;
  height: 40px;
  background: linear-gradient(rgba(6, 40, 58, 0.8), transparent);
  animation: cue-drop 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue-drop { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cue i { animation: none; } }

/* ---- milestone cards ---- */
.m-card {
  position: absolute;
  left: clamp(1.2rem, 8vw, 10rem);
  width: min(400px, 84vw);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(3, 8, 15, 0.6);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  padding: 1.5rem 1.5rem 1.4rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.m-card.right { left: auto; right: clamp(1.2rem, 10vw, 12rem); }
.m-card.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .m-card { opacity: 1; transform: none; transition: none; } }
.m-card .md {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sea-dim);
  margin-bottom: 0.5rem;
}
.m-card h3 { font-size: 1.2rem; font-weight: 780; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.m-card p { font-size: 0.9rem; color: var(--dim); }
.lamp-card { border-color: rgba(102, 255, 217, 0.3); }
.lamp-card .md { color: var(--bio); }

.whisper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 84vw);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- creatures ---- */
.creature {
  position: absolute;
  color: #010409;
  opacity: 0.9;
  pointer-events: none;
}
.creature svg {
  display: block;
  width: 100%;
  filter: blur(1.1px);
  animation: swim 9s ease-in-out infinite alternate;
}
@keyframes swim {
  from { transform: translateX(-2.5%) rotate(-1.2deg); }
  to { transform: translateX(2.5%) rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce) { .creature svg { animation: none; } }
.clabel {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0.8;
}
.deepglow .lure {
  fill: var(--bio);
  filter: drop-shadow(0 0 6px var(--bio));
}

/* ---- the bottom ---- */
.bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 88vw);
  text-align: center;
}
.sec-tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sea-dim);
  margin-bottom: 1rem;
}
.bottom h2 {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 880;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
.bottom .lede { color: var(--dim); font-size: clamp(0.98rem, 1.9vw, 1.15rem); margin-bottom: 2.4rem; }
.bottom-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }
#btn-ascend {
  font-family: var(--sans);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 760;
  color: #03202b;
  background: linear-gradient(140deg, #b4ecff, var(--sea) 55%, #2fa8d8);
  border: none;
  border-radius: 999px;
  padding: 1em 2.4em;
  cursor: pointer;
  box-shadow: 0 0 40px rgba(99, 216, 255, 0.3);
  transition: box-shadow 0.25s ease;
  will-change: transform;
}
#btn-ascend:hover { box-shadow: 0 0 70px rgba(99, 216, 255, 0.5); }
.ghost {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sea);
  text-decoration: none;
  border: 1px solid rgba(99, 216, 255, 0.35);
  border-radius: 999px;
  padding: 1em 1.6em;
}
#ascend-note {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  min-height: 2em;
}

/* ---- footer ---- */
footer {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  text-align: center;
  padding: 0 6vw 4vh;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  display: grid;
  gap: 0.4rem;
}
footer strong { color: var(--dim); letter-spacing: 0.22em; }
footer a { color: var(--sea); text-decoration: none; }

::selection { background: rgba(99, 216, 255, 0.3); color: var(--ink); }

@media (max-width: 760px) {
  #rail { display: none; }
  .bar-sub { display: none; }
  .hud-rows div:nth-child(2), .hud-rows div:nth-child(3) { display: none; }
  .m-card, .m-card.right { left: 50%; right: auto; transform: translateX(-50%) translateY(30px); }
  .m-card.in { transform: translateX(-50%); }
}