.cine{--cine-black:#12100c;--cine-ink:#ece6d8;--ease:cubic-bezier(.22, 1, .36, 1);--slow:cubic-bezier(.33, 0, .15, 1);background:var(--cine-black);color:var(--cine-ink);padding:clamp(4rem,12vh,7rem) 1rem;position:relative}@media (min-width:1024px){.cine{flex-direction:column;justify-content:center;min-height:100svh;display:flex}}.cine:before{content:"";pointer-events:none;background:radial-gradient(70% 60% at 50% 45%,#fff4de0a,#0000 70%);position:absolute;inset:0}.cine-stage{width:100%;max-width:min(1232px,177.778svh - 26.6667rem);margin-inline:auto;position:relative}.cine-screen{position:relative}.cine-frame{aspect-ratio:16/9;background:var(--cine-black);width:100%;position:relative;overflow:hidden}.cine-player{position:absolute;inset:0}.cine-frame video{object-fit:contain;background:var(--cine-black);width:100%;height:100%;transition:opacity 1.6s var(--ease);position:absolute;inset:0}.cine-frame[data-dark]:not([data-on]) video{opacity:0}.cine-frame video::-webkit-media-controls-panel{opacity:.2;transition:opacity .3s}.cine-frame:hover video::-webkit-media-controls-panel{opacity:1}.cine-frame:focus-within video::-webkit-media-controls-panel{opacity:1}.cine-credit{text-align:center;justify-items:center;gap:.9rem;margin-top:2.25rem;display:grid}.cine-label{letter-spacing:.34em;text-transform:uppercase;opacity:.6;margin:0;font-size:10px;font-weight:700}.cine-name{text-wrap:balance;letter-spacing:.02em;max-width:30ch;margin:0;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1}.cine-title{text-align:center;text-wrap:balance;opacity:0;pointer-events:none;place-items:center;margin:0;padding:0 8%;font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.05;display:grid;position:absolute;inset:0}.cine[data-armed]:not([data-arrived]) :is(.cine-screen,.cine-label,.cine-name){opacity:0}.cine[data-arrived] :is(.cine-screen,.cine-label,.cine-name,.cine-title){animation-fill-mode:both}.cine[data-arrived] .cine-label{animation:cine-rise .9s var(--ease) 1.5s both}.cine[data-arrived] .cine-name{animation:cine-rise 1s var(--ease) 1.85s both}.cine-in-fade[data-arrived] .cine-screen{animation:cine-fade 1.8s var(--slow) backwards}.cine-in-focus[data-arrived] .cine-screen{animation:cine-focus 2.4s var(--slow) backwards}.cine-in-focus[data-arrived] .cine-label{animation-delay:2s}.cine-in-focus[data-arrived] .cine-name{animation-delay:2.35s}.cine-in-title[data-arrived] .cine-title{animation:cine-title 2.8s var(--slow) both}.cine-in-title[data-arrived] .cine-screen{opacity:1}.cine-in-title[data-arrived] .cine-frame{animation:cine-fade 1.8s var(--slow) 2.5s both}.cine-in-title[data-arrived] .cine-label{animation-delay:3.9s}.cine-in-title[data-arrived] .cine-name{animation-delay:4.2s}.cine-in-typed[data-arrived] .cine-screen{animation:cine-fade 1.8s var(--slow) backwards}.cine-in-typed[data-arrived] .cine-name{animation:cine-type 1.5s steps(var(--chars,40), end) 1.9s both}@keyframes cine-fade{0%{opacity:0}}@keyframes cine-focus{0%{opacity:0;filter:blur(16px)brightness(.6)}25%{opacity:1}to{opacity:1;filter:none}}@keyframes cine-rise{0%{opacity:0;transform:translateY(.6rem)}}@keyframes cine-title{0%{opacity:0}25%,70%{opacity:1}to{opacity:0}}@keyframes cine-type{0%{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}.cine-player.is-docked{z-index:60;aspect-ratio:16/9;background:var(--cine-black,#12100c);border-radius:10px;width:min(28rem,60vw);transition:translate;animation:.36s cubic-bezier(.22,1,.36,1) cine-dock;position:fixed;overflow:hidden;box-shadow:0 2px 6px #00000040,0 22px 48px -12px #0000008c}.cine-at-br{inset:auto clamp(.75rem,2vw,1.5rem) clamp(4.5rem,9vh,5.5rem) auto}.cine-at-bl{inset:auto auto clamp(4.5rem,9vh,5.5rem) clamp(.75rem,2vw,1.5rem)}.cine-at-tr{inset:4.5rem clamp(.75rem,2vw,1.5rem) auto auto}.cine-at-tl{inset:4.5rem auto auto clamp(.75rem,2vw,1.5rem)}.cine-bar{z-index:2;cursor:grab;touch-action:none;opacity:0;background:linear-gradient(#0000008c,#0000);justify-content:flex-end;gap:.35rem;padding:.45rem;transition:opacity .2s;display:flex;position:absolute;inset:0 0 auto}.cine-bar:active{cursor:grabbing}.cine-player.is-docked:hover .cine-bar,.cine-player.is-docked:focus-within .cine-bar{opacity:1}@media (hover:none){.cine-bar{opacity:1}}.cine-btn{color:#ece6d8;cursor:pointer;background:#12100cb3;border-radius:999px;place-items:center;width:2rem;height:2rem;transition:background .15s;display:grid}.cine-btn:hover{background:#12100cf2}.cine-btn:focus-visible{outline-offset:2px;outline:2px solid #ece6d8}.cine-player.is-docked video::-webkit-media-controls-panel{opacity:0}.cine-player.is-docked:hover video::-webkit-media-controls-panel{opacity:1}@keyframes cine-dock{0%{opacity:0;transform:translateY(.75rem)}}@media (prefers-reduced-motion:reduce){.cine-player.is-docked{animation:none}}.cine-bar-inplace{cursor:default;pointer-events:none}.cine-bar-inplace .cine-btn{pointer-events:auto}.cine-player:hover .cine-bar-inplace,.cine-player:focus-within .cine-bar-inplace{opacity:1}.cine-frame:has(.is-docked):before{content:"";background:var(--poster) center / contain no-repeat;opacity:.18;position:absolute;inset:0}