/* =====================================================================
   樂慾島　20261106.10：橫式電影畫面的過場（js/cutscene.js）
   ===================================================================== */
.cut.cinema{background:#000;display:flex;align-items:center;justify-content:center}
.cinw{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}
.cintop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 18px 12px;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75);opacity:0;transform:translateY(6px);transition:opacity .6s .25s,transform .6s .25s}
.cinlab{display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cinlab i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--cc,#ff5fa2);box-shadow:0 0 10px var(--cc,#ff5fa2);margin-right:8px}
.cinlab em{font-style:normal;color:rgba(255,255,255,.45);margin-left:8px}
.cintime{flex:0 0 auto;font-family:var(--latin);color:rgba(255,255,255,.6)}
.cintime .ctclock{font-size:15px;font-weight:700;color:#fff;letter-spacing:.04em}
.cinstage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0b0710}
.cinbar{position:absolute;left:0;right:0;height:50.5%;background:#000;z-index:8;transition:height .55s cubic-bezier(.6,0,.2,1)}
.cinbar.t{top:0}.cinbar.b{bottom:0}
.cut.cinema.on .cinbar{height:0}
.cut.cinema.out .cinbar{height:50.5%;transition-duration:.3s}
.cingrain{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55))}
.cinsub{min-height:132px;padding:16px 22px 0;opacity:0;transform:translateY(8px);transition:opacity .6s .4s,transform .6s .4s}
.cut.cinema.on .cintop,.cut.cinema.on .cinsub{opacity:1;transform:none}
.cint{display:block;font-family:var(--serif);font-size:22px;font-weight:900;line-height:1.3;color:#fff}
.cinl{display:block;margin-top:6px;font-size:13px;line-height:1.65;color:rgba(255,255,255,.7)}
.cinl.big{margin-top:2px;font-family:var(--serif);font-size:16px;line-height:1.8;color:#fff;text-align:center}
.cinroute{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11.5px;color:rgba(255,255,255,.6)}
.cinroute span{flex:0 0 auto;max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cinroute i{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.18)}
.cinroute .cindot{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--cc,#ff5fa2);box-shadow:0 0 10px var(--cc,#ff5fa2)}
.cinnote{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.75)}
.cinnote span{padding:3px 9px;border-radius:8px;background:rgba(255,255,255,.08)}
.cinnote .tag{background:var(--cc,#ff5fa2);color:#1a0c22;font-weight:800}
.cinag{display:flex;align-items:center;gap:10px;margin-top:12px}
.cinag .pav .av{width:34px;height:34px}
.cinag b{display:block;font-size:12.5px;color:#fff}.cinag small{display:block;font-size:12px;color:rgba(255,255,255,.65);line-height:1.5}
.cut.cinema .cutskip.cx{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));margin:0;text-align:center;font-size:11px;color:rgba(255,255,255,.35)}
.cut.cinema.fin .cutskip.cx{opacity:0}

/* ---------- 1. 移動 ---------- */
.cvl{position:absolute;inset:0;background-size:cover;background-position:center}
.cvl.wide{background-size:auto 130%;background-repeat:repeat-x;background-position:0 50%}
.cvl.to{opacity:0;transition:opacity 1s ease}
.cut.cinema.mid .cvl.to{opacity:1}
.cvl.none{background:linear-gradient(180deg,#2a1d48,#0e0918)}
.cut.cinema.night .cvl{filter:brightness(.78) saturate(1.1)}
.cvstreak{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s}
.cut.cinema.on .cvstreak{opacity:1}.cut.cinema.fin .cvstreak{opacity:0}
.cvstreak i{position:absolute;left:100%;height:1px;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:cvst 1.1s linear infinite}
.cvstreak i:nth-child(1){top:22%}.cvstreak i:nth-child(2){top:41%;animation-delay:.35s}.cvstreak i:nth-child(3){top:63%;animation-delay:.7s}.cvstreak i:nth-child(4){top:80%;animation-delay:.2s}
@keyframes cvst{to{transform:translateX(-380%)}}
/* 車外：車子從左邊開進來，停在中間，最後往右開走 */
.cvveh{position:absolute;left:50%;bottom:7%;z-index:4;width:76%;transform:translateX(-170%);transition:transform 1.1s cubic-bezier(.2,.8,.25,1)}
.cut.cinema.on .cvveh{transform:translateX(-50%)}
.cut.cinema.fin .cvveh{transform:translateX(90%);transition:transform .9s cubic-bezier(.6,0,.9,.4)}
.cvveh img{position:relative;display:block;width:100%;animation:cvbob .45s ease-in-out infinite alternate}
.cvsh{position:absolute;left:8%;right:8%;bottom:-2%;height:12%;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(6px)}
@keyframes cvbob{to{transform:translateY(-1.5px)}}
.cvveh.css .cvbody{position:relative;height:0;padding-bottom:24%;border-radius:44% 56% 18% 18%/70% 70% 30% 30%;background:linear-gradient(180deg,#faf6ff,#c9bfdb 70%,#8f84a6);box-shadow:inset 0 -6px 14px rgba(0,0,0,.25);animation:cvbob .45s ease-in-out infinite alternate}
.cvveh.css .cvwin{position:absolute;left:14%;right:16%;top:18%;height:34%;border-radius:20px 30px 8px 8px;background:linear-gradient(180deg,#1b2440,#3a4f80);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.cvveh.css .cvlight{position:absolute;right:3%;top:52%;width:6%;height:8%;border-radius:4px;background:var(--cc,#ff5fa2);box-shadow:0 0 14px var(--cc,#ff5fa2)}
/* 車窗、圓窗：外面的景在後面滑 */
.cvframe{position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cvframe.alt{object-position:50% 24%}
.cut.cinema.m-win .cinstage{animation:cvshake 1.6s ease-in-out infinite}
@keyframes cvshake{50%{transform:translateY(1px)}}
.cvframe.css i{position:absolute;inset:9% 7% 17%;border-radius:18px;box-shadow:0 0 0 999px #140e1c,inset 0 0 0 3px rgba(255,255,255,.1),inset 0 0 50px rgba(0,0,0,.55)}
.cvframe.css.air i{inset:8% 26.5%;border-radius:50%;box-shadow:0 0 0 999px #1d1726,0 0 0 10px #2c2436,inset 0 0 0 4px rgba(255,255,255,.18),inset 0 0 60px rgba(0,0,0,.6)}
/* 玻璃電梯：外面的夜景往下沉，玻璃的框 */
.cut.cinema.m-up .cvl{background-size:cover;background-position:50% 50%}
.cut.cinema.m-up .cvstreak{display:none}
.cvframe.css.lift .m1,.cvframe.css.lift .m2{position:absolute;top:0;bottom:0;width:5px;background:linear-gradient(90deg,#1a1520,#5a5066,#1a1520);box-shadow:0 0 12px rgba(0,0,0,.6)}
.cvframe.css.lift .m1{left:33%}.cvframe.css.lift .m2{left:67%}
.cvframe.css.lift .rail{position:absolute;left:0;right:0;bottom:24%;height:6px;background:linear-gradient(180deg,#6a6074,#2a2330);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.cvframe.css.lift::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%)}
.cvfloor{position:absolute;right:12px;top:12px;z-index:6;display:flex;align-items:baseline;gap:2px;padding:6px 12px;border-radius:12px;background:rgba(10,6,16,.7);backdrop-filter:blur(6px);color:#fff;font-family:var(--latin)}
.cvfloor small{margin-right:8px;font-family:var(--sans,inherit);font-size:10.5px;color:rgba(255,255,255,.6)}
.cvfloor b{font-size:22px;min-width:1.4em;text-align:right}.cvfloor span{font-size:12px;color:rgba(255,255,255,.6)}
.cut.cinema.fin .cvfloor{box-shadow:0 0 0 1px var(--cc,#ffcf6e),0 0 18px rgba(255,207,110,.5)}

/* ---------- 2. 開播 ---------- */
.clbg{position:absolute;inset:-4%;background-size:cover;background-position:center;filter:brightness(.42) blur(1.5px);transform:scale(1.06);transition:transform 3s ease}
.cut.cinema.on .clbg{transform:scale(1)}
.clcam{position:absolute;left:50%;top:50%;z-index:3;width:34%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);opacity:0;transition:transform 1.3s cubic-bezier(.2,.85,.25,1),opacity .5s}
.cut.cinema.on .clcam{transform:translate(-50%,-50%) scale(1);opacity:1}
.clcam.img{object-fit:contain;filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
.clcam.css i{position:absolute}
.clcam.css .gb{left:14%;right:14%;top:28%;bottom:26%;border-radius:26px;background:linear-gradient(160deg,#3c3550,#16111f);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 34px rgba(0,0,0,.6)}
.clcam.css .gl{left:34%;top:36%;width:32%;height:32%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#8fd3ff,#0b1d3a 60%,#000);box-shadow:0 0 0 5px #0c0a12,0 0 0 6px rgba(255,255,255,.14)}
.clcam.css .gr{right:22%;top:33%;width:8px;height:8px;border-radius:50%;background:#ff2a4f;box-shadow:0 0 10px #ff2a4f}
.clrec{position:absolute;left:12px;top:12px;z-index:5;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:8px;background:rgba(0,0,0,.45);font:700 11px var(--latin);letter-spacing:.1em;color:#fff}
.clrec i{width:7px;height:7px;border-radius:50%;background:#ff2a4f;box-shadow:0 0 8px #ff2a4f;animation:clblink 1s steps(2) infinite}
@keyframes clblink{50%{opacity:.2}}
.clv{position:absolute;right:12px;top:12px;z-index:5;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,.45);text-align:right;color:#fff}
.clv small{display:block;font-size:9.5px;color:rgba(255,255,255,.6)}.clv b{font:700 15px var(--latin)}
.clnum{position:absolute;inset:0;z-index:4;pointer-events:none}
.clnum b,.clnum em{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) scale(.6);text-align:center;opacity:0;font:900 64px var(--latin);color:#fff;text-shadow:0 0 30px rgba(255,61,110,.8)}
.clnum em{font-style:normal;font-size:46px;letter-spacing:.12em;color:#ff3d6e;text-shadow:0 0 24px rgba(255,61,110,.9)}
.cut.cinema.on .clnum b{animation:clpop .62s ease-out both}
.cut.cinema.on .clnum b:nth-child(1){animation-delay:.55s}.cut.cinema.on .clnum b:nth-child(2){animation-delay:1.15s}.cut.cinema.on .clnum b:nth-child(3){animation-delay:1.75s}
.cut.cinema.on .clnum em{animation:cllive .5s ease-out 2.35s both}
@keyframes clpop{0%{opacity:0;transform:translateY(-50%) scale(1.6)}30%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(.85)}}
@keyframes cllive{0%{opacity:0;transform:translateY(-50%) scale(1.5)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
.cldm{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.cldm i{position:absolute;left:100%;top:calc(58% + var(--i)*7.5%);white-space:nowrap;font-style:normal;font-size:11px;color:#fff;text-shadow:0 1px 3px #000;opacity:0}
.cldm i b{margin-right:5px;color:#ffd0e2}
.cut.cinema.on .cldm i{animation:cldm 2.4s linear both;animation-delay:calc(2.2s + var(--i)*.12s)}
@keyframes cldm{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(calc(-100vw - 100%))}}

/* ---------- 3. 時間過去 ---------- */
.ctl{position:absolute;inset:0;background-size:cover;background-position:center}
.ctl.l1{opacity:0;transition:opacity 1.9s ease .5s}
.cut.cinema.on .ctl.l1{opacity:1}
.ctl.fnight{filter:brightness(.32) saturate(1.3) hue-rotate(-18deg)}
.ctsky{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(255,140,90,.35),transparent 60%);mix-blend-mode:soft-light;transition:opacity 2.2s ease .4s}
.cut.cinema.t-night.on .ctsky{opacity:0}
.cut.cinema.t-day .ctsky{opacity:0;background:linear-gradient(180deg,rgba(255,200,140,.45),transparent 70%)}
.cut.cinema.t-day.on .ctsky{opacity:1}
.ctlit{position:absolute;inset:0;z-index:3;pointer-events:none}
.ctlit i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffd98a;box-shadow:0 0 8px #ffb3d9;opacity:0;transition:opacity .6s ease var(--d)}
.cut.cinema.t-night.mid .ctlit i{opacity:.9}
.cut.cinema.t-day .ctlit{display:none}

/* ---------- 4. 進門 ---------- */
.cdbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.7) saturate(1.15);transform:scale(1.14);transition:transform 3.2s ease .4s}
.cut.cinema.on .cdbg{transform:scale(1)}
.cdglow{position:absolute;inset:0;z-index:2;background:radial-gradient(40% 70% at 50% 55%,var(--cc),transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease .9s}
.cut.cinema.on .cdglow{opacity:.55}
.cut.cinema.d-soft.on .cdglow{opacity:.3}
.cddoor{position:absolute;top:0;bottom:0;z-index:4;width:50.5%;background:linear-gradient(90deg,#120c16,#2a1f30 80%,#3c2e44);transition:transform 1.6s cubic-bezier(.7,0,.2,1) .5s}
.cddoor.l{left:0;box-shadow:inset -2px 0 0 var(--cc)}
.cddoor.r{right:0;transform-origin:right;background:linear-gradient(270deg,#120c16,#2a1f30 80%,#3c2e44);box-shadow:inset 2px 0 0 var(--cc)}
.cddoor i{position:absolute;top:10%;bottom:10%;left:16%;right:16%;border:1px solid rgba(255,255,255,.08);border-radius:6px}
.cddoor.l i::after,.cddoor.r i::after{content:'';position:absolute;top:50%;width:4px;height:22%;margin-top:-11%;border-radius:3px;background:linear-gradient(180deg,#8a7a5a,#e7d3a0,#8a7a5a)}
.cddoor.l i::after{right:8%}.cddoor.r i::after{left:8%}
.cut.cinema.on .cddoor.l{transform:translateX(-100%)}
.cut.cinema.on .cddoor.r{transform:translateX(100%)}

/* ---------- 5. 擦肩 ---------- */
.cpbg{position:absolute;inset:-5%;background-size:cover;background-position:center;filter:brightness(.4) blur(3px);transform:scale(1.04)}
.cpcrowd{position:absolute;bottom:-4%;z-index:4;width:52%;height:86%;transition:transform 2.2s cubic-bezier(.3,.7,.2,1) .4s;
 background:
  radial-gradient(9% 13% at 18% 30%,#06030a 96%,transparent 100%),radial-gradient(17% 40% at 18% 78%,#06030a 96%,transparent 100%),
  radial-gradient(8% 12% at 46% 38%,#0b0710 96%,transparent 100%),radial-gradient(15% 36% at 46% 84%,#0b0710 96%,transparent 100%),
  radial-gradient(9% 13% at 76% 26%,#06030a 96%,transparent 100%),radial-gradient(18% 42% at 76% 76%,#06030a 96%,transparent 100%);filter:blur(1.5px)}
.cpcrowd.l{left:-4%}.cpcrowd.r{right:-4%;transform:scaleX(-1)}
.cut.cinema.on .cpcrowd.l{transform:translateX(-30%)}
.cut.cinema.on .cpcrowd.r{transform:scaleX(-1) translateX(-30%)}
.cpfig{position:absolute;z-index:3;opacity:0;background-size:cover;transition:opacity 1s ease .9s,transform 3s linear .6s}
.cpfig.own{inset:0;background-position:center;-webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);transform:scale(1.06)}
.cut.cinema.on .cpfig.own{opacity:1;transform:scale(1)}
.cpfig.sil{left:50%;bottom:0;height:96%;aspect-ratio:2/3;background-position:center 30%;filter:brightness(.85) drop-shadow(0 0 18px var(--lc));transform:translateX(-30%);
 -webkit-mask:radial-gradient(48% 56% at 50% 46%,#000 38%,transparent 88%);mask:radial-gradient(48% 56% at 50% 46%,#000 38%,transparent 88%)}
.cut.cinema.on .cpfig.sil{opacity:.95;transform:translateX(-70%)}
.cut.cinema.on .cpfig.sil.flip{transform:translateX(-70%) scaleX(-1)}
.cpfig.sil.flip{transform:translateX(-30%) scaleX(-1)}