/* scenes.css — Top 10 cinematic scenes + horizontal film strip */
.scene{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;color:var(--paper);background:#0e0b09;isolation:isolate}
.scene-bg{position:absolute;inset:-8%;background-size:cover;background-position:center;filter:blur(38px) saturate(.9) brightness(.42) sepia(.3);transform:scale(1.15);z-index:-2}
.scene::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,11,9,.92) 0%,rgba(14,11,9,.55) 55%,rgba(14,11,9,.25) 100%)}
.scene.rev::after{background:linear-gradient(270deg,rgba(14,11,9,.92) 0%,rgba(14,11,9,.55) 55%,rgba(14,11,9,.25) 100%)}
.scene .lb{height:16vh;transition:height 1.4s var(--ease-io)}
.scene.in .lb{height:7vh}
.scene-sweep{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,226,170,.16) 45%,rgba(255,240,210,.28) 50%,rgba(255,226,170,.16) 55%,transparent 70%);transform:translateX(-120%)}
.scene.in .scene-sweep{animation:sweepX 2.2s var(--ease) .2s 1 both}
@keyframes sweepX{to{transform:translateX(120%)}}
.scene-inner{position:relative;max-width:1240px;width:100%;margin:0 auto;padding:16vh 28px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.scene.rev .scene-inner{grid-template-columns:.9fr 1.1fr}
.scene.rev .scene-copy{order:2}
.scene-num{font-family:var(--display);font-size:clamp(120px,18vw,260px);line-height:.8;font-weight:400;color:transparent;-webkit-text-stroke:1.5px rgba(232,163,58,.85);letter-spacing:-.04em;
  transform:translateY(calc(var(--py,0) * 60px))}
.scene-title{font-weight:900;font-size:clamp(44px,6.4vw,92px);line-height:1.02;margin-top:-.25em;letter-spacing:-.01em}
.scene-orig{font-family:var(--display);font-style:italic;font-size:clamp(18px,2vw,26px);color:#d4c6ac;margin-top:8px}
.scene-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-size:14px;color:#bfb29b;letter-spacing:.04em}
.scene-meta b{color:var(--paper);font-weight:600}
.scene-scores{display:flex;gap:28px;align-items:flex-end;margin-top:28px}
.score{display:flex;flex-direction:column;gap:2px}
.score small{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#9d907a}
.score .v{font-family:var(--display);font-size:46px;line-height:1;color:var(--amber-hi)}
.score .stars{color:var(--amber-hi);font-size:20px;letter-spacing:3px}
.scene-note{margin-top:22px;font-style:italic;color:#e3d7c0;max-width:520px;border-left:2px solid var(--amber-hi);padding-left:14px}
.scene-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.scene-poster{justify-self:center;width:min(380px,80%);transform:translateY(calc(var(--py,0) * -50px)) rotate(var(--rot,2deg));transition:transform .2s linear}
.scene-poster .pf{aspect-ratio:2/3;border-radius:4px;overflow:hidden;box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 10px #f2ebdd,0 0 0 11px rgba(0,0,0,.2);cursor:pointer}
.scene-poster .pf img{width:100%;height:100%;object-fit:cover}
.scene-poster figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#9d907a;margin-top:22px;text-align:center}
.scene .scene-copy>*{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.scene.in .scene-copy>*{opacity:1;transform:none}
.scene.in .scene-copy>*:nth-child(2){transition-delay:.08s}.scene.in .scene-copy>*:nth-child(3){transition-delay:.16s}.scene.in .scene-copy>*:nth-child(4){transition-delay:.24s}.scene.in .scene-copy>*:nth-child(5){transition-delay:.32s}.scene.in .scene-copy>*:nth-child(6){transition-delay:.4s}.scene.in .scene-copy>*:nth-child(7){transition-delay:.48s}
@media(max-width:860px){.scene-inner,.scene.rev .scene-inner{grid-template-columns:1fr;gap:30px;padding:14vh 22px}.scene.rev .scene-copy{order:0}.scene-poster{width:62%}}
/* film strip */
.strip{height:340vh;position:relative;background:var(--ink)}
.strip-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:5vh}
.strip-head{padding:0 6vw}
.filmstrip{position:relative;background:#0b0907;padding:30px 0;transform:rotate(-2deg);margin:0 -4vw;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.filmstrip::before,.filmstrip::after{content:"";position:absolute;left:0;right:0;height:14px;background:radial-gradient(ellipse at center,#e9dfcc 0 4px,transparent 4.6px) 0 0/26px 14px repeat-x;opacity:.9}
.filmstrip::before{top:8px}.filmstrip::after{bottom:8px}
.filmstrip-track{display:flex;gap:16px;padding:0 6vw;will-change:transform}
.frame-card{flex:none;width:clamp(170px,17vw,230px);cursor:pointer}
.frame-card .pf{aspect-ratio:2/3;border-radius:2px;overflow:hidden;filter:sepia(.18);transition:filter .4s,transform .5s var(--ease)}
.frame-card:hover .pf{filter:none;transform:scale(1.03)}
.frame-card .pf img{width:100%;height:100%;object-fit:cover}
.frame-card p{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#8d8170;margin-top:10px}
.frame-card h4{color:var(--paper);font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-progress{margin:0 6vw;height:2px;background:rgba(242,235,221,.15)}
.strip-progress i{display:block;height:100%;width:0;background:var(--amber-hi)}
/* quotes / flip cards */
.quotes{padding-bottom:40px}
.flip-grid{max-width:1180px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:26px}
.flip{perspective:1200px;aspect-ratio:2/3;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.flip:hover .flip-in,.flip.flipped .flip-in{transform:rotateY(180deg)}
.flip-f,.flip-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px -18px rgba(28,24,20,.55)}
.flip-f .pf,.flip-f .pf img{width:100%;height:100%;object-fit:cover}
.flip-b{transform:rotateY(180deg);background:var(--paper-2);padding:22px 20px;display:flex;flex-direction:column;border:1px solid var(--line)}
.flip-b::before{content:"“";font-family:var(--display);font-size:70px;line-height:.6;color:var(--amber)}
.flip-b blockquote{font-size:16px;line-height:1.6;font-style:italic;flex:1;overflow:hidden;margin-top:10px}
.flip-b .who{border-top:1px dashed var(--line);padding-top:10px;font-size:13px}
.flip-b .who b{display:block;font-size:15px}
.flip-b .who span{color:var(--amber);letter-spacing:2px}
/* text-only quote ticket (no poster): back face shown directly */
.flip.note .flip-b{transform:none;background:#f8f2e6;border-top:3px solid var(--amber)}
.flip.note .note-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--amber);margin-top:-6px;order:-1}
.flip.note:hover .flip-b{box-shadow:0 26px 46px -20px rgba(28,24,20,.6)}
.flip.note{transition:transform .5s var(--ease)}.flip.note:hover{transform:translateY(-4px) rotate(-.6deg)}