/* =======================================================
   🌟 BODY - Animación de entrada general
   ======================================================= */

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #f5f5f5;
    animation: fadeInBody 1s ease-in-out forwards;
}

@keyframes fadeInBody {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =======================================================
   🌟 HEADER - Entrada desde arriba
   ======================================================= */

header {
    width: 100%;
    position: relative;
    animation: slideDownHeader 1s ease-out forwards;
}

@keyframes slideDownHeader {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =======================================================
   🌟 BANNER - Fade in y zoom suave
   ======================================================= */

.banner {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: relative;
    animation: fadeZoomBanner 1.2s ease-out forwards;
}

@keyframes fadeZoomBanner {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =======================================================
   🌟 CONTENEDOR-MECANICA-DE-MOTOS PRINCIPAL
   - Animación de aparición al hacer scroll
   ======================================================= */

/* Clase para elementos ocultos inicialmente */
.scroll-anim {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

/* Cuando se agrega la clase "visible" */
.scroll-anim.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ejemplo específico para cada caja */
.caja-mecanica-1,
.caja-mecanica-2,
.caja-mecanica-3,
.caja-mecanica-4,
.caja-ubicacion {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

/* Al ser visible */
.caja-mecanica-1.visible,
.caja-mecanica-2.visible,
.caja-mecanica-3.visible,
.caja-mecanica-4.visible,
.caja-ubicacion.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive: Velocidad y distancia adaptadas */
@media (max-width: 480px) {
    .scroll-anim {
        transform: translateY(30px);
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    .scroll-anim {
        transform: translateY(40px);
    }
}

@media (min-width: 1025px) {
    .scroll-anim {
        transform: translateY(50px);
    }
}



/* =======================================================
   🌟 FOOTER - Fade up al aparecer
   ======================================================= */

footer {
    width: 100%;
    background-color: #222;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUpFooter 1s ease-out forwards;
    animation-delay: 0.6s;
}

@keyframes fadeUpFooter {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}