:root {
  --ink: #030604;
  --moss: #0d2418;
  --leaf: #2f7d57;
  --mint: #8fe3b8;
  --mint-dim: rgba(170, 225, 196, 0.55);
  --paper: #f3ead6;
  --gold: #ffc23d;
  --gold-glow: rgba(255, 194, 61, 0.35);
  --coltan: #4db8ff;
  --diamond: #f4f7ff;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Big Shoulders Display", Georgia, serif;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

body { cursor: none; }
body.entry-mode { cursor: default; }

canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#overlay { pointer-events: none; }

/* film grain */
#grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

.screen { position: fixed; inset: 0; pointer-events: none; }

/* ---------- entry ---------- */
#entry { transition: opacity 1.2s ease; }
#entry.gone { opacity: 0; }


#enter {
  pointer-events: auto;
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: none; border: 0; color: var(--paper);
  font-family: var(--mono); cursor: pointer;
}
#enter:disabled { cursor: progress; }
#enter .cta {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 12px 22px 12px 25px;
  border: 1px solid rgba(143, 227, 184, 0.35);
  transition: border-color 0.4s, box-shadow 0.4s, color 0.4s;
}
#enter:not(:disabled):hover .cta,
#enter:not(:disabled):focus-visible .cta {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 24px var(--gold-glow);
}
#enter:focus { outline: none; }
#enter:disabled .cta { opacity: 0.5; }

/* ---------- splash HUD ---------- */
#hud { opacity: 0; transition: opacity 2.5s ease 1s; }
#hud.on { opacity: 1; }

#hud {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mint-dim);
}


.hud-tr { position: absolute; top: 76px; right: 32px; display: flex; gap: 24px; align-items: baseline; }
#coords { font-variant-numeric: tabular-nums; min-width: 17ch; text-align: right; }



#hint, #scroll-cue { font-size: 12px !important; letter-spacing: 0.2em !important; color: var(--paper) !important;
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  transition: opacity 1.6s ease;
  white-space: nowrap;
}
#hint { opacity: 0; }
#hint.on { opacity: 1; animation: breathe 3.2s ease-in-out infinite; }
#scroll-cue { opacity: 0; pointer-events: none; background: none; border: 0; font: inherit; color: var(--paper); cursor: pointer; }
#scroll-cue.on { opacity: 1; pointer-events: auto; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.45; } }

.credits {
  position: absolute; right: 32px; bottom: 34px;
  max-width: 36ch; text-align: right;
  font-size: 8px !important; line-height: 1.7; letter-spacing: 0.12em !important;
  opacity: 0.55;
}

#fade {
  position: fixed; inset: 0; background: #000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s ease;
}
#fade.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #grain, #hint.on, #scroll-cue.on { animation: none; }
}

/* interim logo, top centre */
.logo {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
  width: 150px; height: auto;
  pointer-events: none; user-select: none;
  z-index: 5;
}

/* ENG / ESP, bottom centre (where "skip intro" was); the header's own toggle is not used here */
#lang-bottom { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--mint-dim); }
#lang-bottom button { background: none; border: 0; padding: 6px 2px; font: inherit; letter-spacing: inherit; color: var(--mint-dim); cursor: pointer; }
#lang-bottom button[aria-pressed="true"] { color: var(--paper); border-bottom: 1px solid var(--gold); }
#lang-bottom button:hover, #lang-bottom button:focus-visible { color: var(--gold); outline: none; }
#topbar #lang { display: none; }
#nav-btn, #nav-drawer, #nav-drawer a { cursor: pointer; }

/* the two lines that follow the map text, one per scroll */
#captions { position: fixed; left: 50%; bottom: 190px; transform: translateX(-50%); width: min(920px, 100% - 64px); height: 7.5em; pointer-events: none; z-index: 4;
  font-family: var(--serif); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.22; text-align: center; color: var(--paper); text-wrap: balance; }
#captions p { text-wrap: balance; }
#captions p { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.1s ease; text-shadow: 0 0 18px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9); }
#captions p.on { opacity: 1; transform: none; }

/* the transition into the dashboard (scroll-driven): text and interface fade as the light spreads */
#overlay, #hud, #captions, #lang-bottom { filter: opacity(max(0, 1 - var(--outro, 0) * 3)); }
#captions .ou { font-family: var(--serif); font-weight: 600; letter-spacing: 0.04em; color: #e1fe90; }

/* on the globe, only the logo shows; the header arrives with "Click to enter" */
#head-l, #topbar { transition: opacity 1.2s ease 0.3s; }
body:not(.entered) #head-l, body:not(.entered) #topbar, body:not(.entered) #menu-btn { opacity: 0; pointer-events: none; }

/* the instruction line sits higher, with a moving arrow once it asks for a scroll */
#hint, #scroll-cue { bottom: 112px !important; }
#scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#scroll-cue .arrow { width: 14px; height: 14px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: 0.55; } 50% { transform: translateY(7px) rotate(45deg); opacity: 1; } }
#scroll-cue.on { animation: none; }
@media (prefers-reduced-motion: reduce) { #scroll-cue .arrow { animation: none; } }