/* ============================================================
   THE FILM — Suvhradip Ghosh
   A scroll-driven cinematic experience.
   Dark / cinematic / cyan-neon. Scroll = playhead.
   ============================================================ */

:root {
  --bg:        #04050a;
  --cyan:      #00e5ff;
  --text:      #eef4f8;
  --muted:     #93a1b3;
  --faint:     #58657a;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-serif:   'Cormorant Garamond', Georgia, serif;

  --bar: 8vh;             /* letterbox bar height */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #000; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(0,229,255,0.3); color: #fff; }
a { color: inherit; text-decoration: none; }

/* ---------------- Fixed WebGL stage ---------------- */
#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 120% at 50% 45%, #061018 0%, #04050a 55%, #010103 100%);
}
#stage canvas { display: block; width: 100vw; height: 100vh; }

/* ---------------- Atmosphere overlays ---------------- */
.vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(80% 70% at 50% 50%, transparent 45%, rgba(2,3,7,0.75) 100%);
}
.grain {
  position: fixed; inset: -50%; z-index: 4; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: grainshift 0.6s steps(3) infinite;
}
@keyframes grainshift {
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}
.scanlines {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px);
  mix-blend-mode: multiply;
}

/* ---------------- Letterbox bars ---------------- */
.bar {
  position: fixed; left: 0; right: 0; height: var(--bar);
  background: #000; z-index: 20; pointer-events: none;
}
.bar.top { top: 0; box-shadow: 0 1px 0 rgba(0,229,255,0.18); }
.bar.bottom { bottom: 0; box-shadow: 0 -1px 0 rgba(0,229,255,0.18); }

/* ---------------- HUD ---------------- */
.hud {
  position: fixed; z-index: 30; pointer-events: none;
  font-family: var(--font-mono); color: var(--muted);
  font-size: 12px; letter-spacing: 0.12em;
}
.hud.tl { top: calc(var(--bar) + 18px); left: 28px; display: flex; align-items: center; gap: 12px; }
.hud.tr { top: calc(var(--bar) + 18px); right: 28px; text-align: right; }
.rec { display: inline-flex; align-items: center; gap: 8px; color: #ff5470; }
.rec .led { width: 9px; height: 9px; border-radius: 50%; background: #ff5470; box-shadow: 0 0 10px #ff5470; animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 0%,60%{opacity:1} 61%,100%{opacity:0.15} }
.tc { color: var(--text); font-variant-numeric: tabular-nums; }
.tc .tot { color: var(--faint); }
.hud .act-label { color: var(--cyan); }

/* ---------------- Scrubber (film timeline) ---------------- */
.scrubber {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bar) + 20px);
  z-index: 31;
  width: min(760px, 82vw);
  display: flex; flex-direction: column; gap: 9px;
  font-family: var(--font-mono);
}
.scrub-track {
  position: relative; height: 2px; background: rgba(255,255,255,0.14);
  cursor: pointer;
}
.scrub-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.scrub-head {
  position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan); transform: translate(-50%, -50%); box-shadow: 0 0 14px var(--cyan);
  left: 0;
}
.scrub-ticks { display: flex; justify-content: space-between; }
.scrub-ticks button {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  padding: 2px 2px; transition: color .25s; white-space: nowrap;
}
.scrub-ticks button:hover { color: var(--text); }
.scrub-ticks button.on { color: var(--cyan); }
@media (max-width: 720px){
  .scrub-ticks button { font-size: 0; padding: 0; }
  .scrub-ticks button::before { content: "•"; font-size: 13px; }
  .scrub-ticks button.on::before { color: var(--cyan); }
}

/* ---------------- Act-transition light bloom ---------------- */
.act-flash {
  position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 60% at 50% 50%, rgba(160,240,255,0.9), rgba(0,229,255,0.25) 45%, transparent 75%);
  mix-blend-mode: screen;
}

/* ---------------- Film controls ---------------- */
.film-controls {
  position: fixed; left: 28px; bottom: calc(var(--bar) + 20px);
  z-index: 32; display: flex; flex-direction: column; gap: 10px;
}
.ctrl {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(6,12,18,0.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 3px;
  color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  padding: 9px 13px; transition: color .25s, border-color .25s, background .25s;
}
.ctrl svg { width: 16px; height: 16px; flex: none; }
.ctrl .wave { opacity: 0.25; transition: opacity .25s; }
.ctrl:hover { color: var(--text); border-color: rgba(0,229,255,0.5); }
.ctrl.on { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(0,229,255,0.25); }
.ctrl.on .wave { opacity: 1; }
.ctrl.on svg .wave:last-child { animation: sonar 1.6s ease-in-out infinite; }
@keyframes sonar { 0%,100%{opacity:0.4} 50%{opacity:1} }
@media (max-width: 720px){
  .film-controls { left: 16px; bottom: calc(var(--bar) + 64px); }
  .ctrl .ctrl-label { display: none; }
  .ctrl { padding: 10px; }
}

/* ---------------- Title letter assembly ---------------- */
.scene-title .tline { display: block; }
.scene-title .ch {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.scene-title .tline.stroke .ch,
.scene-title .ch.stroke {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--cyan);
}

/* ---------------- Scene overlays (crossfading) ---------------- */
#overlays {
  position: fixed; inset: 0; z-index: 12; pointer-events: none;
}
.scene {
  position: absolute;
  inset: var(--bar) 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 8vw;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.scene .wrap {
  max-width: 980px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.6vh, 32px);
}
.scene.align-center { align-items: center; text-align: center; }
.scene.align-center .wrap { margin: 0 auto; align-items: center; }

.scene-kicker {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan);
  display: flex; align-items: center; gap: 14px;
}
.scene.align-center .scene-kicker { justify-content: center; }
.scene-kicker::before, .scene.align-center .scene-kicker::after {
  content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.7;
}
.scene:not(.align-center) .scene-kicker::after { display: none; }

.scene-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 8.5vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-shadow: 0 0 50px rgba(0,229,255,0.25);
}
.scene-title .stroke {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--cyan);
}

.scene-narr {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.5vw, 33px);
  line-height: 1.34;
  color: #d8e3ec;
  max-width: 720px;
  min-height: 2.7em;
}
.scene.align-center .scene-narr { margin-left: auto; margin-right: auto; }

.scene-detail {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.85;
  color: var(--muted);
  max-width: 720px;
  display: flex; flex-direction: column; gap: 8px;
}
.scene-detail .row { display: flex; gap: 12px; }
.scene-detail .row .b { color: var(--cyan); flex: none; }
.scene-detail .row b { color: var(--text); font-weight: 600; }

/* recognition stats (centered inline pills) */
.scene-stats {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--muted);
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.scene-stats b { color: var(--text); font-weight: 600; }

/* skill chips inside arsenal scene */
.arsenal-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 880px; justify-content: center;
}
.arsenal-chips span {
  font-family: var(--font-mono); font-size: 13px;
  padding: 8px 15px; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px; color: var(--muted);
  background: rgba(0,229,255,0.03);
}
.arsenal-chips span.key { color: var(--text); border-color: rgba(0,229,255,0.5); }

/* finale contact */
.finale-mail {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.2vw, 24px);
  color: var(--cyan);
  display: inline-block;
  border-bottom: 1px solid rgba(0,229,255,0.35); padding-bottom: 5px;
}
.finale-social {
  display: flex; gap: 13px; flex-wrap: wrap; justify-content: center;
}
.finale-social a {
  font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.04em;
  padding: 13px 22px; border: 1px solid rgba(255,255,255,0.18); border-radius: 3px;
  color: var(--muted); display: inline-flex; align-items: center; gap: 9px;
  transition: color .3s, border-color .3s, background .3s, transform .3s;
  pointer-events: auto;
}
.finale-social a:hover { color: #fff; border-color: var(--cyan); background: rgba(0,229,255,0.08); transform: translateY(-3px); }
.finale-social svg { width: 16px; height: 16px; }
.finale-credits {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; color: var(--faint); text-transform: uppercase;
}

/* ---------------- Scroll tracks (spacers that drive the playhead) ---------------- */
#scroll { position: relative; z-index: 5; }
.track { height: 100vh; width: 100%; }
.track:last-child { height: 110vh; }

/* ---------------- Cold-open intro ---------------- */
#veil {
  position: fixed; inset: 0; z-index: 40; background: #000;
  display: flex; align-items: center; justify-content: center;
}
#veil .leader {
  font-family: var(--font-mono); color: var(--cyan);
  font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase;
  opacity: 0;
}
.scroll-cue {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bar) + 64px); z-index: 13;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em;
  color: var(--faint); text-transform: uppercase; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.scroll-cue .ln { width: 1px; height: 34px; background: linear-gradient(var(--cyan), transparent); }

/* ---------------- Reduced motion fallback ---------------- */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .rec .led { animation: none; }
}

@media (max-width: 720px){
  :root { --bar: 6vh; }
  .scene { padding: 0 24px; }
  .hud.tl, .hud.tr { font-size: 10px; }
}