/* ==========================================================================
   battle.css — анимации выстрелов, взрывов, появление уровней
   Подключается после style.css через functions.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ПОЯВЛЕНИЕ УРОВНЕЙ ПРИ СКРОЛЛЕ
   Уровень «прилетает» сверху, как враг, появляющийся в начале волны.
   -------------------------------------------------------------------------- */

.tank-level {
    opacity: 0;
    transform: translateY(-40px);
}

.tank-level.is-revealed {
    opacity: 1;
    transform: translateY(0);
    animation: level-spawn 0.5s steps(8, end) both;
}

@keyframes level-spawn {
    0%   { transform: translateY(-60px); opacity: 0; }
    70%  { transform: translateY(0); opacity: 1; }
    85%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

.no-js .tank-level {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   2. ЭФФЕКТ ВЫСТРЕЛА ПРИ НАВЕДЕНИИ НА ЗАГОЛОВОК УРОВНЯ
   Жёлтая вспышка слева от названия, как выпущенный снаряд.
   -------------------------------------------------------------------------- */

.tank-level__title a {
    position: relative;
}

.tank-level__title a:hover::before {
    content: "●";
    position: absolute;
    left: -14px;
    color: var(--tank-yellow);
    animation: shot-travel 0.4s linear forwards;
}

@keyframes shot-travel {
    0%   { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-20px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   3. ВЗРЫВ/ИСКРЫ ПРИ НАЖАТИИ НА КНОПКУ
   Короткая вспышка около кнопки — эффект взрыва.
   -------------------------------------------------------------------------- */

.btn {
    overflow: hidden;
}

.btn:active {
    animation: tank-recoil 0.2s steps(2, end);
}

@keyframes tank-recoil {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   4. МИГАНИЕ РАДАРА
   Радар боя мигает, как сканер в игре, показывая врагов.
   -------------------------------------------------------------------------- */

.radar {
    animation: radar-pulse 1.5s ease-in-out infinite;
}

@keyframes radar-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   5. ВРАГ ДВИЖЕТСЯ ВВЕРХ ПО РАДАРУ
   При наведении на уровень враг на радаре движется вверх.
   -------------------------------------------------------------------------- */

.tank-level:hover .radar span.enemy {
    animation: enemy-move 0.6s ease-in-out;
}

@keyframes enemy-move {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-30px); }
    100% { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   6. ТАНК ПОВОРАЧИВАЕТСЯ
   Логотип танка немного «поворачивается» при наведении на шапку.
   -------------------------------------------------------------------------- */

.logo-tank {
    transition: transform 0.3s ease;
}

.site-header:hover .logo-tank {
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   7. ИНТЕНСИВНОСТЬ ЭКРАНА ПРИ ПРОКРУТКЕ (опционально)
   Цвет фона немного изменяется при прокрутке, как дрожание экрана боя.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tank-level,
    .tank-level.is-revealed {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .radar {
        animation: none;
        opacity: 1;
    }

    .logo-tank {
        transition: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}