/* PidgeyFLok — cinematic scroll film (PC). Frames rendered in Blender: cine/build/cine_build.py */
[data-cine]{position:relative;height:720vh;margin:0}
[data-cine][style*="height"]{}
.cine-t4{left:6vw;top:15vh;max-width:44vw}
.cine-t5{left:6vw;bottom:15vh;max-width:46vw}
[data-cine] .cine-stick{position:sticky;top:0;height:100vh;overflow:hidden;background:#04060a;font-family:'Instrument Sans',system-ui,sans-serif}
.cine-cv{position:absolute;inset:0;width:100%;height:100%;display:block;background:#04060a}
.cine-bar{position:absolute;left:0;right:0;height:6.5vh;background:#000;z-index:3}
.cine-bar-t{top:0}.cine-bar-b{bottom:0}
.cine-dip{position:absolute;inset:0;background:#000;opacity:0;z-index:2;pointer-events:none}
.cine-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px}
.cine-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(4,6,10,.72) 0%,rgba(4,6,10,.35) 38%,rgba(4,6,10,0) 62%)}
.cine-load{position:absolute;left:0;right:0;top:6.5vh;height:2px;z-index:6;background:rgba(255,255,255,.08)}
.cine-load i{display:block;height:100%;width:0;background:#ffd66b;transition:width .25s ease}
.cine-load.done{opacity:0;transition:opacity .6s ease .4s}

.cine-t{position:absolute;z-index:5;opacity:0;pointer-events:none;color:#fff;text-shadow:0 3px 24px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.6);will-change:opacity,transform}
.cine-t small{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(11px,.95vw,14px);letter-spacing:.26em;text-transform:uppercase;color:#ffd66b;margin:0 0 1.2vh}
.cine-t h1{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(40px,5.6vw,88px);line-height:.94;letter-spacing:-.045em;margin:0}
.cine-t h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(30px,4.6vw,70px);line-height:.96;letter-spacing:-.04em;margin:0}
.cine-t p{font-size:clamp(15px,1.45vw,21px);line-height:1.5;color:#dbe5f5;margin:1.4vh 0 0;max-width:38ch}
.cine-t p.big{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,40px);line-height:1.15;letter-spacing:-.02em;color:#fff;max-width:20ch;margin:0}
.cine-t0{left:6vw;bottom:16vh;max-width:32vw}
.cine-t1{right:7vw;top:38vh;max-width:34vw;text-align:right}
.cine-t1 p.big{margin-left:auto}
.cine-t2{left:6vw;top:15vh;max-width:44vw}
.cine-t3{left:6vw;bottom:15vh;max-width:46vw}
.cine-btns{display:flex;gap:10px;margin-top:2.6vh;pointer-events:auto}
.cine-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;text-decoration:none;background:#ffd66b;color:#0b1220;border:1px solid #ffd66b;transition:transform .15s,background .15s}
.cine-btn:hover{transform:translateY(-1px);background:#fff;border-color:#fff}
.cine-btn.ghost{background:rgba(8,12,20,.55);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.cine-btn.ghost:hover{background:rgba(8,12,20,.8);border-color:#fff}

.cine-hint{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);pointer-events:none;transition:opacity .4s}
.cine-hint span{display:inline-block;animation:cineBob 1.6s ease-in-out infinite}
@keyframes cineBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.cine-chap{position:absolute;right:2.2vw;bottom:9vh;z-index:5;display:flex;gap:18px;font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.38);pointer-events:none}
.cine-chap b{font-weight:800;color:inherit;transition:color .3s}
.cine-chap b.on{color:#ffd66b}
.cine-chap b::before{content:attr(data-n);margin-right:8px;opacity:.6}
@media (prefers-reduced-motion:reduce){.cine-hint span{animation:none}}

/* phone: film shows on phones too (2026-09-23) — phone layout at the end of this file */

/* telemetry strip + skip pill (2026-09-19) */
.cine-data{position:absolute;right:3.2vw;top:10vh;z-index:5;opacity:0;visibility:hidden;pointer-events:none;max-width:30vw;
  font:600 11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;color:#dfe9f7;
  background:rgba(4,8,14,.52);border:1px solid rgba(255,214,107,.28);border-left:3px solid #ffd66b;border-radius:10px;padding:10px 12px 9px;backdrop-filter:blur(6px);transition:opacity .2s}
.cine-data h6{margin:0 0 6px;font:800 10px/1 'Archivo',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#ffd66b;display:flex;gap:8px;align-items:center}
.cine-data h6 i{font-style:normal;font-weight:600;letter-spacing:.08em;color:rgba(223,233,247,.55);font-size:9px;border:1px solid rgba(223,233,247,.25);border-radius:4px;padding:1px 4px}
.cine-data ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:auto auto;gap:2px 12px}
.cine-data li{display:contents}.cine-data li span{color:rgba(223,233,247,.62)}.cine-data li b{font-weight:700;color:#fff;text-align:right;white-space:nowrap}
.cine-data li b.warn{color:#ff7a59}.cine-data li b.ok{color:#8ce99a}
.cine-data .live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8ce99a;box-shadow:0 0 8px #8ce99a;animation:cinePulse 1.4s ease-in-out infinite}
@keyframes cinePulse{0%,100%{opacity:1}50%{opacity:.35}}
.cine-skip{position:absolute;right:3.2vw;bottom:9.5vh;z-index:7;opacity:0;transition:opacity .3s;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;
  font:800 11px/1 'Archivo',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#fff;text-decoration:none;background:rgba(8,12,20,.55);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.cine-skip:hover{background:rgba(8,12,20,.85);border-color:#ffd66b;color:#ffd66b}
@media (max-width:900px){.cine-data{display:none}.cine-skip{bottom:8vh;right:4vw;min-height:34px;font-size:10px}}

/* phone portrait (2026-09-23): same film as PC, re-laid for the glass: words up top on a soft scrim,
   picture left clear below, chapters + skip ride the bottom letterbox bar, end buttons stack full-width */
@media (max-width:700px) and (orientation:portrait){
 [data-cine] .cine-stick::before{content:'';position:absolute;left:0;right:0;top:0;height:52%;z-index:3;pointer-events:none;
   background:linear-gradient(180deg,rgba(4,6,10,.78) 0%,rgba(4,6,10,.5) 45%,rgba(4,6,10,0) 100%)}
 [data-cine] .cine-scrim{background:linear-gradient(180deg,rgba(4,6,10,.55) 0%,rgba(4,6,10,.2) 50%,rgba(4,6,10,0) 70%)}
 [data-cine] .cine-t,[data-cine] .cine-t0,[data-cine] .cine-t1,[data-cine] .cine-t2,[data-cine] .cine-t3,[data-cine] .cine-t4,[data-cine] .cine-t5{
   left:6vw;right:6vw;top:calc(6.5vh + 20px);bottom:auto;max-width:none;text-align:left}
 [data-cine] .cine-t1 p.big{margin-left:0}
 [data-cine] .cine-t small{font-size:10px;letter-spacing:.22em;margin:0 0 8px}
 [data-cine] .cine-t h2{font-size:clamp(25px,7.4vw,33px);line-height:1;letter-spacing:-.03em}
 [data-cine] .cine-t p{font-size:14.5px;line-height:1.45;max-width:40ch;margin-top:9px}
 [data-cine] .cine-t p.big{font-size:clamp(22px,6.4vw,28px);line-height:1.12;max-width:none;margin:0}
 [data-cine] .cine-btns{flex-direction:column;align-items:stretch;gap:8px;margin-top:16px;max-width:340px}
 [data-cine] .cine-btn{justify-content:center;text-align:center;white-space:normal;min-height:46px;padding:10px 18px;font-size:14px;line-height:1.2}
 [data-cine] .cine-chap{left:6vw;right:auto;bottom:calc((6.5vh - 20px)/2);gap:14px;line-height:20px;letter-spacing:.12em}
 [data-cine] .cine-chap b{font-size:0}
 [data-cine] .cine-chap b::before{font-size:11px;margin:0;opacity:1}
 [data-cine] .cine-skip{right:5vw;bottom:calc((6.5vh - 34px)/2);min-height:34px;padding:0 12px;font-size:10px;letter-spacing:.18em}
 [data-cine] .cine-hint{bottom:calc(6.5vh + 18px);font-size:10px;letter-spacing:.24em;white-space:nowrap}
 /* stats card on phone (2026-09-24): no chapter numbers; LoRa card bottom-left under the words, top-right (.cine-data-hi) when the top is clear */
 [data-cine] .cine-chap{display:none}
 [data-cine] .cine-data{display:block;left:4vw;right:auto;top:auto;bottom:calc(6.5vh + 12px);max-width:64vw;font-size:10px;line-height:1.4;padding:8px 10px 7px;transition:none}
 [data-cine] .cine-data.cine-data-hi{left:auto;right:4vw;top:calc(6.5vh + 14px);bottom:auto}
 [data-cine] .cine-data h6{font-size:9px;letter-spacing:.2em;margin-bottom:5px}
 [data-cine] .cine-data ul{gap:1px 10px}
 [data-cine] .cine-data li:nth-child(n+6){display:none}
}