.cinema{--cinema-ink:#102c47;--cinema-muted:#526a7d;color:var(--cinema-ink);background:#f0f7fb;isolation:isolate;overflow:hidden}
.cinema__inner{max-width:1600px;margin:auto;min-height:calc(92svh - 120px);display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:clamp(24px,4vw,72px);padding:clamp(40px,6vw,88px) clamp(24px,5vw,88px)}
.cinema__copy{position:relative;z-index:2;min-width:0}
.cinema__eyebrow{font-size:11px;letter-spacing:.19em;font-weight:700;color:#366b8b;margin:0 0 26px;display:flex;align-items:center;gap:12px}
.cinema__eyebrow:before{content:"";width:26px;height:1px;background:currentColor}
.cinema h1{font-size:clamp(40px,4.7vw,76px);line-height:1.06;letter-spacing:-.055em;font-weight:600;margin:0;max-width:12ch;color:var(--cinema-ink)}
.cinema h1 em{font-style:normal;color:#39789f}
.cinema__intro{font-size:clamp(15px,1.15vw,18px);line-height:1.8;max-width:440px;color:var(--cinema-muted);margin:26px 0}
.cinema__actions{display:flex;gap:12px;flex-wrap:wrap}
.cinema__button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;padding:14px 20px;border:1px solid #aac2d2;border-radius:6px;font-size:13px;font-weight:600;color:var(--cinema-ink);transition:background .2s,transform .2s;text-decoration:none}
.cinema__button--primary{background:#173c59;color:#fff;border-color:#173c59}
.cinema__button:hover{background:#deedf6;transform:translateY(-2px)}.cinema__button--primary:hover{background:#275775}
.cinema__button span{transition:transform .2s}.cinema__button:hover span{transform:translateX(3px)}
.cinema__button:focus-visible,.cinema__pause:focus-visible{outline:3px solid #4b91bc;outline-offset:4px}
.cinema__promise{font-size:12px;line-height:1.8;color:var(--cinema-muted);margin-top:34px}.cinema__promise strong{color:var(--cinema-ink);font-weight:600}
.cinema__stage{position:relative;min-width:0;aspect-ratio:1/1.06;border-radius:180px 180px 12px 12px;background:linear-gradient(145deg,#fff,#daeaf4);overflow:hidden;box-shadow:0 32px 64px -48px #294e70}
.cinema__studio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 38%,#fff 0%,#e5f1f8 65%,#c9dde9 100%)}
.cinema__edition{position:absolute;top:8%;font-size:9px;letter-spacing:.2em;color:#58748a}
.cinema__poster{width:85%;height:75%;object-fit:contain;filter:drop-shadow(0 26px 18px #1a354329);transform:rotate(-7deg);animation:cinema-arrive 1.4s ease-out both}
.cinema__annotation{position:absolute;bottom:18%;left:8%;font-size:9px;letter-spacing:.03em;color:#163c55;background:#f8fcffeb;padding:10px 12px;border-radius:3px;display:flex;align-items:center;gap:9px}.cinema__annotation i{width:20px;height:1px;background:#7497ad}
.cinema__brand{position:absolute;bottom:7%;left:8%;display:flex;align-items:center;gap:14px}.cinema__brand img{width:105px;height:auto}.cinema__brand span{font-size:9px;color:#526a7d}
.cinema__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s;pointer-events:none}
.cinema.is-playing .cinema__video{opacity:1}
.cinema__reveal{position:absolute;inset:0;background:linear-gradient(135deg,#fff,#eaf4fa);display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .5s}
.cinema__reveal img{width:60%;height:auto;object-fit:contain;transform:scale(.96);transition:transform 1s}.cinema__reveal p{margin-top:20px;color:#536d80;font-size:12px;letter-spacing:.12em}
.cinema.is-revealing .cinema__reveal{opacity:1}.cinema.is-revealing .cinema__reveal img{transform:scale(1)}
.cinema__pause{position:absolute;right:16px;bottom:52px;z-index:3;border:1px solid #b8cddb;background:#f8fcfff0;color:#173c59;border-radius:30px;padding:9px 13px;font-size:11px;cursor:pointer}.cinema__pause[hidden]{display:none}
.cinema__caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:10px;padding:13px 22px;background:#173c59;color:#fff;font-size:9px;letter-spacing:.03em}
.cinema__industries{display:flex;justify-content:center;gap:clamp(18px,4vw,70px);padding:22px 24px;border-top:1px solid #ccdfe9;color:#47657c;font-size:11px;letter-spacing:.025em;flex-wrap:wrap}
[data-theme="packifybd-dark"] .cinema{--cinema-ink:#eef7ff;--cinema-muted:#b4c7d5;background:#0e2132}
[data-theme="packifybd-dark"] .cinema h1 em{color:#98c8e8}[data-theme="packifybd-dark"] .cinema__eyebrow{color:#9abed5}[data-theme="packifybd-dark"] .cinema__button--primary{background:#b9dcf2;color:#102c47;border-color:#b9dcf2}[data-theme="packifybd-dark"] .cinema__button:hover{background:#25445b}[data-theme="packifybd-dark"] .cinema__button--primary:hover{background:#dbedfa}[data-theme="packifybd-dark"] .cinema__industries{border-color:#2c4559;color:#b4c7d5}
@keyframes cinema-arrive{from{opacity:0;transform:translateY(16px) rotate(-5deg) scale(.97)}to{opacity:1;transform:rotate(-7deg)}}
@media(min-width:1600px){.cinema__stage{max-height:720px}}
@media(max-width:1023px){.cinema__inner{gap:24px;padding:48px 28px;grid-template-columns:1fr 1fr;min-height:auto}.cinema h1{font-size:clamp(36px,5vw,54px)}.cinema__stage{border-radius:100px 100px 10px 10px;aspect-ratio:.8}.cinema__button{font-size:12px}.cinema__brand span{display:none}.cinema__annotation{font-size:8px;left:5%;gap:5px}.cinema__caption{font-size:8px;padding:12px}}
@media(max-width:640px){.cinema__inner{grid-template-columns:1fr;padding:32px 22px 24px;gap:28px}.cinema h1{font-size:clamp(38px,10.5vw,60px);max-width:13ch}.cinema__eyebrow{font-size:9px;margin-bottom:18px}.cinema__intro{margin:20px 0;font-size:14px;line-height:1.7}.cinema__actions{gap:9px}.cinema__button{flex:1;padding:12px;font-size:11px;gap:8px}.cinema__promise{margin-top:20px;font-size:11px}.cinema__stage{aspect-ratio:1.06;border-radius:80px 80px 10px 10px}.cinema__industries{padding:18px 22px;gap:12px 22px;font-size:10px}.cinema__annotation{left:8%}.cinema__poster{width:78%}}
@media(max-width:640px){.cinema__brand{bottom:13%}.cinema__annotation{bottom:24%}}
.cinema__companion{position:absolute;right:5%;bottom:21%;width:48%;height:auto;filter:drop-shadow(0 20px 16px #173c5926);opacity:0;pointer-events:none}
.cinema__companion[hidden]{display:none}
/* A single composed product study, not a sequence of slides. Only transforms
   and opacity animate; no canvas, timers, video download or paid API required. */
.cinema.is-fallback-motion .cinema__poster{animation:cinema-product-study 18s ease-in-out infinite}
.cinema.is-fallback-motion .cinema__companion{animation:cinema-collection 18s ease-in-out infinite}
.cinema.is-fallback-motion .cinema__reveal{animation:cinema-brand-finish 18s ease-in-out infinite}
.cinema.is-fallback-motion .cinema__reveal img{animation:cinema-logo-settle 18s ease-in-out infinite}
.cinema.is-motion-paused .cinema__poster,.cinema.is-motion-paused .cinema__companion,.cinema.is-motion-paused .cinema__reveal,.cinema.is-motion-paused .cinema__reveal img{animation-play-state:paused}
@keyframes cinema-product-study{0%,6%{opacity:1;transform:rotate(-7deg) scale(1)}32%{opacity:1;transform:translate(-4%,-3%) rotate(-3deg) scale(1.04)}55%,70%{opacity:1;transform:translate(-16%,-9%) rotate(-7deg) scale(.78)}80%,96%{opacity:0;transform:translate(-18%,-10%) rotate(-5deg) scale(.72)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}
@keyframes cinema-collection{0%,30%{opacity:0;transform:translate(20%,12%) rotate(5deg) scale(.86)}50%,70%{opacity:1;transform:translate(0,0) rotate(-3deg) scale(1)}80%,100%{opacity:0;transform:translate(8%,8%) rotate(0) scale(.92)}}
@keyframes cinema-brand-finish{0%,76%,100%{opacity:0}84%,96%{opacity:1}}
@keyframes cinema-logo-settle{0%,76%,100%{transform:scale(.94)}86%,96%{transform:scale(1)}}
.cinema.cinema--footage{position:relative;--cinema-ink:#fff;--cinema-muted:#e0eaf0;background:#102536;display:flex;flex-direction:column;min-height:calc(100svh - 64px)}
.cinema--footage .cinema__inner{display:flex;flex:1;width:100%;min-height:700px;padding:80px clamp(24px,6vw,110px) 90px;align-items:center}
.cinema--footage .cinema__stage{position:absolute;inset:0;aspect-ratio:auto;max-height:none;border-radius:0;box-shadow:none;background:#102536}
.cinema--footage .cinema__stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,24,38,.88) 0%,rgba(9,30,45,.68) 40%,rgba(12,35,51,.18) 100%),linear-gradient(0deg,rgba(6,24,38,.7),transparent 30%);z-index:1}
.cinema--footage .cinema__video,.cinema--footage .cinema__poster{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);filter:blur(2px);padding:0;animation:none;background:#102536}
.cinema--footage .cinema__copy{max-width:730px;text-shadow:0 2px 20px #00101c35}
.cinema--footage h1{font-size:clamp(42px,5.2vw,80px);max-width:15ch;line-height:1.04}
.cinema.cinema--footage h1 em{color:#b8ddf5}
.cinema.cinema--footage .cinema__eyebrow{color:#c7e1f0}
.cinema--footage .cinema__intro{max-width:480px}
.cinema.cinema--footage .cinema__button{color:#fff;border-color:#c6ddea88;background:#ffffff0d;backdrop-filter:blur(8px);text-shadow:none}
.cinema.cinema--footage .cinema__button--primary{color:#132f45;background:#e7f4fc;border-color:#e7f4fc}
.cinema.cinema--footage .cinema__button:hover{background:#ffffff28}.cinema.cinema--footage .cinema__button--primary:hover{background:#fff}
.cinema.cinema--footage .cinema__industries{position:relative;z-index:2;color:#dceaf3;border-color:#c5deeb33;background:#0d263455;backdrop-filter:blur(10px);padding-right:160px}
.cinema--footage .cinema__pause{z-index:4;bottom:12px;right:24px;background:#102a3caa;border-color:#c6ddea66;color:#fff;backdrop-filter:blur(8px);min-height:36px}
.cinema--footage .cinema__caption{display:none}
.cinema--footage .cinema__reveal{z-index:2;background:transparent;align-items:flex-end;padding:0 7%;}
.cinema--footage .cinema__reveal img{width:28%;padding:22px;background:#f7fbffed;border-radius:8px}
.cinema--footage .cinema__reveal p{color:#e1edf5;width:28%;text-align:center}
@media(max-width:1023px){.cinema--footage .cinema__inner{min-height:700px;padding:64px 36px 80px}.cinema--footage .cinema__copy{max-width:580px}.cinema--footage .cinema__stage:after{background:linear-gradient(90deg,#061826dc,#0c233366),linear-gradient(0deg,#06182699,transparent 40%)}.cinema--footage .cinema__reveal{justify-content:flex-end;padding:0 28px 90px}.cinema--footage .cinema__reveal img{width:170px;padding:12px}.cinema--footage .cinema__reveal p{display:none}}
@media(max-width:640px){.cinema--footage .cinema__inner{min-height:650px;padding:52px 24px 116px}.cinema--footage h1{font-size:clamp(38px,10.5vw,58px)}.cinema--footage .cinema__video,.cinema--footage .cinema__poster{filter:blur(1.5px);object-position:55% center}.cinema--footage .cinema__industries{padding:18px 105px 18px 18px;gap:10px 16px;justify-content:flex-start;font-size:9px}.cinema--footage .cinema__pause{right:12px;bottom:20px;font-size:10px;padding:8px 10px}.cinema--footage .cinema__reveal{padding-bottom:115px}.cinema--footage .cinema__reveal img{width:145px}}
.cinema--footage .cinema__edition,.cinema--footage .cinema__annotation,.cinema--footage .cinema__brand,.cinema--footage .cinema__companion{display:none}
.cinema--footage.is-fallback-motion .cinema__poster{animation:none}
.cinema--footage.is-fallback-motion .cinema__reveal,.cinema--footage.is-fallback-motion .cinema__reveal img{animation:none}
@media(prefers-reduced-motion:reduce){.cinema *{animation:none!important;transition:none!important}.cinema__video,.cinema__reveal,.cinema__pause{display:none!important}}
/* Keep the outgoing decoded frame opaque under the incoming crossfade. */
.cinema{position:relative}
.cinema.is-playing .cinema__video,.cinema .cinema__video{opacity:0;transition:none}
.cinema.is-playing .cinema__video.is-current,.cinema .cinema__video.is-current{opacity:1}
.cinema--footage .cinema__stage{z-index:0;isolation:isolate}
.cinema--footage .cinema__stage:after{z-index:3}
.cinema--footage .cinema__reveal{z-index:2;transition:opacity 1.4s ease-in-out;background:linear-gradient(90deg,#0b22383d,#0b2238cc)}
.cinema--footage .cinema__reveal img{transition:transform 1.8s ease-out;transform:translateY(12px) scale(.94)}
.cinema--footage.is-revealing .cinema__reveal img{transform:translateY(0) scale(1)}
.cinema.is-playing .cinema__studio{visibility:hidden}
/* The large brand finale stays beneath the readable copy and its contrast overlay. */
.cinema--footage .cinema__reveal{align-items:center;justify-content:center;padding:clamp(28px,6vw,96px);background:radial-gradient(circle at 50% 42%,#c9dce7 0%,#7995a8 46%,#25465d 100%)}
.cinema--footage .cinema__reveal img{width:min(58vw,760px);max-height:68vh;padding:0;background:transparent;border-radius:0;filter:drop-shadow(0 24px 42px rgba(18,54,78,.16));transform:translateY(24px) scale(.88)}
.cinema--footage .cinema__reveal p{width:auto;margin-top:clamp(18px,3vh,34px);color:#31546c;text-align:center;font-size:clamp(11px,1.1vw,17px);letter-spacing:.22em}
@media(max-width:1023px){.cinema--footage .cinema__reveal{justify-content:center;padding:48px}.cinema--footage .cinema__reveal img{width:min(68vw,620px);max-height:62vh;padding:0}}
@media(max-width:640px){.cinema--footage .cinema__reveal{padding:28px}.cinema--footage .cinema__reveal img{width:84vw;max-height:64vh}}
