@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    animation: fadeIn 1s ease-out;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--blue-black), var(--dark-blue));
    z-index: 0;
}

.hero-background::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, var(--dark-blue) 70%);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.game-card,
.value-card,
.news-card {
    animation: scaleIn 0.5s ease-out;
}

.about-content h2,
.games-section h2,
.news-section h2,
.contact-section h2 {
    animation: slideIn 0.5s ease-out;
}

/* Animación del fondo del hero */
@keyframes heroBackground {
    0% {
        transform: scale(1.1) rotate(0deg);
    }
    50% {
        transform: scale(1) rotate(1deg);
    }
    100% {
        transform: scale(1.1) rotate(0deg);
    }
}

.hero-background {
    animation: heroBackground 20s infinite alternate ease-in-out;
}

/* Animación del parallax de fondo */
@keyframes gradientMove {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.parallax-bg {
    animation: gradientMove 15s infinite;
    background-size: 200% 200%;
}

/* Animación para los separadores */
@keyframes dividerMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 0;
    }
}

.section-divider::before {
    animation: dividerMove 10s linear infinite;
}