:root {
  /* Iridescent green: hot green mixed with 50% grey (tune with the preview panel) */
  --bg: #5cc04a;
  --s1: #58b0a8;
  --s2: #b8b558;
  --s3: #8d86c0;
  --s4: #68b8c0;
  --s5: #94c05d;
  --sheen-opacity: 0.85;
  --film-opacity: 0.5;
  --sheen-speed: 8s;
  --film-hue: 0deg;
  --film-blend: overlay;
  --glint: 0.38;
  --glow: 0.28;
  --glow-color: #aa8cff;
  --ink: rgba(18, 40, 14, 0.85);
  --ink-dim: rgba(18, 40, 14, 0.5);
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

/* Iridescent sheen over the base green-grey */
.sheen {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  background: linear-gradient(115deg,
    var(--s1) 0%, var(--bg) 14%, var(--s2) 28%, var(--bg) 42%,
    var(--s3) 56%, var(--s4) 70%, var(--s5) 84%, var(--bg) 100%);
  background-size: 200% 200%;
  opacity: var(--sheen-opacity);
  animation: sheen-drift var(--sheen-speed) ease-in-out infinite alternate;
  will-change: transform;
}
/* rotating spectral film for a beetle-shell shimmer */
.sheen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg at 50% 50%,
    #ff7ad9, #7af0ff, #b4ff7a, #ffe07a, #a78bff, #7affc8, #ff7ad9);
  mix-blend-mode: var(--film-blend);
  opacity: var(--film-opacity);
  filter: hue-rotate(var(--film-hue));
  animation: sheen-spin 22s linear infinite;
}
@keyframes sheen-spin { to { transform: rotate(360deg); } }
.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / var(--glint)), transparent 35%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--glow-color) calc(var(--glow) * 100%), transparent), transparent 40%);
  animation: sheen-drift 6s ease-in-out infinite alternate-reverse;
  background-size: 160% 160%;
}
@keyframes sheen-drift {
  0% { background-position: 0% 40%; }
  100% { background-position: 100% 60%; }
}

#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  touch-action: pan-y;
}

#track { width: 1px; } /* height set by script */

.caption {
  position: fixed;
  left: 0; right: 0;
  bottom: 9vh;
  text-align: center;
  font-size: clamp(14px, 2.2vw, 20px);
  font-weight: 300;
  letter-spacing: 0.6em;
  text-transform: lowercase;
  padding-left: 0.6em; /* balance letter-spacing */
  color: var(--ink-dim);
  pointer-events: none;
  transition: opacity 0.2s linear;
}

.hint {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: var(--ink);
  pointer-events: none;
}
.hint span { animation: bob 1.6s ease-in-out infinite; font-size: 18px; }

@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(8px); opacity: 1; }
}

.progress {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 30vh;
  background: rgba(18, 40, 14, 0.12);
  border-radius: 2px;
  pointer-events: none;
}
.progress-fill {
  width: 100%;
  height: 0%;
  background: var(--ink-dim);
  border-radius: 2px;
}

@media (max-width: 700px) {
  .progress { right: 8px; }
}