/* film.css — layered after show.css. Warm light, no neon, nothing drawn. */
:root{--neon:#E9C58A;--gold:#FFD79A;--grade:0;--pinop:0;--pipeop:0;--pz:0}
body.kiosk{background:#000;cursor:none}
body.kiosk.show-cursor{cursor:default}
body.booting .chrome,body.booting .beat{opacity:0}
#map{position:fixed;inset:0;z-index:1;background:#000}
#map canvas{filter:saturate(calc(1 - .18*var(--grade))) contrast(calc(1 + .08*var(--grade))) sepia(calc(.22*var(--grade)))}
.vignette{opacity:.72;background:radial-gradient(ellipse 72% 62% at 50% 46%,transparent 40%,rgba(0,0,0,.55) 100%)}
.grain{opacity:.07}

/* limb light and the dark side of the planet */
.halo{position:absolute;border-radius:50%;pointer-events:none;z-index:2;opacity:0;
  box-shadow:0 0 90px 24px rgba(120,170,255,.22),0 0 220px 70px rgba(80,120,220,.10),inset 0 0 70px 12px rgba(150,190,255,.18)}
.shade{position:absolute;border-radius:50%;pointer-events:none;z-index:2;opacity:1;
  background:radial-gradient(circle at 36% 30%,rgba(0,0,0,0) 44%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.82) 84%,#000 100%)}
.cloud{position:fixed;inset:-20%;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen}
.cloud .c{position:absolute;inset:0;background-size:900px 900px;filter:blur(26px) contrast(1.35) brightness(.9);opacity:.55;animation:drift 90s linear infinite}
.cloud .c1{background-size:1400px 1400px;filter:blur(40px) contrast(1.2);opacity:.4;animation-duration:140s;animation-direction:reverse}
.cloud .c2{background-size:600px 600px;filter:blur(18px) contrast(1.6) brightness(.8);opacity:.35;animation-duration:70s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-12%,4%,0) scale(1.25)}}
.flare{position:fixed;width:0;height:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen}
.flare:before{content:"";position:absolute;left:-520px;top:-520px;width:1040px;height:1040px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,220,1) 0,rgba(255,220,160,.85) 3%,rgba(255,190,120,.35) 10%,rgba(255,160,90,.08) 28%,transparent 55%)}
.flare:after{content:"";position:absolute;left:-1600px;top:-2px;width:3200px;height:4px;
  background:linear-gradient(90deg,transparent,rgba(255,230,190,.55) 40%,rgba(255,255,255,.95) 50%,rgba(255,230,190,.55) 60%,transparent);filter:blur(1.5px)}
.fade{position:fixed;inset:0;z-index:50;background:#000;pointer-events:none;opacity:1}

/* chrome */
.live b{color:var(--gold)}
.chapter{font-weight:300;color:rgba(242,231,218,.55)}
.chapter b{font-weight:400}

/* ident */
.ident{left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:60;transform:none;background:#000;transition:opacity 1.6s var(--e)}
.ident.off{transform:none}
.ident .z{width:min(18vw,230px);opacity:.92;filter:drop-shadow(0 0 40px rgba(255,215,154,.18))}
.ident .w{margin-top:40px;width:min(26vw,360px);opacity:.9}
.ident .l{margin-top:36px;font:500 12px/1 var(--mono);letter-spacing:5px;color:var(--beige);text-transform:uppercase}
.ident:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,236,210,.14) 50%,transparent 60%);transform:translateX(-120%);animation:pass 3.6s cubic-bezier(.6,0,.2,1) .8s 1 forwards;mix-blend-mode:screen}
@keyframes pass{to{transform:translateX(120%)}}

/* the title and the sentences — letters arrive one by one */
.title h1,.sentence h1,.state h1,.next h1{font-family:var(--serif,'Instrument Serif',serif);font-weight:400;letter-spacing:-.01em}
.title h1 i,.sentence h1 i{font-style:italic;color:var(--gold)}
.beat h1 span{display:inline-block;opacity:0;transform:translateY(.35em) rotate(1.5deg);filter:blur(6px);transition:opacity .9s var(--e2),transform 1.2s var(--e2),filter .9s var(--e2);transition-delay:calc(var(--i)*32ms)}
.beat.on h1 span{opacity:1;transform:none;filter:none}
.title{left:48px;bottom:140px}
.title .k{opacity:.9}
.title h1{font-size:clamp(70px,9vw,160px);line-height:.92}
.title p{color:rgba(242,231,218,.72)}
.sentence{left:48px;top:50%;transform:translateY(calc(-50% + 24px));max-width:min(70vw,1300px)}
.sentence.on{transform:translateY(-50%)}
.sentence h1{font-size:clamp(84px,11vw,210px);line-height:.9;color:var(--cream)}
.sentence p{font-size:clamp(18px,1.7vw,30px);color:rgba(242,231,218,.7);margin-top:28px}
.count{right:48px;top:50%}
.count .k{text-align:right;opacity:.75}
.count .n b{font-family:var(--serif,'Instrument Serif',serif);font-size:clamp(140px,19vw,340px);letter-spacing:-.03em;color:var(--cream)}
.count small{display:block;margin-top:8px;font:400 clamp(18px,2vw,34px)/1 var(--mono);letter-spacing:4px;color:var(--gold);min-height:1em}

/* the state arrives in the scene, lower left, as light type */
.state{left:48px;bottom:116px;max-width:min(60vw,1100px)}
.state h1{font-size:clamp(64px,8vw,150px);line-height:.92}
.state .row{display:flex;gap:46px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(242,231,218,.22);flex-wrap:wrap}
.state .row div b{display:block;font-weight:300;font-size:clamp(34px,3.6vw,64px);line-height:1;letter-spacing:-.03em;color:var(--cream);font-variant-numeric:tabular-nums}
.state .row div small{display:block;margin-top:10px;font:400 11px/1.4 var(--mono);letter-spacing:2.4px;text-transform:uppercase;color:var(--beige)}
.state .row div{opacity:0;transform:translateY(14px);transition:opacity .9s var(--e2),transform 1s var(--e2)}
.state.on .row div{opacity:1;transform:none}
.state.on .row div:nth-child(1){transition-delay:1.1s}.state.on .row div:nth-child(2){transition-delay:1.25s}.state.on .row div:nth-child(3){transition-delay:1.4s}.state.on .row div:nth-child(4){transition-delay:1.55s}.state.on .row div:nth-child(5){transition-delay:1.7s}.state.on .row div:nth-child(6){transition-delay:1.85s}

/* the next site */
.next{left:48px;bottom:116px;max-width:min(64vw,1100px)}
.next h1{font-size:clamp(60px,7.4vw,140px);line-height:.95}
.next p{font:400 13px/1.6 var(--mono);letter-spacing:2.6px;text-transform:uppercase;color:var(--beige);margin-top:26px}

/* the strip during the keynote */
.strip .tg.av{color:var(--gold)}
.strip .tg.al{color:var(--beige)}

/* lights on the ground: points of light from orbit, discs on the ground; the pipeline is warm */
.pin{opacity:var(--pinop)}
.pp{opacity:var(--pipeop)}
.tp i.d{width:calc(4px + 4px*var(--pz));height:calc(4px + 4px*var(--pz));background:#fff7e8;box-shadow:0 0 calc(6px + 10px*var(--pz)) rgba(255,230,190,.9),0 0 2px #fff}
.tp.lit i.r{border-color:rgba(255,230,190,.8)}
.pp i.d{width:calc(7px + 6px*var(--pz));height:calc(7px + 6px*var(--pz));background:#ffe3b0;border:1px solid rgba(255,245,230,.95);box-shadow:0 0 calc(10px + 14px*var(--pz)) rgba(255,215,154,.85),0 0 40px rgba(255,190,120,.35)}
.pp.al i.d{background:#e2c39a;border-color:rgba(255,245,230,.8);box-shadow:0 0 12px rgba(226,195,154,.55)}
.pp.av i.d{background:#ffe3b0}
.pp i.r{border-color:rgba(255,235,205,.8)}
.pp.near i.d{transform:translate(-50%,-50%) scale(1.25)}
.pp.hero i.d{transform:translate(-50%,-50%) scale(1.8);box-shadow:0 0 30px rgba(255,215,154,.95),0 0 90px rgba(255,190,120,.5)}
.pp.hero i.r{border-color:var(--gold);animation:ignite 2.2s var(--e2) infinite}
@keyframes ignite{0%{transform:translate(-50%,-50%) scale(.6);opacity:.9}100%{transform:translate(-50%,-50%) scale(6);opacity:0}}

/* in-scene labels, scaled by distance */
.lab{--s:1;pointer-events:none;white-space:nowrap;font:400 13px/1.3 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--cream);opacity:0;transform:scale(var(--s));transform-origin:left center;transition:opacity .8s var(--e);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.lab.on{opacity:.9}
.lab b{display:block;font:300 22px/1.1 var(--font);letter-spacing:-.01em;text-transform:none}

/* the keynote panels become glass in the scene */
.key .panel,.key .tile,.key .cmp,.key .card{background:rgba(8,10,14,.46);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(242,231,218,.14);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.key .g,.key .pos,.key b.g{color:var(--gold)}
.key .bar i{background:linear-gradient(90deg,rgba(255,215,154,.9),rgba(255,235,205,.6))}
.key .med{background:rgba(242,231,218,.35)}

/* site layers from the dashboard, toned for dusk */
.kiosk .sp-cap{background:rgba(8,10,14,.5);border-color:rgba(242,231,218,.16);backdrop-filter:blur(16px)}
.kiosk .maplibregl-canvas-container{filter:none}

/* progress */
.progress{background:rgba(242,231,218,.1)}
.progress i{background:linear-gradient(90deg,rgba(255,215,154,.6),var(--gold))}

/* operator */
.ops{z-index:70}
body.paused #pausedNote{opacity:1}
#pausedNote{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:69;font:500 12px/1 var(--mono);letter-spacing:3px;color:var(--beige);opacity:0;transition:opacity .6s;pointer-events:none;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){.beat h1 span{transition:none}.cloud .c{animation:none}.ident:after{animation:none}}
.beat h1 .w{white-space:nowrap;display:inline-block}
.kiosk .st-markw{display:none}