/* ================== АНИМАЦИЯ СТРЕЛКИ ================== */
@keyframes arrowBounce {
    0% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0.75;
    }

    30% {
        transform: rotate(45deg) translate(4px, 4px);
        opacity: 1;
    }

    60% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0.9;
    }

    100% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0.75;
    }
}

/* ================== ПЛАВАНИЕ КНОПКИ СКРОЛЛА ================== */
@keyframes floatScroll {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-6px);
    }
}

/* ================== АНИМАЦИИ ЛОГО ================== */
@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes logoGlowRotate {
    0% {
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) drop-shadow(10px 0 30px rgba(255, 220, 150, 0.4));
    }
    50% {
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) drop-shadow(-10px 0 30px rgba(255, 220, 150, 0.4));
    }
    100% {
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) drop-shadow(10px 0 30px rgba(255, 220, 150, 0.4));
    }
}

.hero-logo {
    animation: logoFloat 4s ease-in-out infinite, logoGlowRotate 6s ease-in-out infinite, logoFadeIn 0.9s ease forwards;
    animation-delay: 0s, 0s, 0.2s;
    opacity: 0;
    will-change: transform;
}

@keyframes logoFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ================== АНИМАЦИЯ САЙТА - ПОДЗАГОЛОВОК, КНОПКИ ================== */
.subtitle,
.actions {
    opacity: 0;
    animation: fadeUp 0.9s ease forwards;
}

.subtitle {
    animation-delay: 0.5s;
}

.actions {
    animation-delay: 0.8s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================== ПОЯВЛЕНИЕ ПУНКТОВ МЕНЮ ПО ОЧЕРЕДИ ================== */
.nav li {
    opacity: 0;
    transform: translateY(-12px);
    animation: navItemFade 0.7s ease forwards;
}

.nav li:nth-child(1) {
    animation-delay: 0.15s;
}

.nav li:nth-child(2) {
    animation-delay: 0.3s;
}

.nav li:nth-child(3) {
    animation-delay: 0.45s;
}

.nav li:nth-child(4) {
    animation-delay: 0.6s;
}

.nav li:nth-child(5) {
    animation-delay: 0.75s;
}

@keyframes navItemFade {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Убираем transform после завершения анимации */
.nav li {
    animation-fill-mode: forwards;
}

.nav li:nth-child(5) {
    animation: navItemFade 0.7s ease forwards;
    animation-delay: 0.75s;
}