.cine{position:relative;background:#0b0a12;color:#fff}
.cine-stage{position:relative;min-height:640px;overflow:hidden}
.cine-world{position:absolute;inset:0;width:100%;height:100%;display:block}
.cine-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0b0a12e0 0%,#0b0a1290 40%,#0b0a1200 68%),linear-gradient(180deg,#0b0a1200 55%,#0b0a1266 100%)}
.cine-dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.cine-grid{position:relative;z-index:3;min-height:inherit;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2vw;padding-block:60px}
.cine-copy{display:grid;align-items:center}
.cine-scene{grid-area:auto;margin-bottom:56px}
.cine h1,.cine h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em;margin:0;text-shadow:0 2px 28px #000b}
.cine h1{font-size:clamp(42px,5.6vw,82px);line-height:.98}
.cine h2{font-size:clamp(34px,4.4vw,64px);line-height:1.04}
.cine em{color:var(--gold-light);font-style:italic}
.cine .eyebrow{color:var(--gold-light);margin-bottom:22px}
.cine-lead{max-width:520px;margin:26px 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:#e6e1d6;text-shadow:0 1px 16px #000b}
.cine-actions{display:flex;align-items:center;gap:32px;margin-top:34px;flex-wrap:wrap}
.cine-mark{position:relative;justify-self:center;width:min(100%,60vh);aspect-ratio:1}
.cine-mark canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cine-mark.fallback::before,.cine-static .cine-mark::before{content:'';position:absolute;inset:0;background:var(--cine-logo) center/contain no-repeat;filter:drop-shadow(0 0 26px #c9962280)}
.cine-rail,.cine-hint,.cine-skip{display:none}
.cine-js{height:440vh}
.cine-js .cine-stage{position:sticky;top:var(--hh,0px);height:calc(100vh - var(--hh,0px));height:calc(100svh - var(--hh,0px));min-height:0}
.cine-js .cine-grid{height:100%;padding-block:0}
.cine-js .cine-copy{min-height:62%}
.cine-js .cine-scene{grid-area:1/1;margin:0;opacity:0;transform:translate3d(0,24px,0);pointer-events:none;will-change:transform,opacity}
.cine-js .cine-scene.on{pointer-events:auto}
.cine-js .cine-rail{position:absolute;right:max(14px,2vw);top:50%;transform:translateY(-50%);z-index:5;display:grid;gap:12px}
.cine-rail i{display:block;width:6px;height:26px;border-radius:3px;background:#ffffff33;transition:background .3s,height .3s}
.cine-rail i.on{background:var(--gold);height:44px}
.cine-js .cine-hint{display:flex;position:absolute;left:max(24px,calc((100% - 1180px)/2));bottom:20px;z-index:5;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#d8d0bd;align-items:center;gap:10px;transition:opacity .4s}
.cine-hint::after{content:'';width:1px;height:28px;background:linear-gradient(var(--gold),transparent);animation:cdrip 1.8s ease-in-out infinite}
@keyframes cdrip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}
.cine-js .cine-skip{display:block;position:absolute;right:max(34px,3vw);bottom:20px;z-index:5;color:var(--gold-light);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.cine-skip:hover{text-decoration:underline}
@media (max-width:860px){
 .cine-grid{grid-template-columns:1fr;gap:0}
 .cine-mark{width:min(60vw,36vh);margin:0 auto 20px}
 .cine-js .cine-grid{grid-template-rows:40% 60%}
 .cine-js .cine-mark{grid-row:1;align-self:end;margin:0 auto}
 .cine-js .cine-copy{grid-row:2;align-self:start;padding-top:2vh;min-height:0}
 .cine h1{font-size:clamp(34px,10vw,52px)}
 .cine h2{font-size:clamp(30px,8.4vw,44px)}
 .cine-veil{background:linear-gradient(180deg,#0b0a1200 0%,#0b0a1200 38%,#0b0a1294 64%,#0b0a12b8 100%)}
 .cine-js .cine-rail{right:8px}
 .cine-js .cine-skip{right:20px}
}
@media (max-width:860px){
 .cine-lead{font-size:15px;line-height:1.55;margin-top:14px}
 .cine-actions{margin-top:18px;gap:16px}
 .cine .eyebrow{margin-bottom:12px}
 .cine h1{font-size:clamp(32px,9vw,44px)}
 .cine-js .cine-grid{grid-template-rows:36% 64%}
 .cine-js .cine-mark{width:min(54vw,30vh)}
 .cine-js .cine-hint{display:none}
 .cine-js .cine-skip{top:12px;bottom:auto}
 .cine .button{min-height:46px;padding:11px 16px}
}
@media (max-height:700px) and (min-width:861px){
 .cine h1{font-size:clamp(34px,7vh,60px)}
 .cine h2{font-size:clamp(30px,6vh,52px)}
 .cine-lead{margin-top:16px}
 .cine-actions{margin-top:20px}
}