/* ── Danmark ────────────────────────────────────────────────────────────────
   Recon at dawn: cold petrol sea, warm ash land, one amber accent.
   Type: Cormorant Garamond (the song) + IBM Plex Mono (the instruments).
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --sea-deep:  #04090f;
  --sea:       #0a1722;
  --ink:       #f2ece0;
  --ink-dim:   #9aaab5;
  --ink-faint: #5d707d;
  --amber:     #f0c98a;
  --amber-hot: #ffdca6;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(1.1rem, 3.2vw, 2.6rem);
}

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

html, body {
  height: 100%;
  background: var(--sea-deep);
  color: var(--ink);
  font-family: var(--serif);
  overflow: hidden;
  overscroll-behavior: none;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.stage {
  position: fixed;
  inset: 0;
  cursor: none;
}
@media (hover: none) { .stage { cursor: auto; } }

#scene { display: block; width: 100%; height: 100%; }

/* The scrim and edge falloff are drawn in the WebGL grade pass, not here —
   CSS gradients over near-black band visibly, and the shader's film grain
   dithers them away. See uScrim / uVignette in main.js. */

/* ── cartographic micro-type ─────────────────────────────────────────────── */

.hud {
  position: absolute;
  z-index: 4;
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(9px, .78vw, 11px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  animation: hud-in 1.6s var(--ease-out) 1.1s forwards;
}
.hud--tl { top: var(--pad); left: var(--pad); }
.hud--tr { top: var(--pad); right: var(--pad); text-align: right; }
.hud--bl { bottom: var(--pad); left: var(--pad); }
.hud--br { bottom: var(--pad); right: var(--pad); }

@keyframes hud-in { to { opacity: 1; } }

.mark {
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: .55em;
}
.meta { line-height: 1.5; font-variant-numeric: tabular-nums; }
.meta .dim { opacity: .45; }

.ctl {
  font: inherit;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: .35em 0 .35em .1em;
  cursor: pointer;
  display: flex; align-items: center; gap: .7em;
  transition: color .4s var(--ease-out);
}
.ctl:hover, .ctl:focus-visible { color: var(--ink-dim); outline: none; }
.ctl__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 9px rgba(240, 201, 138, .8);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
body.is-paused .ctl__dot { opacity: .3; transform: scale(.7); box-shadow: none; }

/* ── the song ────────────────────────────────────────────────────────────── */

/* The song occupies a fixed band at the bottom of the frame, and every line
   is centred inside it. Anchoring to the bottom instead made a lyric that
   wrapped to two rows grow upward, shifting the optical centre between
   lines — which read as a jump. */
.lyrics {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: clamp(12rem, 32vh, 24rem);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1.2rem, 7vw, 6rem);
  pointer-events: none;
}
.lyrics__host {
  position: relative;
  width: min(19ch, 100%);
  height: 100%;
  font-size: clamp(2.35rem, 6.6vw, 5.6rem);
  line-height: 1.16;
}

.line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  /* fixed, never animated — animating it reflows centred text horizontally */
  letter-spacing: .005em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  /* opacity only, so the whole transition stays on the compositor */
  will-change: opacity;
  text-shadow:
    0 0 30px rgba(4, 9, 15, .95),
    0 1px 2px rgba(4, 9, 15, .7);
}

/* the refrain names the country — set it apart */
.line--name {
  font-style: italic;
  font-weight: 300;
  letter-spacing: .015em;
  color: var(--amber-hot);
  text-shadow:
    0 0 44px rgba(240, 201, 138, .32),
    0 1px 2px rgba(4, 9, 15, .7);
}

/* the line the whole thing is built around */
.line--peak { color: #fff7e8; }

/* never split — fitToOneLine() scales it down instead */
.line--nowrap { white-space: nowrap; }

/* ── progress ────────────────────────────────────────────────────────────── */

.ticks {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(2.1rem, 6vh, 3.6rem);
  z-index: 4;
  display: flex;
  gap: 7px;
  opacity: 0;
  animation: hud-in 1.6s var(--ease-out) 1.4s forwards;
}
/* One mark per line. The line playing is lit; the rest stay greyed. */
.tick {
  width: 20px; height: 1px;
  background: rgba(154, 170, 181, .20);
  transition: background .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.tick.is-live {
  background: var(--amber);
  box-shadow: 0 0 8px rgba(240, 201, 138, .75);
}

/* ── pointer reticle ─────────────────────────────────────────────────────── */

.reticle {
  position: absolute;
  top: 0; left: 0;
  z-index: 5;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  color: var(--amber);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
  mix-blend-mode: screen;
}
.reticle.is-on { opacity: .5; }
@media (hover: none) { .reticle { display: none; } }

/* ── city labels (injected) ──────────────────────────────────────────────── */

.city {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(198, 214, 224, .5);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(9px, -6px);
  text-shadow: 0 0 10px rgba(4, 9, 15, .95);
  will-change: transform, opacity;
}
.city::before {
  content: "";
  position: absolute;
  left: -9px; top: 4px;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px rgba(240, 201, 138, .9);
}
@media (max-width: 640px) { .city { display: none; } }

/* ── boot ────────────────────────────────────────────────────────────────── */

.boot {
  position: absolute; inset: 0;
  z-index: 10;
  display: grid; place-items: center;
  background: var(--sea-deep);
  transition: opacity 1.5s var(--ease-out), visibility 1.5s;
}
.boot.is-gone { opacity: 0; visibility: hidden; }
.boot__inner { text-align: center; }
.boot__bar {
  width: 148px; height: 1px;
  background: rgba(154, 170, 181, .16);
  margin: 0 auto 1.5em;
  overflow: hidden;
}
.boot__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.boot__txt {
  font-family: var(--mono);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── failure state ───────────────────────────────────────────────────────── */

.boot__txt a { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(240,201,138,.4); }

/* ── reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hud, .ticks { animation-duration: .01ms; animation-delay: 0ms; opacity: 1; }
  .boot { transition-duration: .3s; }
}