/* 30.10 m82: preview „tylko kino” (scene/kino.js) — a lower-third caption over the films, no 3D-only controls. */
.kino :is(.hotspots,.scene-label,.service-card,.chapter-nav){display:none!important}
/* The CTA enters under the wipe mask at full opacity; its own fade/rise would double the transition. */
.kino .final-cta,.kino .final-cta.visible{transition:none!important;animation:none!important;transform:none!important}
.kino .kino-tools,.kino .film-progress{transition:opacity .4s}
.kino.final-active :is(.kino-tools,.film-progress){opacity:0;pointer-events:none}
.kino-caption{position:absolute;left:4.6vw;bottom:150px;z-index:11;max-width:min(780px,86vw);color:#fff;pointer-events:none;opacity:0;will-change:opacity,transform}
.kino-caption:before{content:'';position:absolute;inset:-70% -45vw -170px -4.6vw;z-index:-1;pointer-events:none;background:linear-gradient(to top right,rgba(2,8,12,.64),rgba(2,8,12,.3) 45%,transparent 72%)}
.kino-eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.88}
.kino-eyebrow .tiny-square{display:inline-block;width:7px;height:7px;background:var(--accent)}
.kino-title{margin:14px 0 0;font-size:clamp(34px,4.4vw,70px);font-weight:500;line-height:1.02;letter-spacing:-.05em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.kino-title em{font-style:normal;color:var(--accent)}
/* Lass stays a light site: ink on a pale scrim, as its film captions on main. */
.medical .kino-caption{color:#0f1d27}
.medical .kino-caption:before{background:linear-gradient(to top right,rgba(246,249,251,.92),rgba(246,249,251,.58) 45%,transparent 72%)}
.medical .kino-title{text-shadow:none}
.medical .kino-title em{color:#008a45}
@media(max-width:700px){.kino-caption{left:22px;right:22px;bottom:190px}.kino-title{font-size:clamp(30px,8.6vw,40px)}.kino-caption:before{inset:-60% -22px -190px -22px}}
@media(prefers-reduced-motion:reduce){.kino-caption{transform:none!important}}
/* Lass services: the approved cold-room photo in place of the 3D reefer (lasspharma/kino.html). */
.kino-cutaway{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%;border-radius:2px}
/* 30.10 m83: after the film a bobbing arrow points to the sections below, in the page language (kino.js kinoScrollText). */
.kino-scroll{position:absolute;left:50%;bottom:30px;z-index:16;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateX(-50%);color:#f3f5f4;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-align:center;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
/* Hidden (not only transparent) during the film: out of the tab order and the accessibility tree; it moves only once shown. */
.kino.final-active .kino-scroll{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .7s .5s,visibility 0s .5s}
.kino:not(.final-active) .kino-scroll-arrow{animation:none}
.kino-scroll-arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(243,245,244,.45);border-radius:50%;background:rgba(4,18,27,.35);backdrop-filter:blur(6px);animation:kino-bob 1.7s cubic-bezier(.45,0,.35,1) infinite}
.kino-scroll-arrow svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kino-scroll:hover .kino-scroll-arrow,.kino-scroll:focus-visible .kino-scroll-arrow{border-color:var(--accent)}
.medical .kino-scroll{color:#0f1d27}
.medical .kino-scroll-arrow{border-color:rgba(15,29,39,.25);background:rgba(246,249,251,.7)}
.medical .kino-scroll-arrow svg{stroke:#008a45}
@keyframes kino-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(max-width:700px){.kino-scroll{left:auto;right:18px;bottom:22px;transform:none;align-items:flex-end;text-align:right;white-space:normal;max-width:150px;font-size:9px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.kino-scroll-arrow{animation:none}}
/* Owner 31.10: LW end card — e-mail is the main action, the phone a readable second line under it. */
.final-cta .cta-email.cta-tel{display:inline-block;margin-top:14px;font-size:clamp(15px,1.1vw,18px);font-weight:600;color:#ffffffe6;text-decoration:none;border-bottom:1px solid #ffffff59;padding-bottom:3px}
.final-cta .cta-email.cta-tel:hover{color:#fff;border-bottom-color:#fff}
.final-cta .cta-tel .cta-alt{font-weight:500;color:#ffffffb3}