/* =========================================
   INTRO ANIMATION
   ========================================= */

/* Гарантия черного фона для всего документа */
html {
    background-color: #0e1011;
}

/* 
   ВАЖНО: Блокировка прокрутки пока идет анимация.
*/
body:not(.loaded) {
    overflow: hidden !important;
    height: 100vh;
}

/* 
   --- ИСПРАВЛЕНИЕ ---
   Скрываем хедер и main ТОЛЬКО НА МОБИЛЬНЫХ ТЕЛЕФОНАХ (меньше 991px).
   На ПК контент будет сразу готов за шторкой, что даст идеально плавный фейд.
   На телефонах скрываем, чтобы не было белых полос от адресной строки.
*/
@media (max-width: 991px) {
    body:not(.loaded) > header,
    body:not(.loaded) > main {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* =========================================
   PRELOADER STYLES
   ========================================= */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;       /* Для ПК */
    height: 100dvh;     /* Для мобильных */
    
    background-color: #0e1011;
    display: flex;
    justify-content: center;
    align-items: center;

    /*
       Используем переменную из style.css.
       99999 - запасное значение, если style.css не загрузился.
    */
    z-index: var(--z-preloader, 99999);
    
    /* Запрет скролла/зума на слое анимации */
    overscroll-behavior: none; 

    /* Плавное исчезновение */
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

/* Когда класс .loaded добавлен, шторка исчезает */
body.loaded .preloader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Текст */
.preloader-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 2px;
    display: flex;
}

/* Буквы */
.char {
    opacity: 0;
    display: inline-block;
    animation-name: heatwave;
    animation-fill-mode: forwards;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
    will-change: opacity, transform;
}

/* =========================================
   ANIMATION TIMINGS
   ========================================= */

@keyframes heatwave {
    0% { opacity: 0; color: #220000; text-shadow: 0 0 0 transparent; transform: scale(0.8); }
    40% { opacity: 1; color: #ff4500; text-shadow: 0 0 20px #ff4500; transform: scale(1.1); }
    100% { opacity: 1; color: #ffffff; text-shadow: 0 0 0 transparent; transform: scale(1); }
}

/* 
   ТАЙМИНГИ (С задержкой +30ms)
*/

.char:nth-child(1) { animation-delay: 0.11s; } /* F */
.char:nth-child(2) { animation-delay: 0.16s; } /* O */
.char:nth-child(3) { animation-delay: 0.25s; } /* R */
.char:nth-child(4) { animation-delay: 0.40s; } /* E */
.char:nth-child(5) { animation-delay: 0.63s; } /* D */

.char:nth-child(6) { animation-delay: 0.83s; } /* . */
.char:nth-child(7) { animation-delay: 1.53s; } /* I */
.char:nth-child(8) { animation-delay: 2.03s; } /* D */