/* Эффект старого фильма (на основе профессионального решения) */

/* Основной контейнер эффекта */
.vhs-overlay {
    --filmbg: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}

.vhs-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Виньетка и свечение по краям */
.vhs-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 
        0 0 180px 0 var(--filmbg) inset, 
        0 0 40px 5px var(--filmbg) inset, 
        0 0 10px 10px var(--filmbg);
    opacity: 0.3;
    pointer-events: none;
}

/* Слой фильма */
.vhs-overlay .film {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(0.45px) drop-shadow(0 0 0 #fff1);
    pointer-events: none;
}

/* Вертикальные царапины на пленке */
.vhs-overlay .film::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 100%;
    padding-left: 100px;
    opacity: 0.5;
    animation: film-scratch 0.45s steps(1) infinite;
    background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37%);
    pointer-events: none;
}

/* Слой эффектов */
.vhs-overlay .effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(0.45px) drop-shadow(0 0 0 #fff1);
    pointer-events: none;
}

/* Дополнительные царапины */
.vhs-overlay .effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 30%;
    width: 120%;
    height: 100%;
    padding-left: 100px;
    opacity: 0.5;
    animation: effect-scratch 2s infinite;
    background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37%);
    pointer-events: none;
}

/* Зернистость */
.vhs-overlay .grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vhs-overlay .grain::after {
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    opacity: 0.25;
    background-image: 
        repeating-conic-gradient(var(--filmbg) 0%, transparent .00003%, transparent .0005%, transparent .00095%), 
        repeating-conic-gradient(var(--filmbg) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
    animation: grain 0.5s steps(1) infinite;
    pointer-events: none;
}

/* Анимация зернистости */
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 1%); }
    30% { transform: translate(-2%, -2%); }
    40% { transform: translate(3%, 3%); }
    50% { transform: translate(-3%, -3%); }
    60% { transform: translate(4%, 4%); }
    70% { transform: translate(-4%, -4%); }
    80% { transform: translate(2%, 2%); }
    90% { transform: translate(-3%, -3%); }
}

/* Анимация царапин на пленке */
@keyframes film-scratch {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    10% { transform: translateX(-1%); }
    20% { transform: translateX(1%); }
    30% { transform: translateX(-2%); opacity: 0.75; }
    40% { transform: translateX(3%); }
    50% { transform: translateX(-3%); opacity: 0.5; }
    60% { transform: translateX(8%); }
    70% { transform: translateX(-3%); }
    80% { transform: translateX(10%); opacity: 0.25; }
    90% { transform: translateX(-2%); }
}

/* Анимация эффектов царапин */
@keyframes effect-scratch {
    0% { transform: translateX(0); opacity: 0.75; }
    10% { transform: translateX(-1%); }
    20% { transform: translateX(1%); }
    30% { transform: translateX(-2%); }
    40% { transform: translateX(3%); }
    50% { transform: translateX(-3%); opacity: 0.5; }
    60% { transform: translateX(8%); }
    70% { transform: translateX(-3%); }
    80% { transform: translateX(10%); opacity: 0.25; }
    90% { transform: translateX(20%); }
    100% { transform: translateX(30%); }
}

/* Фильтр сепия для body */
body.vhs-mode {
    filter: sepia(0.75);
}

/* Инвертирование эффекта (опционально) */
body.vhs-mode.invert .vhs-overlay .film {
    filter: invert(1);
}