.film-section{padding:0 0 70px;background:var(--bg)}
.film{position:relative;width:min(1280px,100%);aspect-ratio:16/9;margin:0 auto;overflow:hidden;background:#000;isolation:isolate;container-type:inline-size}
.film-bg,.film-scene{position:absolute;inset:0}
.film-bg{width:100%;height:100%;filter:brightness(.8)}
.film::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(#0000 0 2px,#0000002a 2px 3px),radial-gradient(ellipse,#0000 45%,#000b 100%);pointer-events:none;z-index:1}
.film-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.film-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.film-flash.on{animation:flash .5s}
@keyframes flash{0%{opacity:.85}30%{opacity:.1}45%{opacity:.6}100%{opacity:0}}

.film-scene{z-index:2;display:grid;place-content:center;justify-items:center;text-align:center;padding:6% 8% 12%;gap:1.2cqw}
.ln{opacity:0;animation:lnin var(--d,1s) var(--at,0s) both ease-out;font-size:clamp(14px,4.4cqw,56px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.05;text-shadow:0 2px 18px #000}
.ln.big{font-size:clamp(20px,6.4cqw,90px);letter-spacing:.06em}
.ln.mono{font-family:var(--mono);font-weight:400;font-size:clamp(10px,1.7cqw,22px);letter-spacing:.3em;color:var(--cyan)}
.ln.sub{font-size:clamp(13px,2.6cqw,34px);letter-spacing:.12em;color:#cfdde8;font-weight:500}
.ln.c{color:var(--cyan);text-shadow:0 0 28px #38d6ffaa}
.ln.r{color:var(--red);text-shadow:0 0 28px #ff3b3baa}
.ln.glitch{animation:lnin var(--d,.4s) var(--at,0s) both,glitch .35s calc(var(--at,0s) + .5s) 3}
@keyframes lnin{from{opacity:0;transform:translateY(.6em);filter:blur(10px);letter-spacing:.4em}to{opacity:1;transform:none;filter:none}}
@keyframes glitch{0%,100%{transform:none;text-shadow:0 2px 18px #000}25%{transform:translateX(-.04em);text-shadow:.05em 0 var(--red),-.05em 0 var(--cyan)}60%{transform:translateX(.05em) skewX(-6deg);text-shadow:-.06em 0 var(--red),.06em 0 var(--cyan)}}
.ln.out{animation:lnin var(--d,1s) var(--at,0s) both ease-out,lnout .6s var(--end) both}
@keyframes lnout{to{opacity:0;filter:blur(8px)}}

.film-upload{width:min(72%,720px);display:flex;align-items:center;gap:2cqw;opacity:0;animation:lnin 1s var(--at,0s) both;font:clamp(9px,1.6cqw,20px) var(--mono);color:var(--cyan)}
.film-upload div{flex:1;height:2.4cqw;border:1px solid var(--cyan);padding:2px}
.film-upload i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--cyan) 0 .8cqw,#1b8aa8 .8cqw 1cqw);animation:fill var(--fill,5s) var(--at,0s) linear both;box-shadow:0 0 16px #38d6ff99}
@keyframes fill{from{width:0}to{width:100%}}

.film-ui{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(#0000,#000c);z-index:3}
.film-btn{background:none;border:1px solid #fff5;color:#fff;width:36px;height:36px;cursor:pointer;font-size:15px}
.film-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.film-bar{flex:1;height:6px;background:#fff2;cursor:pointer;position:relative}
.film-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--cyan),var(--red))}
.film-bar::before{content:"";position:absolute;inset:-12px 0}
.film-time{font:13px var(--mono);color:var(--mute);width:3em}

.film-start{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:10px;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(ellipse at 25% 50%,#ff3b3b44,#0000 60%),radial-gradient(ellipse at 75% 50%,#38d6ff44,#0000 60%),#05080c;font:700 clamp(18px,3.4cqw,40px) var(--disp);letter-spacing:.2em;text-transform:uppercase}
.film-start::first-line{font-size:2em;color:var(--cyan)}
.film-start:hover span{color:var(--cyan)}
.film.started .film-start{display:none}
.film-note{text-align:center;font:13px var(--mono);color:var(--mute);margin-top:14px;letter-spacing:.06em;padding:0 20px}

@media (prefers-reduced-motion:reduce){
  .ln,.film-upload,.film-upload i{animation:none!important;opacity:1;filter:none}
  .film-upload i{width:100%}.film-rain{display:none}
}