/* ============================================================================
 * shorts/cinematic.css — video-feel layer (CSS only, без MP4).
 *
 * Цель: сделать чтобы каждый short выглядел как video, а не CSS-animation.
 * Slojem visual эффекты которые меняют perception:
 *   • Color grading (LUT-imitation): saturate + contrast + slight cool tint
 *   • Vignette overlay (radial gradient затемнение по краям)
 *   • Film grain (SVG noise + mix-blend-mode overlay, lazy)
 *   • Ken Burns camera dolly-in на Scene 1 (intake)
 *   • Motion blur на scene transitions (filter: blur(3px) на is-leaving)
 *   • Light leaks (warm flickering corner) на Scene 5 (verdict)
 *   • Anamorphic lens flare на verdict reveal
 *
 * Все эффекты opt-out на .is-low-end (slow Android, 2GB RAM, 3G connection).
 * Reduced-motion aware.
 * ========================================================================== */

/* ─── Color grading (cinema LUT imitation) ───────────────────────────────── */
/* v0.25.15: filter применяется ТОЛЬКО к .is-active short (не ко всем 5 mounted).
   Раньше filter chain (saturate+contrast+hue-rotate) на каждом из 5 stages =
   5 GPU composite layers с filter-pass = stutter при swipe (Embla двигает
   trackEl translate3d, каждый кадр требует repaint всех 5 layers). */
.pb-shorts-viewport.is-cinematic .pb-short.is-active .pb-short-stage {
    filter:
        saturate(1.10)
        contrast(1.06)
        hue-rotate(-2deg);
    transition: filter 0.40s ease;
}

/* Per-verdict subtle tint accent — также только на active */
.pb-shorts-viewport.is-cinematic .pb-short.is-active[data-verdict="avoid"] .pb-short-stage {
    filter:
        saturate(1.15)
        contrast(1.10)
        hue-rotate(-3deg);
}
.pb-shorts-viewport.is-cinematic .pb-short.is-active[data-verdict="trusted"] .pb-short-stage {
    filter:
        saturate(1.10)
        contrast(1.06)
        hue-rotate(2deg);
}

/* ─── Vignette overlay ───────────────────────────────────────────────────── */
.pb-shorts-viewport.is-cinematic::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 100% 100% at center,
            transparent 35%,
            rgba(0, 0, 0, 0.32) 75%,
            rgba(0, 0, 0, 0.55) 100%
        );
    mix-blend-mode: multiply;
}

/* ─── Film grain (SVG noise) ─────────────────────────────────────────────── */
.pb-shorts-grain {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background-image: url("/static/shorts/grain.svg");
    background-size: 256px 256px;
    background-repeat: repeat;
    opacity: 0.04;
    mix-blend-mode: overlay;
    /* Subtle drift анимация чтобы grain «двигался» как film */
    animation: pb-grain-drift 1.2s steps(8) infinite;
    will-change: transform;
}

@keyframes pb-grain-drift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3%, 1%); }
    50%  { transform: translate(2%, -2%); }
    75%  { transform: translate(-1%, 2%); }
    100% { transform: translate(0, 0); }
}

/* ─── Ken Burns camera dolly-in на Scene 1 ───────────────────────────────── */
/* Применяется к Scene 1 (intake) когда .is-active у parent .pb-short */
.pb-shorts-viewport.is-cinematic .pb-short.is-active .pb-inv-s1 {
    animation: pb-ken-burns 1.5s ease-out forwards;
    transform-origin: 50% 60%;
}

@keyframes pb-ken-burns {
    0%   { transform: scale(1.0) translateX(0); }
    100% { transform: scale(1.06) translateX(-1.5%); }
}

/* ─── Motion blur на scene transitions ───────────────────────────────────── */
.pb-shorts-viewport.is-cinematic .pb-inv-scene.is-leaving {
    filter: blur(3px) brightness(0.85);
    transition: filter 0.18s ease;
}

/* ─── Light leaks (warm corner flicker) на Scene 5 ───────────────────────── */
.pb-shorts-viewport.is-cinematic .pb-short.is-active .pb-inv-s5::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 60%;
    height: 60%;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(
        ellipse 60% 60% at top right,
        rgba(255, 180, 100, 0.18) 0%,
        rgba(255, 100, 80, 0.08) 30%,
        transparent 65%
    );
    mix-blend-mode: screen;
    animation: pb-light-leak 1.2s ease-in-out;
    opacity: 0;
}

@keyframes pb-light-leak {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    20%  { opacity: 1; transform: translate(-2%, 1%) scale(1.05); }
    50%  { opacity: 0.6; transform: translate(1%, -1%) scale(1.1); }
    80%  { opacity: 0.3; transform: translate(-1%, 1%) scale(1.05); }
    100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* ─── Anamorphic lens flare на verdict reveal ────────────────────────────── */
.pb-shorts-viewport.is-cinematic .pb-short.is-active .pb-inv-s5-big::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(76, 226, 193, 0.55) 50%,
        transparent 100%
    );
    box-shadow: 0 0 16px 2px rgba(76, 226, 193, 0.35);
    transform: translateY(-50%) rotate(-0.5deg);
    pointer-events: none;
    z-index: 5;
    animation: pb-lens-flare 0.6s ease-out 0.2s both;
    filter: blur(1px);
}

.pb-shorts-viewport.is-cinematic .pb-short[data-verdict="avoid"].is-active .pb-inv-s5-big::after {
    background: linear-gradient(90deg, transparent, rgba(255, 93, 143, 0.55), transparent);
    box-shadow: 0 0 16px 2px rgba(255, 93, 143, 0.35);
}
.pb-shorts-viewport.is-cinematic .pb-short[data-verdict="caution"].is-active .pb-inv-s5-big::after {
    background: linear-gradient(90deg, transparent, rgba(255, 201, 74, 0.55), transparent);
    box-shadow: 0 0 16px 2px rgba(255, 201, 74, 0.35);
}

@keyframes pb-lens-flare {
    0%   { opacity: 0; transform: translateY(-50%) rotate(-0.5deg) scaleX(0.3); }
    50%  { opacity: 1; transform: translateY(-50%) rotate(-0.5deg) scaleX(1.05); }
    100% { opacity: 0; transform: translateY(-50%) rotate(-0.5deg) scaleX(1); }
}

/* ─── Low-end mode: disable expensive cinematic effects ──────────────────── */
.pb-shorts-viewport.is-low-end .pb-short-stage { filter: none; }
.pb-shorts-viewport.is-low-end::after { display: none; }
.pb-shorts-viewport.is-low-end .pb-shorts-grain { display: none; }
.pb-shorts-viewport.is-low-end .pb-inv-scene.is-leaving { filter: none; }
.pb-shorts-viewport.is-low-end .pb-short.is-active .pb-inv-s1 { animation: none; }
.pb-shorts-viewport.is-low-end .pb-short.is-active .pb-inv-s5::before,
.pb-shorts-viewport.is-low-end .pb-short.is-active .pb-inv-s5-big::after { display: none; }

/* ─── Reduced-motion: tone down everything ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pb-shorts-grain { animation: none; }
    .pb-shorts-viewport.is-cinematic .pb-short.is-active .pb-inv-s1 { animation: none; transform: none; }
    .pb-shorts-viewport.is-cinematic .pb-inv-scene.is-leaving { filter: none; }
    .pb-shorts-viewport.is-cinematic .pb-short.is-active .pb-inv-s5::before,
    .pb-shorts-viewport.is-cinematic .pb-short.is-active .pb-inv-s5-big::after {
        animation: none;
        opacity: 0;
    }
}