/* Анимация появления фона */
@keyframes fadeInBg {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes patternFloat {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes modalFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-50px); }
}

/* Анимации для героя */
.hero {
    animation: fadeInBg 0.8s ease-in-out forwards;
}

.hero h1 {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s forwards 0.2s;
}

.hero p {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s forwards 0.4s;
}

.hero-buttons {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s forwards 0.6s;
}

.hero-pattern {
    animation: patternFloat 30s linear infinite;
}

/* Анимации для модальных окон */
.modal-open {
    animation: modalFadeIn 0.3s ease-out forwards;
}

.modal-close {
    animation: modalFadeOut 0.3s ease-out forwards;
}

/* Анимация при прокрутке */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}

.game-card {
    transition: 
        transform 0.3s ease-out, 
        box-shadow 0.3s ease-out;
}