/* Renata scroll-world — brand-matched to renatachiptune.com
   Tokens lifted from the live site: void #08080F, ink #F2F2F5, single cyan accent #00E5FF. */

/* Theme fonts, copied from the live site (assets/fonts). */
@font-face {
  font-family: "Departure Mono";
  src: url("../assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2-variations"),
       url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #08080F;
  --ink: #F2F2F5;
  --cyan: #00E5FF;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Departure Mono", "Consolas", ui-monospace, monospace;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* The WebGL canvas is pinned full-screen; the tall #scroll element below
   only exists to give the page scroll distance that we map to camera time. */
#gl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
}

/* Subtle vignette so the neon reads deeper — pure CSS, no post-processing. */
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Lighter now — bloom supplies the glow; the vignette just seats the edges. */
  background: radial-gradient(130% 110% at 50% 45%, transparent 68%, rgba(3,3,8,0.6) 100%);
}

/* Scroll driver: height set in JS to (scenes * 100vh). Invisible. */
#scroll { position: relative; z-index: 2; width: 100%; }

/* Copy overlays — one pinned panel per scene, opacity driven from world.js. */
.overlay {
  position: fixed;
  z-index: 3;
  max-width: min(680px, 90vw);
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
.overlay.left  { left: clamp(20px, 6vw, 90px); top: 50%; transform: translateY(-50%); }
.overlay.right { right: clamp(20px, 6vw, 90px); top: 50%; transform: translateY(-50%); text-align: right; }
.overlay.center { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: min(640px, 90vw); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(16px, 1.6vw, 21px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.75);
}
.overlay h2 {
  font-size: clamp(60px, 10vw, 132px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  text-shadow: 0 0 44px rgba(0, 229, 255, 0.45), 0 3px 24px rgba(0, 0, 0, 0.9);
}
.overlay p {
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.45;
  color: rgba(242, 242, 245, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  max-width: 34ch;
}
.overlay.right p { margin-left: auto; }
.overlay.center p { margin: 0 auto; }

/* Finale CTA — the one interactive overlay. */
#cta { pointer-events: auto; }
.btn-row { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.btn {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid rgba(0, 229, 255, 0.5);
}
.btn-primary {
  background: var(--cyan);
  color: #04121a;
  font-weight: 700;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(0, 229, 255, 0.55); }
.btn-ghost { background: transparent; color: var(--cyan); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(0, 229, 255, 0.08); }

/* Scroll hint on the first frame. */
#hint {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  transition: opacity 0.4s ease;
}
.hint-text {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.7);
}
/* Animated mouse with a scrolling wheel. */
.mouse {
  width: 28px; height: 46px;
  margin: 0 auto;
  border: 2px solid rgba(0, 229, 255, 0.75);
  border-radius: 15px;
  position: relative;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.45), inset 0 0 8px rgba(0, 229, 255, 0.12);
}
.wheel {
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 9px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: wheelScroll 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes wheelScroll {
  0%   { opacity: 0; transform: translateY(0); }
  25%  { opacity: 1; }
  70%  { opacity: 1; transform: translateY(15px); }
  100% { opacity: 0; transform: translateY(15px); }
}

/* Back-to-site link — fixed top-right. */
#home-link {
  position: fixed;
  top: 26px; right: 28px;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(0, 229, 255, 0.85);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 8px;
  background: rgba(5, 5, 11, 0.45);
  transition: background 0.15s ease, transform 0.15s ease;
}
#home-link:hover { background: rgba(0, 229, 255, 0.12); transform: translateY(-1px); }

/* Act label — fixed top-left, tracks the current act. */
#act-label {
  position: fixed;
  left: clamp(20px, 6vw, 90px);
  top: 30px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Progress rail. */
#rail {
  position: fixed;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2px; height: 160px;
  background: rgba(242, 242, 245, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
#rail-fill {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 0%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

/* Loading veil until Three.js paints the first frame. */
#veil {
  position: fixed; inset: 0; z-index: 10;
  background: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: 13px; letter-spacing: 0.2em;
  transition: opacity 0.6s ease;
}
#veil.hidden { opacity: 0; pointer-events: none; }

/* Reduced motion: no scroll hijack, stack the copy as a plain readable page. */
@media (prefers-reduced-motion: reduce) {
  #hint, #rail { display: none; }
  .overlay { position: relative; opacity: 1 !important; transform: none !important;
             text-align: left !important; margin: 24vh auto 24vh; left: auto; right: auto; }
}