/* СТАРТ переменные */
:root {
    /* Задаем толщину обводки в 1px. Можете менять это значение */
    --stroke: 3pt;
    --color-stroke: #000;
}

/* КОНЕЦ переменные */

.intro-fullscreen-bg {
    /* Картинка из файла */
    background-image: url('/image/intro/main-intro_v-0-0-2a.jpeg');
    /* background-image: url('../image/intro/main-intro_v-0-0-3a.webp'); */

    /* Ключевое свойство: 
       - cover: масштабирует изображение, сохраняя пропорции, 
       - чтобы оно полностью покрыло элемент.
       - Часть изображения будет обрезана. */
    background-size: cover;

    /* Центрируем изображение по центру экрана */
    background-position: center center;

    /* Картинка не должна повторяться */
    background-repeat: no-repeat;

    /* Фиксируем картинку при прокрутке (опционально) */
    background-attachment: fixed;

    /* Блок должен занимать весь вьюпорт */
    position: fixed;
    top: 0;
    left: 0;
    /* Ширина всего окна браузера */
    width: 100vw;
    /* Высота всего окна браузера */
    height: 100vh;
    /* Помещаем блок под основное содержимое страницы */
    z-index: -1;
}

.fullscreen-img {
    /* Картинка из файла */
    /* background-image: url('/image/intro/main-intro_v-0-0-2a.jpeg'); */
    /* background-image: url('../image/intro/main-intro_v-0-0-3a.webp'); */

    /* Ключевое свойство: 
       - cover: масштабирует изображение, сохраняя пропорции, 
       - чтобы оно полностью покрыло элемент.
       - Часть изображения будет обрезана. */
    /* background-size: cover; */

    /* Центрируем изображение по центру экрана */
    background-position: center center;

    /* Картинка не должна повторяться */
    background-repeat: no-repeat;

    /* Фиксируем картинку при прокрутке (опционально) */
    background-attachment: fixed;

    /* Блок должен занимать весь вьюпорт */
    position: fixed;
    top: 0;
    left: 0;
    /* Ширина всего окна браузера */
    width: 100vw;
    /* Высота всего окна браузера */
    height: 100vh;
    /* Помещаем блок под основное содержимое страницы */
    z-index: -1;
    object-fit: cover;
    /* Аналог background-size: cover для тега img */
}


/* 2. Центрирование контейнера */
.intro-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* 3. Базовый стиль для слова */
.intro-word {
    font-size: 32pt;
    /* Размер шрифта */
    /* color: #ecdccf; */
    /* color: #00f2ff49; */
    /* color: #965339; */
    color: #8a7b6f;
    /* цвет обводки */
    /* Белый цвет */

    background-color: #b19d8d;

    border-radius: 32pt;


    box-shadow:
        inset 0 0 40px -20px #b19d8d,
        /* 4. Необязательный: внешнее свечение для красоты */
        0 0 50px #b19d8d,
        /* 4. Необязательный: внешнее свечение для красоты */
        0 0 50px #b19d8d,
        /* 4. Необязательный: внешнее свечение для красоты */
        0 0 50px #b19d8d,
        /* 4. Необязательный: внешнее свечение для красоты */
        0 0 50px #b19d8d,
        /* 4. Необязательный: внешнее свечение для красоты */
        0 0 50px #b19d8d,
        /* 4. Необязательный: внешнее свечение для красоты */
        0 0 50px #b19d8d,
        /* 4. Необязательный: внешнее свечение для красоты */
        0 0 50px #b19d8d,
        /* 4. Необязательный: внешнее свечение для красоты */
        0 0 50px #b19d8d;

    opacity: 0.7;
    /* Общая полупрозрачность */
    font-weight: bold;
    letter-spacing: 5px;
    /* Расстояние между буквами */
}

/* 4. Стиль для каждой отдельной буквы */
.intro-letter {
    display: inline-block;
}

/* 5. Анимация "мигания" */
@keyframes blinkWave {
    0% {
        opacity: 1;
        text-shadow:
            calc(-1 * var(--stroke)) calc(-1 * var(--stroke)) 0 var(--color-stroke),
            /* Верх-лево */
            calc(1 * var(--stroke)) calc(-1 * var(--stroke)) 0 var(--color-stroke),
            /* Верх-право */
            calc(-1 * var(--stroke)) calc(1 * var(--stroke)) 0 var(--color-stroke),
            /* Низ-лево */
            calc(1 * var(--stroke)) calc(1 * var(--stroke)) 0 var(--color-stroke);
        /* Низ-право */
    }

    25% {
        opacity: 1;
        transform: scale(1.1);
        /* Небольшое увеличение при мигании */
        /* color: #00f2ff; */
        color: #b19d8d;
        /* color: #625f44; */
        /* color: #965339; */
        /* Цвет при активации */
    }

    50% {
        opacity: 1;
        /* transform: scale(1); */
        /* color: #ffffff; */
    }

    75% {
        opacity: 1;
        transform: scale(0.9);
        /* color: #ffffff; */
    }

    100% {}
}

/* 6. Задержка анимации для каждой буквы (создает волну) */
.intro-letter:nth-child(1) {
    animation-delay: 0s;
}

.intro-letter:nth-child(2) {
    animation-delay: 0.1s;
}

.intro-letter:nth-child(3) {
    animation-delay: 0.2s;
}

.intro-letter:nth-child(4) {
    animation-delay: 0.3s;
}

.intro-letter:nth-child(5) {
    animation-delay: 0.4s;
}

.intro-letter:nth-child(6) {
    animation-delay: 0.5s;
}

/* Применение анимации к буквам */
.intro-letter {
    animation-name: blinkWave;
    animation-duration: 3s;
    /* Длительность полного цикла */
    animation-iteration-count: infinite;
    /* Бесконечное повторение */
    animation-timing-function: ease-in-out;
}