@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- 1. CONFIGURACIÓN BASE --- */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    width: 100%;
}

/* --- 2. ANIMACIONES SIMPLES --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Clases de utilidad */
.animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }
.animate-slideInLeft { animation: slideInLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-slideInRight { animation: slideInRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-bounceIn { animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }

/* --- 3. FIX DE VISIBILIDAD (EL CAMBIO IMPORTANTE) --- */
/* Antes esto ocultaba el contenido. Ahora solo aplica una transición suave si cambia, pero es visible por defecto */
.reveal-on-scroll {
    opacity: 1; /* FORZAMOS QUE SE VEA */
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- 4. COMPONENTES UI --- */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Modal Carrito */
#cart-modal-container {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#cart-modal {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(100%);
}
#cart-modal-container.active #cart-modal {
    transform: translateX(0);
}

/* Badge Carrito */
#cart-count {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    transform: scale(0);
}
#cart-count.active {
    transform: scale(1);
    opacity: 1;
}

/* --- SCROLL REVEAL --- */
.reveal-on-scroll {
    opacity: 0; /* Empieza invisible */
    transform: translateY(30px); /* Un poco abajo */
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform;
}

.reveal-visible {
    opacity: 1; /* Se hace visible */
    transform: translateY(0); /* Sube a su posición original */
}