/* Обзор продукта: легкий лайтбокс с плеером (templates/components/overview_film.html,
   логика static/js/overview_film.js) и петли-тизеры в карточках, которые его открывают.
   Язык плеера - как у блока «Ролик» на главной (lf-* в landing.css): стеклянная панель
   в кадре, главы - отметки на полосе перемотки (отдельного списка нет, решение владельца
   27.09). Страница под лайтбоксом затемнена и не листается - на экране только ролик. */

.ovf {
    --ovf-ind: #4f46e5;
    --ovf-pink: #ff48b0;
    --ovf-ease: cubic-bezier(.22, .75, .25, 1);
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.ovf[hidden] { display: none; }
.ovf-veil {
    position: absolute; inset: 0;
    background: rgba(13, 11, 32, .82);
    -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
    opacity: 0; transition: opacity .35s ease;
}
.ovf.is-open .ovf-veil { opacity: 1; }

/* Кадр по ширине экрана, но так, чтобы вместе с крестиком над ним влез по высоте */
.ovf-box {
    position: relative;
    width: min(1240px, calc(100vw - 64px), calc((100vh - 150px) * 16 / 9));
    width: min(1240px, calc(100vw - 64px), calc((100svh - 150px) * 16 / 9));
    opacity: 0; transform: translateY(16px) scale(.975);
    transition: opacity .35s ease, transform .55s var(--ovf-ease);
}
.ovf.is-open .ovf-box { opacity: 1; transform: none; }

.ovf-x {
    position: absolute; right: -6px; bottom: calc(100% + 12px); z-index: 2;
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 12px; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .08);
    cursor: pointer; transition: background .2s ease, color .2s ease;
}
.ovf-x:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.ovf-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ovf-x svg { width: 22px; height: 22px; }

.ovf-player { position: relative; touch-action: manipulation; }
.ovf-frame {
    position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; isolation: isolate;
    background: radial-gradient(120% 95% at 50% 42%, #eeeae1 0%, #e6e2d8 55%, #d9d5cc 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 60px 120px -50px rgba(0, 0, 0, .75);
}
.ovf-player.is-idle[data-state="playing"] .ovf-frame { cursor: none; }
.ovf-poster, .ovf-poster img, .ovf-video {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
}
.ovf-video { object-fit: contain; opacity: 0; transition: opacity .45s var(--ovf-ease); }
.ovf-video.is-on { opacity: 1; }

.ovf-frame::after {
    content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; border: 2.5px solid rgba(79, 70, 229, .18); border-top-color: var(--ovf-ind);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ovf-player[data-state="loading"] .ovf-frame::after, .ovf-player.is-waiting .ovf-frame::after {
    opacity: 1; transition-delay: .25s; animation: ovf-spin .8s linear infinite;
}
@keyframes ovf-spin { to { transform: rotate(360deg); } }

/* Пауза: большой знак по центру кадра, как у «Ролика» перед стартом */
.ovf-big {
    position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%) scale(.92);
    display: grid; place-items: center; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%;
    color: var(--ovf-ind); background: rgba(255, 255, 255, .94); cursor: pointer;
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 22px 44px -16px rgba(20, 16, 60, .55);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .35s var(--ovf-ease), visibility 0s linear .35s;
}
.ovf-big svg { width: 32px; height: 32px; fill: currentColor; }
.ovf-player[data-state="paused"] .ovf-big {
    opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .25s ease, transform .35s var(--ovf-ease);
}
.ovf-big:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ovf-ind), 0 22px 44px -16px rgba(20, 16, 60, .55); }

/* Субтитры: свои, над панелью; при спрятанной панели опускаются */
.ovf-cc {
    position: absolute; left: 50%; bottom: 92px; z-index: 3; transform: translateX(-50%);
    width: max-content; max-width: min(84%, 980px); text-align: center; pointer-events: none;
    transition: bottom .3s var(--ovf-ease);
}
.ovf-cc span {
    display: inline; padding: 4px 12px; border-radius: 10px; line-height: 1.6;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    font-size: clamp(15px, 1.55vw, 21px); font-weight: 600; letter-spacing: -.01em; color: #fff;
    background: rgba(18, 15, 46, .78);
}
.ovf-cc:empty, .ovf-player:not(.is-cc) .ovf-cc { display: none; }
.ovf-player.is-idle[data-state="playing"] .ovf-cc { bottom: 28px; }

.ovf-bar {
    position: absolute; left: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px); z-index: 4;
    display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px 0 6px; border-radius: 16px;
    color: #fff; background: rgba(22, 19, 54, .6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px -16px rgba(10, 8, 40, .55);
    transition: opacity .3s ease, transform .4s var(--ovf-ease);
}
.ovf-player[data-state="ended"] .ovf-bar,
.ovf-player.is-idle[data-state="playing"] .ovf-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ovf-btn {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 10px; color: inherit; background: transparent; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.ovf-btn:hover { background: rgba(255, 255, 255, .12); }
.ovf-btn:focus-visible, .ovf-seek:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.ovf-btn svg { width: 20px; height: 20px; }
.ovf-i-play, .ovf-i-pause { fill: currentColor; }
.ovf-i-play, .ovf-i-pause, .ovf-i-mute, .ovf-i-fsx { display: none; }
.ovf-player:is([data-state="playing"], [data-state="loading"]) .ovf-i-pause,
.ovf-player:is([data-state="paused"], [data-state="idle"], [data-state="ended"]) .ovf-i-play,
.ovf-player.is-muted .ovf-i-mute, .ovf-player.is-fs .ovf-i-fsx { display: block; }
.ovf-player.is-muted .ovf-i-vol, .ovf-player.is-fs .ovf-i-fs { display: none; }
.ovf-cc-btn { width: auto; min-width: 40px; padding: 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: rgba(255, 255, 255, .62); }
.ovf-cc-btn b { display: block; padding: 3px 5px; border: 1.5px solid currentColor; border-radius: 6px; line-height: 1; }
.ovf-player.is-cc .ovf-cc-btn { color: #fff; }
.ovf-player.is-cc .ovf-cc-btn b { background: #fff; color: #1b1840; border-color: #fff; }
.ovf-vol { flex: none; display: flex; align-items: center; }
.ovf-vol-range {
    --v: .75; width: 76px; height: 40px; margin: 0 10px 0 0; padding: 0;
    background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.ovf-vol-range::-webkit-slider-runnable-track {
    height: 4px; border-radius: 4px;
    background: linear-gradient(to right, #fff calc(var(--v) * 100%), rgba(255, 255, 255, .22) calc(var(--v) * 100%));
}
.ovf-vol-range::-webkit-slider-thumb {
    width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(10, 8, 40, .45); -webkit-appearance: none; appearance: none;
    transition: transform .15s ease;
}
.ovf-vol-range:hover::-webkit-slider-thumb, .ovf-vol-range:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }
.ovf-vol-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.ovf-vol-range::-moz-range-progress { height: 4px; border-radius: 4px; background: #fff; }
.ovf-vol-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(10, 8, 40, .45); }
.ovf-vol-range:focus { outline: none; }
.ovf-vol-range:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 8px; }
.ovf-time {
    flex: none; min-width: 40px; text-align: center; font-size: 13px; font-weight: 500;
    font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .94);
}
.ovf-time--dur { color: rgba(255, 255, 255, .58); }
.ovf-seek {
    --p: 0; position: relative; flex: 1; display: flex; align-items: center; height: 40px; margin: 0 6px;
    border-radius: 8px; cursor: pointer; touch-action: none;
}
.ovf-seek-track {
    position: relative; width: 100%; height: 4px; border-radius: 4px; overflow: hidden;
    background: rgba(255, 255, 255, .22); transition: height .2s ease;
}
.ovf-seek:hover .ovf-seek-track, .ovf-seek.is-drag .ovf-seek-track, .ovf-seek:focus-visible .ovf-seek-track { height: 6px; }
.ovf-seek-fill { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p)); }
.ovf-seek-track b { position: absolute; top: 0; bottom: 0; z-index: 1; width: 3px; margin-left: -1.5px; background: rgba(28, 24, 66, .78); }
.ovf-seek::after {
    content: ""; position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(10, 8, 40, .4);
    transform: scale(0); transition: transform .2s var(--ovf-ease); pointer-events: none;
}
.ovf-seek:hover::after, .ovf-seek.is-drag::after, .ovf-seek:focus-visible::after { transform: scale(1); }
.ovf-seek-tip {
    position: absolute; bottom: 42px; left: 0; padding: 5px 9px; border-radius: 8px; transform: translateX(-50%);
    font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
    color: #fff; background: rgba(22, 19, 54, .9); opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.ovf-seek:hover .ovf-seek-tip, .ovf-seek.is-drag .ovf-seek-tip { opacity: 1; }

.ovf-end {
    position: absolute; left: clamp(16px, 2.2vw, 28px); bottom: clamp(16px, 2.2vw, 28px); z-index: 4;
    display: flex; align-items: center; gap: 10px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .35s ease, transform .45s var(--ovf-ease), visibility 0s linear .45s;
}
.ovf-player[data-state="ended"] .ovf-end {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .35s ease .15s, transform .45s var(--ovf-ease) .15s;
}
.ovf-end-cta, .ovf-end-again {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
    font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: transform .3s var(--ovf-ease), box-shadow .3s ease;
}
.ovf-end-cta {
    font-weight: 700; color: #fff; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #db2777 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 30px -12px rgba(79, 70, 229, .7);
}
.ovf-end-again {
    color: #14123a; background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 0 0 1px rgba(20, 18, 58, .08), 0 12px 32px -14px rgba(40, 34, 120, .4);
}
.ovf-end-again svg { width: 18px; height: 18px; color: var(--ovf-ind); }
.ovf-end-cta:hover, .ovf-end-again:hover { transform: translateY(-1px); }
.ovf-end-cta:focus-visible, .ovf-end-again:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ovf-frame:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #0d0b20; }
.ovf-frame:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #0d0b20; }
.ovf-frame:fullscreen .ovf-cc { bottom: 104px; }

/* Страница под лайтбоксом не листается */
html.ovf-lock, html.ovf-lock body { overflow: hidden !important; }

@media (max-width: 767px) {
    .ovf { padding: 0; align-items: center; }
    .ovf-box { width: 100%; }
    .ovf-x { position: fixed; top: 10px; right: 10px; bottom: auto; background: rgba(255, 255, 255, .12); }
    .ovf-frame { border-radius: 0; }
    .ovf-bar { height: 48px; gap: 0; padding: 0 4px; border-radius: 14px; left: 8px; right: 8px; bottom: 8px; }
    .ovf-btn { width: 36px; height: 36px; }
    .ovf-time { min-width: 36px; font-size: 12px; }
    .ovf-time--dur { display: none; }
    .ovf-cc { bottom: 64px; max-width: 94%; }
    .ovf-cc span { font-size: 14px; padding: 3px 8px; }
    .ovf-big { width: 68px; height: 68px; }
    .ovf-big svg { width: 26px; height: 26px; }
    .ovf-end { right: 16px; }
    .ovf-end-cta, .ovf-end-again { height: 42px; padding: 0 16px; font-size: 14px; }
}
/* телефон боком: только кадр */
@media (max-height: 520px) and (orientation: landscape) {
    .ovf { padding: 0; }
    .ovf-box { width: min(100vw, calc(100vh * 16 / 9)); width: min(100vw, calc(100svh * 16 / 9)); }
    .ovf-frame { border-radius: 0; }
    .ovf-x { position: fixed; top: 8px; right: 8px; bottom: auto; background: rgba(13, 11, 32, .5); }
}

@media (hover: none) {
    .ovf-vol-range { display: none; }
    .ovf-btn:hover { background: transparent; }
    .ovf-seek::after { transform: scale(1); }
    .ovf-seek:hover:not(.is-drag) .ovf-seek-track { height: 4px; }
    .ovf-seek:hover:not(.is-drag) .ovf-seek-tip { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ovf-veil, .ovf-box, .ovf-video, .ovf-big, .ovf-bar, .ovf-cc, .ovf-end { transition: none; }
    .ovf-box { transform: none; }
}

/* ---------- петли-тизеры в карточках, которые открывают обзор ----------
   Видео лежит поверх постера той же картинки (первый кадр петли = постер), поэтому
   подмены не видно; появляется, только когда петля реально пошла. */
.ovf-tz {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.ovf-tz.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ovf-tz { display: none; } }