/*
 * Лаборатория Кошмарского — horror.css
 * Эффекты: проявление фото при наведении, виньетка, глитч заголовков, мигание, подглядывание.
 * Подключать ПОСЛЕ style.css. Работает в паре с js/horror.js.
 */

/* ===== ПРОЯВЛЕНИЕ ПРИ НАВЕДЕНИИ ===== */

/* position сюда намеренно не пишем: у слайдов он absolute, и его нельзя перебить.
   Если у элемента position: static, horror.js сам поставит relative */
.kl-haunt {
    overflow: hidden;
}

/* Обертка вокруг <img>: убираем зазор под картинкой, который дает inline-строка.
   Обесцвечиваем саму картинку: фильтр на <img> работает в любом браузере */
.kl-haunt > img {
    display: block;
    transition: filter .7s ease-out;
}


/* Слой поверх картинки, но под текстом слайда (см. z-index ниже) */
.kl-haunt__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .7s ease-out;
}

/* Включение резкое, за 80 мс. Выключение плавное (.7s из правила выше) */
.kl-haunt.is-haunted > .kl-haunt__layer,
.kl-haunt--active > .kl-haunt__layer {
    opacity: 1;
    transition: opacity .08s linear;
}

/* Содержимое, которое должно остаться цветным и кликабельным, поднимаем над слоем */
.hero__slide.kl-haunt > .container,
.kl-haunt > .kl-above {
    position: relative;
    z-index: 2;
}

/* Полоса-сбой: один раз проезжает сверху вниз и показывает кадр в негативе.
   mix-blend-mode: difference — белый цвет в этом режиме переворачивает цвета под собой */
.kl-haunt__tear {
    position: absolute;
    left: -2%;
    width: 104%;
    height: 9%;
    top: -12%;
    background: #E8EAE6;
    mix-blend-mode: difference;
    opacity: 0;
}

.kl-haunt.is-haunted .kl-haunt__tear {
    animation: kl-tear .55s steps(7) both;
}

@keyframes kl-tear {
    0%   { top: -12%; transform: translateX(0); opacity: .9; }
    30%  { transform: translateX(8px); }
    60%  { transform: translateX(-5px); }
    99%  { opacity: .9; }
    100% { top: 108%; transform: translateX(0); opacity: 0; }
}

/* Отладка: эффект сразу в конечном виде, без анимаций */
.kl-haunt--active .kl-haunt__layer {
    transition: none;
}



/* ===== ВИНЬЕТКА ПО КРАЯМ ЭКРАНА ===== */
.kl-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(2, 6, 6, .6) 100%);
    /* Сгущается очень медленно; итоговую прозрачность ставит JS */
    transition: opacity 60s linear;
}


/* ===== ЗАТЕМНЕНИЕ СТРАНИЦЫ («моргнул свет») ===== */
/* Два коротких провала за 0.9 с — это меньше трех вспышек в секунду (норма WCAG 2.3.1) */
.kl-dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9002;
    pointer-events: none;
    background: #030606;
    opacity: 0;
}

.kl-dim.is-on {
    animation: kl-dim .9s linear both;
}

@keyframes kl-dim {
    0%   { opacity: 0; }
    12%  { opacity: .38; }
    30%  { opacity: .08; }
    62%  { opacity: .3; }
    100% { opacity: 0; }
}


/* ===== ГЛИТЧ ЗАГОЛОВКОВ ===== */
/* steps(1) — кадры меняются скачком, без плавного перехода, как сбой картинки */
.kl-glitch {
    animation: kl-glitch .3s steps(1) both;
}

@keyframes kl-glitch {
    0% {
        transform: translate(2px, 0);
        text-shadow: -2px 0 rgba(107, 26, 30, .85), 2px 0 rgba(30, 110, 120, .6);
    }
    34% {
        transform: translate(-2px, 1px) skewX(-6deg);
        text-shadow: 3px 0 rgba(107, 26, 30, .85), -3px 0 rgba(30, 110, 120, .6);
    }
    67% {
        transform: translate(1px, -1px);
        text-shadow: -1px 0 rgba(107, 26, 30, .85), 1px 0 rgba(30, 110, 120, .6);
    }
    100% {
        transform: none;
        text-shadow: none;
    }
}


/* ===== ПОДГЛЯДЫВАНИЕ ИЗ-ЗА КРАЯ ЭКРАНА ===== */
.kl-peek {
    position: fixed;
    z-index: 9001;
    max-height: 45vh;
    max-width: 40vw;
    pointer-events: none;
    /* Выглядывает медленно, а прячется быстро — это задает .is-hiding ниже */
    transition: transform 2.8s cubic-bezier(.3, .1, .3, 1);
}

.kl-peek--left {
    left: 0;
    top: 30%;
    transform: translateX(-105%) rotate(8deg);
}

.kl-peek--left.is-shown {
    transform: translateX(-55%) rotate(8deg);
}

.kl-peek--right {
    right: 0;
    top: 30%;
    transform: translateX(105%) rotate(-8deg);
}

.kl-peek--right.is-shown {
    transform: translateX(55%) rotate(-8deg);
}

.kl-peek--bottom {
    bottom: 0;
    left: 60%;
    transform: translateY(105%);
}

.kl-peek--bottom.is-shown {
    transform: translateY(50%);
}

.kl-peek.is-hiding {
    transition-duration: .25s;
    transition-timing-function: ease-in;
}


/* ===== КНОПКА ЗВУКА ===== */
/* Внутри .topbar__right ссылка сама берет стили соседей, тут только мелочи */
.kl-mute {
    cursor: pointer;
    white-space: nowrap;
}

.kl-mute i {
    width: 16px;
    text-align: center;
}

/* Запасной вариант, если в шапке не нашлось места: маленькая кнопка в углу */
.kl-mute--fixed {
    position: fixed;
    left: 15px;
    bottom: 15px;
    z-index: 9003;
    padding: 6px 10px;
    border: 0;
    border-radius: 3px;
    background: #101313;
    color: #B5B5B5;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
}

.kl-mute--fixed:hover {
    color: #ffffff;
    text-decoration: none;
}


/* ===== КУРСОР ===== */
/* Обычная стрелка, но темно-красная. Вторая строка — запасной курсор, если картинка не загрузилась */
.kl-cursor,
.kl-cursor body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Cpath d='M2 1 L2 19 L6.5 14.8 L9.6 21.6 L12.4 20.4 L9.4 13.8 L15.6 13.6 Z' fill='%235E1217' stroke='%23D8D4CD' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='4.2' cy='22' r='1.4' fill='%237A191F'/%3E%3C/svg%3E") 2 1, auto;
}


/* ===== УМЕНЬШЕНИЕ ДВИЖЕНИЯ ===== */
@media (prefers-reduced-motion: reduce) {
    .kl-glitch,
    .kl-dim.is-on,
    .kl-haunt.is-haunted .kl-haunt__tear {
        animation: none;
    }

    .kl-peek,
    .kl-vignette,
    .kl-haunt__layer {
        transition: none;
    }
}