/**
 * Watch page scroll performance — load after video-page.css on watch routes only.
 * backdrop-filter on many stacked panels forces full-page repaints while scrolling (janky “hang” feel).
 */

.ui-video {
    contain: layout style;
}

/* Isolate video player compositing; do not promote the whole page */
.ui-video .watch-player-shell,
.ui-video .watch-player-viewport,
.ui-video .watch-player-frame {
    contain: layout paint style;
    transform: translateZ(0);
}

html.txm-html-fs-lock .ui-video .watch-player-shell,
html.txm-html-fs-lock .ui-video .watch-player-viewport,
html.txm-html-fs-lock .ui-video .watch-player-frame {
    transform: none !important;
}

/* Below-the-fold blocks: skip layout/paint until near viewport */
.ui-video .watch-breadcrumb,
.ui-video .glass-card.watch-panel,
.ui-video .video-series-strip,
.ui-video .watch-episodes-block,
.ui-video .side-column {
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
}

.ui-video .watch-player-shell,
.ui-video .video-main-block.watch-player-shell,
.ui-video .watch-main-info {
    content-visibility: visible;
}

/* Remove expensive glass blur — use opaque panels (same look, smooth scroll) */
.ui-video .watch-breadcrumb,
.ui-video .video-main-info.watch-main-info,
.ui-video .watch-player-menu .video-watch-kv,
.ui-video .video-watch-tag,
.ui-video .action-bar--premium.action-bar--watch-toolbar,
.ui-video .glass-card.watch-panel,
.ui-video .video-player-empty__inner,
.ui-video .watch-rail-header__action {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Opaque dark panels — dark mode only (light uses --watch-* from theme-modes.css) */
body:not([data-theme="light"]) .ui-video .watch-breadcrumb {
    background: rgba(15, 23, 42, 0.92) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body:not([data-theme="light"]) .ui-video .video-main-info.watch-main-info {
    background: rgba(12, 18, 32, 0.96) !important;
}

body:not([data-theme="light"]) .ui-video .action-bar--premium.action-bar--watch-toolbar {
    background: linear-gradient(
        168deg,
        rgba(30, 41, 59, 0.92) 0%,
        rgba(2, 6, 18, 0.97) 100%
    ) !important;
}

body:not([data-theme="light"]) .ui-video .glass-card.watch-panel {
    background: rgba(12, 18, 32, 0.94) !important;
}

body:not([data-theme="light"]) .ui-video .watch-player-menu .video-watch-kv {
    background: rgba(30, 41, 59, 0.72) !important;
}

body:not([data-theme="light"]) .ui-video .video-watch-tag {
    background: rgba(30, 41, 59, 0.78) !important;
}

/* Light mode: opaque panels without blur (matches theme-modes --watch-* tokens) */
body[data-theme="light"] .ui-video .watch-breadcrumb {
    background: var(--watch-breadcrumb-bg) !important;
    border-color: var(--watch-breadcrumb-border);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .ui-video .video-main-info.watch-main-info {
    background: var(--watch-info-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 -12px 36px rgba(15, 23, 42, 0.04);
}

body[data-theme="light"] .ui-video .glass-card.watch-panel {
    background: var(--watch-panel-bg) !important;
}

/* Cheaper poster hover (no long scale repaint on scroll past player) */
.ui-video .watch-player-poster__img {
    transition: none;
}

@media (hover: hover) and (pointer: fine) {
    .ui-video .watch-player-poster:hover .watch-player-poster__img {
        transform: scale(1.02);
        transition: transform 0.35s ease;
    }
}

/* Pause decorative loops while user scrolls (class toggled by watch-scroll-perf.js) */
html.watch-page-scrolling .ui-video .watch-player-play-btn__svg,
html.watch-page-scrolling .ui-video .watch-tg-banner,
html.watch-page-scrolling .ui-video .watch-tg-banner__shine {
    animation-play-state: paused !important;
}

html.watch-page-scrolling .ui-video .video-watch-tag,
html.watch-page-scrolling .ui-video .action-btn--premium,
html.watch-page-scrolling .ui-video .watch-player-menu .video-watch-kv {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ui-video .watch-player-play-btn__svg,
    .ui-video .watch-tg-banner,
    .ui-video .watch-tg-banner__shine {
        animation: none !important;
    }
}