/* public/css/style.css */

/* Animación de Fade-in suave al cargar */
.fade-in {
    opacity: 0;
    animation: fadeInAnimation 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efecto de flotación para el placeholder de la imagen principal */
.floating-element {
    animation: floatAnimation 8s ease-in-out infinite;
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-12px) rotate(1deg);
    }
    66% {
        transform: translateY(5px) rotate(-1deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Animación para la barra de carga / actividad */
@keyframes loading {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(200%); }
    100% { transform: translateX(-100%); }
}

/* Suavizado general para toda la página */
html {
    scroll-behavior: smooth;
}