/* ===========================================
   ФОНОВАЯ СЕТКА (ПСЕВДОЭЛЕМЕНТ)
   =========================================== */

/* Создаём сетку на фоне через ::before */
body::before {
    /* Пустой контент для отображения псевдоэлемента */
    content: '';
    /* Фиксированное положение — не скроллится */
    position: fixed;
    /* Привязка к верхнему левому углу */
    top: 0;
    left: 0;
    /* Растягиваем на весь экран */
    width: 100%;
    height: 100%;
    /* Два градиента создают перпендикулярные линии сетки */
    background-image:
        /* Горизонтальные линии */
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        /* Вертикальные линии */
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    /* Размер ячейки сетки 50x50 пикселей */
    background-size: 50px 50px;
    /* Под всем содержимым */
    z-index: 0;
    /* Клики проходят сквозь сетку */
    pointer-events: none;
    /* Плавное движение сетки */
    animation: gridMove 20s linear infinite;
}

/* Анимация движения сетки — создаёт эффект глубины */
@keyframes gridMove {
    /* Начальная позиция */
    0% { transform: translate(0, 0); }
    /* Сдвиг на одну ячейку — бесшовный переход */
    100% { transform: translate(50px, 50px); }
}

/* ===========================================
   СКАНИРУЮЩАЯ ЛИНИЯ
   =========================================== */

body::after {
    /* Пустой контент */
    content: '';
    /* Фиксированное положение */
    position: fixed;
    /* Начинаем за верхним краем */
    top: -2px;
    left: 0;
    /* На всю ширину */
    width: 100%;
    /* Высота линии */
    height: 2px;
    /* Градиент */
    background: linear-gradient(
        90deg,
        transparent,
        var(--neon-green),
        var(--neon-cyan),
        transparent
    );
    /* Поверх всего */
    z-index: 9999;
    /* Цикл 20 секунд: 5с движение + 15с пауза */
    animation: scanLine 20s linear infinite;
    /* Полупрозрачность */
    opacity: 0.4;
    /* Клики сквозь */
    pointer-events: none;
    /* Свечение */
    box-shadow: 0 0 15px var(--neon-green);
}

/* Линия бежит первые 25% времени, остальные 75% стоит за экраном */
@keyframes scanLine {
    /* Старт — за верхним краем */
    0% { top: -2px; }
    /* 25% от 20с = 5 секунд — линия дошла до низа */
    25% { top: 100vh; }
    /* Сразу перемещаем обратно за верхний край */
    25.1% { top: -2px; }
    /* Оставшиеся 75% = 15 секунд — линия стоит за экраном (пауза) */
    100% { top: -2px; }
}


/* ===========================================
   ПУЛЬСАЦИЯ УГЛОВЫХ МЕТОК
   =========================================== */

/* Анимация мерцания угловых линий карточки */
@keyframes cornerPulse {
    /* Начало и конец — полупрозрачные */
    0%, 100% { opacity: 0.4; }
    /* Середина — полностью видимые */
    50% { opacity: 1; }
}

/* ===========================================
   ИНДИКАТОР ПУЛЬСАЦИИ
   =========================================== */

/* Анимация пульсации для точек и индикаторов */
@keyframes pulse {
    /* Начало и конец — полная видимость */
    0%, 100% { opacity: 1; }
    /* Середина — затухание */
    50% { opacity: 0.3; }
}

/* ===========================================
   РАЗДЕЛ 8: БЕГУЩИЙ СВЕТ ПО КНОПКЕ
   =========================================== */

/* Анимация светового блика, пробегающего по кнопке */
@keyframes sweep {
    /* Начало — блик за левым краем */
    0% { left: -100%; }
    /* Конец — блик ушёл за правый край */
    100% { left: 100%; }
}

/* ===========================================
   ГЛИТЧ-ЭФФЕКТ (ПОМЕХИ)
   =========================================== */

/* Контейнер для глитч-текста */
.glitch {
    /* Относительное позиционирование для дочерних псевдоэлементов */
    position: relative;
}

/* Красная копия текста — смещена влево */
.glitch::before,
.glitch::after {
    /* Берём текст из атрибута data-text */
    content: attr(data-text);
    /* Абсолютное позиционирование поверх оригинала */
    position: absolute;
    /* Совпадает с оригиналом */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Красная копия — верхняя треть текста */
.glitch::before {
    /* Красный цвет для эффекта хроматической аберрации */
    color: var(--neon-red);
    /* Анимация подёргивания */
    animation: glitch1 3s infinite;
    /* Обрезаем — видна только верхняя часть */
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    /* Начальный сдвиг влево */
    transform: translate(-2px);
}

/* Голубая копия — нижняя треть текста */
.glitch::after {
    /* Голубой цвет */
    color: var(--neon-cyan);
    /* Анимация подёргивания с другой фазой */
    animation: glitch2 3s infinite;
    /* Обрезаем — видна только нижняя часть */
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    /* Начальный сдвиг вправо */
    transform: translate(2px);
}

/* Анимация подёргивания красной копии */
@keyframes glitch1 {
    /* Большую часть времени — без сдвига */
    0%, 90%, 100% { transform: translate(0); }
    /* Резкие микросдвиги создают эффект помех */
    92% { transform: translate(-3px, 1px); }
    94% { transform: translate(3px, -1px); }
    96% { transform: translate(-2px, 2px); }
}

/* Анимация подёргивания голубой копии */
@keyframes glitch2 {
    /* Аналогично, но с другими фазами */
    0%, 90%, 100% { transform: translate(0); }
    91% { transform: translate(2px, 1px); }
    93% { transform: translate(-3px, -1px); }
    95% { transform: translate(1px, 2px); }
}

/* ===========================================
   МИГАЮЩИЙ КУРСОР
   =========================================== */

/* Имитация текстового курсора терминала */
.blink-cursor {
    /* Строчно-блочный для задания размеров */
    display: inline-block;
    /* Ширина курсора */
    width: 8px;
    /* Высота курсора */
    height: 14px;
    /* Зелёный цвет курсора */
    background: var(--neon-green);
    /* Отступ от текста */
    margin-left: 4px;
    /* Анимация мигания */
    animation: blink 1s step-end infinite;
    /* Вертикальное выравнивание по центру строки */
    vertical-align: middle;
}

/* Анимация мигания — резкое включение/выключение */
@keyframes blink {
    /* Видимый в начале и конце */
    0%, 100% { opacity: 1; }
    /* Невидимый в середине */
    50% { opacity: 0; }
}

/* ===========================================
   КАСТОМНЫЙ СКРОЛЛБАР
   =========================================== */

/* Ширина полосы прокрутки */
::-webkit-scrollbar {
    width: 6px;
}

/* Фон трека прокрутки */
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

/* Ползунок прокрутки */
::-webkit-scrollbar-thumb {
    /* Полупрозрачный зелёный */
    background: rgba(0, 255, 136, 0.2);
    /* Скруглённые углы */
    border-radius: 3px;
}

/* Ползунок при наведении */
::-webkit-scrollbar-thumb:hover {
    /* Ярче при наведении */
    background: rgba(0, 255, 136, 0.4);
}

/* ===========================================
   ПЛАВАЮЩИЕ ЧАСТИЦЫ
   =========================================== */

/* Контейнер для частиц — на весь экран */
.particles {
    /* Фиксированное положение */
    position: fixed;
    /* Весь экран */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Под карточкой */
    z-index: 0;
    /* Клики проходят сквозь */
    pointer-events: none;
    /* Скрываем частицы за границами */
    overflow: hidden;
}

/* Каждая отдельная частица */
.particle {
    /* Абсолютное позиционирование внутри контейнера */
    position: absolute;
    /* Размер по умолчанию — переопределяется в JS */
    width: 2px;
    height: 2px;
    /* Зелёный цвет — переопределяется в JS */
    background: var(--neon-green);
    /* Круглая форма */
    border-radius: 50%;
    /* Начально невидима */
    opacity: 0;
    /* Анимация всплытия — длительность задаётся в JS */
    animation: particleFloat linear infinite;
}

/* Анимация всплытия частицы снизу вверх */
@keyframes particleFloat {
    /* Начало — внизу экрана, невидима, маленькая */
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
    }
    /* Быстро появляется */
    10% { opacity: 1; }
    /* Долго видна */
    90% { opacity: 1; }
    /* Конец — вверху экрана, исчезает */
    100% {
        opacity: 0;
        transform: translateY(-10vh) scale(1);
    }
}