/* Cat City — cinematic scroll hero (PC). Frames rendered in Blender: cine/build/cine_build.py */
[data-cine]{position:relative;height:720cqh;margin:0}
[data-cine][style*="height"]{}
.cine-t4{left:6cqw;top:15cqh;max-width:44cqw}
.cine-t5{left:6cqw;bottom:15cqh;max-width:46cqw}
[data-cine] .cine-stick{position:sticky;top:0;height:100cqh;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.5cqh;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.5cqh;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,.95cqw,14px);letter-spacing:.26em;text-transform:uppercase;color:#ffd66b;margin:0 0 1.2cqh}
.cine-t h1{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(40px,5.6cqw,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.6cqw,70px);line-height:.96;letter-spacing:-.04em;margin:0}
.cine-t p{font-size:clamp(15px,1.45cqw,21px);line-height:1.5;color:#dbe5f5;margin:1.4cqh 0 0;max-width:38ch}
.cine-t p.big{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(22px,2.6cqw,40px);line-height:1.15;letter-spacing:-.02em;color:#fff;max-width:20ch;margin:0}
.cine-t0{left:6cqw;bottom:16cqh;max-width:32cqw}
.cine-t1{right:7cqw;top:38cqh;max-width:34cqw;text-align:right}
.cine-t1 p.big{margin-left:auto}
.cine-t2{left:6cqw;top:15cqh;max-width:44cqw}
.cine-t3{left:6cqw;bottom:15cqh;max-width:46cqw}
.cine-btns{display:flex;gap:10px;margin-top:2.6cqh;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:9cqh;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.2cqw;bottom:9cqh;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 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:6cqw;right:6cqw;top:calc(6.5cqh + 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.4cqw,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.4cqw,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:6cqw;right:auto;bottom:calc((6.5cqh - 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:5cqw;bottom:calc((6.5cqh - 34px)/2);min-height:34px;padding:0 12px;font-size:10px;letter-spacing:.18em}
 [data-cine] .cine-hint{bottom:calc(6.5cqh + 18px);font-size:10px;letter-spacing:.24em;white-space:nowrap}
 [data-cine] .cine-chap{display:none}
}
/* Cat City's own phone tab bar (setPhoneBar, 71px, shows ≤620px) covers the bottom of the stage: lift the bottom bar + its row above it */
@media (max-width:620px) and (orientation:portrait){
 [data-cine] .cine-bar-b{bottom:71px}
 [data-cine] .cine-chap{bottom:calc(71px + (6.5cqh - 20px)/2)}
 [data-cine] .cine-skip{bottom:calc(71px + (6.5cqh - 34px)/2)}
 [data-cine] .cine-hint{bottom:calc(71px + 6.5cqh + 18px)}
}