/* Scroll cinema: horizontal screen strip, chapter tint, photo wipes. Hidden states only under html.cine (set by cinema.js). */
.cine-tint{position:fixed;inset:0;z-index:-1;pointer-events:none;--c:rgb(66 133 244/.0);background:radial-gradient(90% 60% at 50% 0%,var(--c),transparent 70%),radial-gradient(70% 50% at 100% 100%,var(--c),transparent 70%)}
.cine-strip{padding:110px 0 70px;background:linear-gradient(var(--bg2),transparent 40%)}
.cs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px}
.cs-head h2{margin:0}
.cs-count{margin:0;font:600 15px Onest;color:var(--t3);white-space:nowrap}.cs-count b{font-size:34px;color:var(--t);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cs-view{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.cs-track{display:grid;gap:28px}
.cs-card{margin:0;border-radius:18px;background:var(--card);border:1px solid var(--line2);overflow:hidden;box-shadow:0 50px 90px -40px rgb(0 0 0/.9),0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.cs-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#161d30;border-bottom:1px solid var(--line)}
.cs-chrome i{width:10px;height:10px;border-radius:50%;background:#2c3550}.cs-chrome i:nth-child(1){background:var(--gr)}.cs-chrome i:nth-child(2){background:var(--gy)}.cs-chrome i:nth-child(3){background:var(--gg)}
.cs-chrome span{margin-left:10px;font-size:12px;color:var(--t3)}
.cs-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff}
.cs-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.cs-card figcaption{padding:14px 18px 16px;font-size:14.5px;color:var(--t2);border-top:3px solid var(--c)}
.cs-card figcaption b{display:block;color:var(--t);font-size:17px;margin-bottom:2px}
.cs-bar{display:none;height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin:26px 0 10px}.cs-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gb),var(--gr),var(--gy),var(--gg));transform-origin:0 50%;transform:scaleX(0)}
.cs-count{display:none}
/* desktop pinned horizontal mode. The pinned layout is applied by CSS from first paint (no JS class needed), so the section height
   never changes when cinema.js starts: before JS the track is a native horizontal scroller, JS then drives it with a transform. */
@media(min-width:1001px) and (prefers-reduced-motion:no-preference){
.cine-strip{padding:0;height:100vh;height:100svh;min-height:520px;overflow:hidden}
.cine-strip .cs-pin{height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:96px;box-sizing:border-box}
.cine-strip .cs-count,.cine-strip .cs-bar{display:block}
.cine-strip .cs-head{margin-bottom:26px}
.cine-strip .cs-view{max-width:none;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.cine-strip.hz{height:auto;min-height:0;overflow-x:clip;overflow-y:visible}
.cine-strip.hz .cs-pin{height:100vh;height:100svh;min-height:520px}
.cine-strip.hz .cs-view{overflow:visible}
.cine-strip .cs-track{display:flex;gap:40px;width:max-content;padding:0 max(32px,calc((100vw - var(--wrap))/2 + 32px));will-change:transform}
.cine-strip .cs-card{flex:none;width:min(58vw,880px,calc((100vh - 360px)*1.6))}
.cine-strip .cs-img img{width:110%;max-width:none}
.cine-strip .cs-img{border-radius:0}
}
/* photo wipes and parallax (JS only) */
html.cine .pphoto img{inset:-9% 0;height:118%}
html.cine .photo>img{inset:-9% 0;height:118%}
html.cine .team img{position:absolute;inset:-9% 0;height:118%}
html.cine .cine-wipe{will-change:clip-path}
@media(max-width:1000px){.cine-strip{padding:84px 0 40px}.cs-view{padding:0 16px}.cs-track{gap:18px}}
@media(prefers-reduced-motion:reduce){.cine-tint{display:none}}
html.cine .photo{overflow:hidden}