@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #03040a; --txt: #eaf2ff; --dim: rgba(234,242,255,0.6); --faint: rgba(234,242,255,0.32);
  --cyan: #55e3ff; --warm: #ff7b54; --gold: #ffcf6b;
  --mono: 'Space Mono', monospace; --sans: 'Sora', system-ui, sans-serif;
  --bar: clamp(40px, 9vh, 90px);   /* letterbox height -> ~2.4:1 */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: #000; color: var(--txt); font-family: var(--sans); user-select: none; -webkit-user-select: none; cursor: default; }
#webgl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* film grain + vignette */
#grain { position: fixed; inset: -60%; z-index: 6; pointer-events: none; opacity: 0.05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .4s steps(3) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-5%,3%)} 66%{transform:translate(4%,-4%)} 100%{transform:translate(-3%,2%)} }
body::after { content:''; position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,0.6) 100%); }

/* letterbox */
.bar { position: fixed; left: 0; right: 0; height: var(--bar); background: #000; z-index: 7; pointer-events: none; }
.bar-top { top: 0; } .bar-bottom { bottom: 0; }

/* film HUD */
#hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.act-label { position: absolute; top: calc(var(--bar) + clamp(0.8rem,2.5vh,2rem)); left: clamp(1.2rem,4vw,3rem); display: flex; align-items: baseline; gap: 0.8rem; opacity: 0; transition: opacity .5s; }
.act-label.show { opacity: 1; }
.act-no { font-family: var(--mono); font-size: 0.8rem; color: var(--cyan); }
.act-name { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }
.act-title { position: absolute; left: clamp(1.2rem,4vw,3rem); right: clamp(1.2rem,4vw,3rem); top: 26%; font-weight: 800; font-size: clamp(2rem, 7vw, 6rem); line-height: 0.96; letter-spacing: -0.02em; opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; text-shadow: 0 4px 50px rgba(0,0,0,0.7); pointer-events: none; }
.act-title.show { opacity: 1; transform: none; }
.caption { position: absolute; bottom: calc(var(--bar) + clamp(0.8rem,3vh,2.2rem)); left: 50%; transform: translateX(-50%); width: min(86vw, 60ch); text-align: center; font-size: clamp(0.95rem, 2vw, 1.4rem); font-weight: 400; line-height: 1.4; color: #fff; opacity: 0; transition: opacity .5s; text-shadow: 0 2px 20px rgba(0,0,0,0.8); }
.caption.show { opacity: 1; }
.caption b { color: var(--cyan); font-weight: 600; }
.caption .w { color: var(--warm); font-weight: 600; }
.tech { position: absolute; top: calc(var(--bar) + clamp(0.8rem,2.5vh,2rem)); right: clamp(1.2rem,4vw,3rem); display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; font-family: var(--mono); font-size: 0.66rem; }
.tech span { border: 1px solid rgba(255,255,255,0.16); border-radius: 4px; padding: 0.25em 0.6em; color: var(--dim); letter-spacing: 0.08em; background: rgba(8,12,22,0.4); }

/* start screen */
#start { position: fixed; inset: 0; z-index: 20; background: radial-gradient(120% 120% at 50% 40%, #0a1024 0%, #03040a 70%); display: grid; place-content: center; text-align: center; transition: opacity .8s; }
#start.gone { opacity: 0; pointer-events: none; }
.kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.3em; color: var(--cyan); margin-bottom: 1.4rem; }
.film-title { font-weight: 800; font-size: clamp(2.6rem, 9vw, 7rem); line-height: 0.92; letter-spacing: -0.02em; }
.film-title span { background: linear-gradient(90deg, var(--cyan), var(--warm)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.film-sub { max-width: 46ch; margin: 1.6rem auto 2.4rem; color: var(--dim); font-size: clamp(0.95rem,1.6vw,1.2rem); line-height: 1.5; }
.play-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.7em; background: #fff; color: #03040a; border: 0; border-radius: 100px; padding: 1em 1.8em; font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; cursor: pointer; transition: transform .25s, box-shadow .25s; box-shadow: 0 0 0 0 rgba(85,227,255,0.5); }
.play-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 50px rgba(85,227,255,0.35); }
.tri { width: 0; height: 0; border-left: 12px solid #03040a; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.runtime { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); margin-top: 1.4rem; letter-spacing: 0.1em; }

/* transport */
#transport { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc((var(--bar) - 42px)/2); height: 42px; z-index: 9; display: flex; align-items: center; gap: 0.9rem; width: min(82vw, 760px); opacity: 0; transition: opacity .4s; }
#transport.show { opacity: 1; }
#transport:hover { opacity: 1 !important; }
.t-btn { pointer-events: auto; width: 34px; height: 34px; flex: none; border: 0; background: rgba(255,255,255,0.08); border-radius: 50%; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.t-btn:hover { background: rgba(255,255,255,0.18); }
.ic-pause { width: 10px; height: 11px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.ic-pause.play { width: 0; height: 0; border: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.ic-replay { font-size: 1.1rem; line-height: 1; }
.scrub { pointer-events: auto; position: relative; flex: 1; height: 4px; background: rgba(255,255,255,0.16); border-radius: 100px; cursor: pointer; }
.scrub-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--warm)); border-radius: 100px; }
.scrub-fill::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translateY(-50%); }
.chapters { position: absolute; inset: 0; }
.chapters i { position: absolute; top: 50%; width: 2px; height: 8px; background: rgba(255,255,255,0.4); transform: translate(-50%,-50%); }
.time { font-family: var(--mono); font-size: 0.72rem; color: var(--dim); min-width: 3.2ch; }

@media (max-width: 640px) { :root { --bar: 44px; } .tech { display: none; } }