/**
 * Стили для интерактивного "убегающего" логотипа
 * Обеспечивают контраст на любом фоне
 */

/* Едва заметное покачивание на волнах */
.nav__logo {
    animation: gentle-wave 6s ease-in-out infinite;
}

@keyframes gentle-wave {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    20% {
        transform: translate(1px, -2px) rotate(1deg);
    }
    40% {
        transform: translate(-1px, -1px) rotate(-0.5deg);
    }
    60% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }
    80% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.logo-bouncing {
    /* Отключаем покачивание когда логотип летает */
    animation: none !important;

    /* Мощная тень для контраста на любом фоне */
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 16px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));

    /* Плавная анимация при движении */
    transition: filter 0.2s ease-out !important;
}

.logo-bouncing:hover {
    /* Усиленное свечение при попытке навестись */
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 1))
            drop-shadow(0 0 24px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 12px rgba(255, 100, 100, 0.4));
}

/* Дополнительный контраст для белого SVG */
.nav__logo {
    /* Убираем любые конфликтующие transition */
    transition-property: opacity, transform;
}

.nav__logo.logo-bouncing {
    /* Дополнительная обводка через множественные тени */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 1))
            drop-shadow(0 0 4px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 8px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 16px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));

    /* Небольшое увеличение для лучшей видимости */
    transform: scale(1.05);
}

/* Анимация появления эффекта */
@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9))
                drop-shadow(0 0 16px rgba(0, 0, 0, 0.7))
                drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1))
                drop-shadow(0 0 20px rgba(0, 0, 0, 0.8))
                drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
    }
}

/* Опциональная пульсация для большего внимания */
.logo-bouncing.logo-pulse {
    animation: logoGlow 2s ease-in-out infinite;
}