.venture-cinema { position:relative; height:620svh; background:#02131b; color:white; }
.in-tunnel .cinema-controls { opacity:.6; }.cinema-controls { transition:opacity .4s; }
.cinema-stage { position:sticky; top:0; height:100svh; overflow:hidden; background:radial-gradient(ellipse at 65% 43%,#083b48 0%,#02131b 60%); }
.cinema-canvas { position:absolute; inset:0; width:100%; height:100%; }
.cinema-interaction { position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; }
.cinema-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(2,19,27,.85),transparent 55%),linear-gradient(0deg,rgba(2,19,27,.9),transparent 30%); }
.cinema-hud { position:absolute; z-index:2; top:110px; inset-inline:5vw; display:flex; justify-content:space-between; font-family:monospace; font-size:.65rem; letter-spacing:.12em; color:#81b4bb; }
.cinema-hud > span:first-child::before { content:""; display:inline-block; width:5px; height:5px; margin-right:9px; background:#45d1cc; box-shadow:0 0 10px #45d1cc; border-radius:50%; }
.cinema-copy { position:absolute; z-index:2; left:5vw; top:32%; width:46%; transition:opacity .2s; }
.cinema-kicker { font-family:monospace; letter-spacing:.15em; font-size:.63rem; color:var(--aqua); margin-bottom:1.5rem; }
.cinema-title { margin:0; font-size:clamp(3rem,5.7vw,6rem); letter-spacing:-.065em; line-height:.98; font-weight:700; }
.cinema-title em { color:#45d1cc; }
.cinema-description { margin-top:1.5rem; max-width:390px; color:#9db6bb; line-height:1.8; font-size:.92rem; }
.cinema-copy.changing { animation:chapter-in .55s cubic-bezier(.2,.8,.2,1); }
@keyframes chapter-in { from { opacity:0; transform:translateY(20px); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }
.cinema-controls { position:absolute; z-index:3; bottom:100px; left:5vw; display:flex; gap:8px; }
.cinema-controls button { background:rgba(2,19,27,.85); border:1px solid #28505a; border-radius:999px; color:#b0c9cc; padding:.7rem 1rem; font-size:.7rem; cursor:pointer; transition:background .3s,border-color .3s,color .3s; }
.cinema-controls button span { font-family:monospace; margin-right:.5rem; font-size:.55rem; opacity:.55; }
.cinema-controls button[aria-pressed="true"] { background:var(--aqua); color:#022029; border-color:var(--aqua); }
.cinema-controls button:hover,.cinema-controls button:focus-visible { border-color:var(--aqua); outline:2px solid transparent; }
.cinema-bottom { position:absolute; z-index:3; bottom:35px; inset-inline:5vw; display:flex; justify-content:space-between; gap:1rem; color:#8ba9ae; font-family:monospace; font-size:.62rem; letter-spacing:.08em; }
.cinema-bottom a { position:absolute; right:0; bottom:65px; color:#c9dedf; padding-bottom:3px; border-bottom:1px solid #3b646b; }.cinema-bottom i { display:inline-block; font-style:normal; color:var(--aqua); animation:scroll-arrow 1.5s ease-in-out infinite; }
@keyframes scroll-arrow { 50% { transform:translateY(5px); } }
.fact { position:relative; }
html { scroll-padding-top:90px; }
@media(max-width:980px) { .cinema-copy { top:23%; width:52%; }.cinema-title { font-size:clamp(2.7rem,6.5vw,4.5rem); } }
@media(max-width:640px) { .venture-cinema { height:290svh; }.cinema-hud { top:90px; inset-inline:1.2rem; font-size:.5rem; }.cinema-copy { left:1.2rem; top:17%; width:92%; }.cinema-title { font-size:2.7rem; }.cinema-kicker { margin-bottom:.8rem; font-size:.5rem; }.cinema-description { font-size:.78rem; max-width:290px; margin-top:.8rem; }.cinema-stage::after { background:linear-gradient(0deg,rgba(2,19,27,.95),transparent 35%),linear-gradient(180deg,rgba(2,19,27,.5),transparent 65%); }.cinema-controls { left:1.2rem; right:1.2rem; bottom:88px; gap:5px; }.cinema-controls button { flex:1; padding:.65rem .4rem; font-size:.62rem; }.cinema-controls button span { margin-right:.2rem; font-size:.45rem; }.cinema-bottom { inset-inline:1.2rem; bottom:27px; font-size:.48rem; }.cinema-bottom a { bottom:110px; max-width:150px; text-align:right; } }
@media(prefers-reduced-motion:reduce) { .venture-cinema { height:100svh; }.cinema-copy.changing { animation:none; }.cinema-bottom > span { display:none; }.cinema-bottom { justify-content:flex-end; } }