/* css/atmosphere.css - Efectos Atmosféricos y Paletas */

/* --- 1. PALETAS DE COLORES DINÁMICAS (Variables CSS) --- */
:root {
    --transition-speed: 1.5s; /* Cambio suave entre climas */
}

/* MODO CALOR (Heat): Rojos, Naranjas y Amarillos quemados */
body.mode-heat {
    --neon-cyan: #ff2a00;       /* Rojo Neón Intenso */
    --neon-magenta: #ffae00;    /* Naranja Fuego */
    --glass-bg: rgba(50, 10, 0, 0.85); /* Fondo rojizo oscuro */
}

/* MODO LLUVIA (Rain): Azules profundos, Cian y Púrpura eléctrico */
body.mode-rain {
    --neon-cyan: #00f2ff;       /* Cian Eléctrico */
    --neon-magenta: #bc13fe;    /* Púrpura Blade Runner */
    --glass-bg: rgba(0, 10, 20, 0.9); /* Fondo azulado oscuro */
}

/* MODO NOCHE (Night): Minimalista, Negros profundos y Verde/Plata */
body.mode-night {
    --neon-cyan: #00ff88;       /* Verde Matrix/Tóxico */
    --neon-magenta: #ffffff;    /* Blanco Puro */
    --glass-bg: rgba(0, 0, 0, 0.95); /* Negro casi total */
}

/* --- 2. CAPA DE LLUVIA (Cyberpunk Rain) --- */
#rain-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; /* Detrás del contenido pero sobre el fondo */
    pointer-events: none; /* Dejar pasar los clics */
    background: url('https://raw.githubusercontent.com/yagoestevez/fcc-portfolio/master/src/Images/rain.png'); /* Textura ligera de lluvia */
    animation: rain-fall 0.8s linear infinite;
    opacity: 0;
    transition: opacity 2s ease;
    display: none; /* Oculto por defecto */
}

body.mode-rain #rain-overlay {
    display: block;
    opacity: 0.6;
}

@keyframes rain-fall {
    from { background-position: 0% 0%; }
    to { background-position: 10% 100%; }
}

/* --- 3. EFECTO DE CALOR (Heat Haze) --- */
/* Aplicaremos esto al Hero Image para que parezca que vibra por el calor */
body.mode-heat .hero-bg {
    animation: heat-haze 8s infinite ease-in-out;
    filter: contrast(1.2) brightness(1.1) sepia(0.3);
}

@keyframes heat-haze {
    0% { transform: scale(1.1); opacity: 0.8; }
    50% { transform: scale(1.12); opacity: 0.7; }
    100% { transform: scale(1.1); opacity: 0.8; }
}

/* --- 4. TRANSICIONES GLOBALES --- */
/* Hacemos que los cambios de color no sean bruscos */
body, .btn-primary, .card, h2, h3, span {
    transition: color var(--transition-speed), 
                background-color var(--transition-speed), 
                border-color var(--transition-speed), 
                box-shadow var(--transition-speed);
}/* css/atmosphere.css - Efectos Atmosféricos y Paletas */

/* --- 1. PALETAS DE COLORES DINÁMICAS (Variables CSS) --- */
:root {
    --transition-speed: 1.5s; /* Cambio suave entre climas */
}

/* MODO CALOR (Heat): Rojos, Naranjas y Amarillos quemados */
body.mode-heat {
    --neon-cyan: #ff2a00;       /* Rojo Neón Intenso */
    --neon-magenta: #ffae00;    /* Naranja Fuego */
    --glass-bg: rgba(50, 10, 0, 0.85); /* Fondo rojizo oscuro */
}

/* MODO LLUVIA (Rain): Azules profundos, Cian y Púrpura eléctrico */
body.mode-rain {
    --neon-cyan: #00f2ff;       /* Cian Eléctrico */
    --neon-magenta: #bc13fe;    /* Púrpura Blade Runner */
    --glass-bg: rgba(0, 10, 20, 0.9); /* Fondo azulado oscuro */
}

/* MODO NOCHE (Night): Minimalista, Negros profundos y Verde/Plata */
body.mode-night {
    --neon-cyan: #00ff88;       /* Verde Matrix/Tóxico */
    --neon-magenta: #ffffff;    /* Blanco Puro */
    --glass-bg: rgba(0, 0, 0, 0.95); /* Negro casi total */
}

/* --- 2. CAPA DE LLUVIA (Cyberpunk Rain) --- */
#rain-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; /* Detrás del contenido pero sobre el fondo */
    pointer-events: none; /* Dejar pasar los clics */
    background: url('https://raw.githubusercontent.com/yagoestevez/fcc-portfolio/master/src/Images/rain.png'); /* Textura ligera de lluvia */
    animation: rain-fall 0.8s linear infinite;
    opacity: 0;
    transition: opacity 2s ease;
    display: none; /* Oculto por defecto */
}

body.mode-rain #rain-overlay {
    display: block;
    opacity: 0.6;
}

@keyframes rain-fall {
    from { background-position: 0% 0%; }
    to { background-position: 10% 100%; }
}

/* --- 3. EFECTO DE CALOR (Heat Haze) --- */
/* Aplicaremos esto al Hero Image para que parezca que vibra por el calor */
body.mode-heat .hero-bg {
    animation: heat-haze 8s infinite ease-in-out;
    filter: contrast(1.2) brightness(1.1) sepia(0.3);
}

@keyframes heat-haze {
    0% { transform: scale(1.1); opacity: 0.8; }
    50% { transform: scale(1.12); opacity: 0.7; }
    100% { transform: scale(1.1); opacity: 0.8; }
}

/* --- 4. TRANSICIONES GLOBALES --- */
/* Hacemos que los cambios de color no sean bruscos */
body, .btn-primary, .card, h2, h3, span {
    transition: color var(--transition-speed), 
                background-color var(--transition-speed), 
                border-color var(--transition-speed), 
                box-shadow var(--transition-speed);
}

/* --- 5. BOTÓN MÁGICO (Interacción Viva) --- */
.btn-neon-action {
    background: rgba(0, 0, 0, 0.4); /* Cristal oscuro */
    border: 1px solid var(--neon-cyan); /* Borde del color del clima */
    color: var(--neon-cyan);
    padding: 12px 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px; /* Píldora futurista */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    
    /* Animación de "respiración" para llamar la atención */
    animation: neon-pulse 3s infinite alternate;
}

/* Efecto Hover: Se llena de luz sólida */
.btn-neon-action:hover {
    background: var(--neon-cyan);
    color: #000; /* Texto negro para contraste máximo */
    box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
    transform: translateY(-2px);
}

.btn-neon-action i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-neon-action:hover i {
    transform: translateX(5px); /* La flecha se mueve invitando a entrar */
}

@keyframes neon-pulse {
    0% {
        box-shadow: 0 0 5px var(--neon-cyan), inset 0 0 0px var(--neon-cyan);
    }
    100% {
        box-shadow: 0 0 15px var(--neon-cyan), inset 0 0 5px var(--neon-cyan);
    }
}

/* --- MEJORAS DE ATMÓSFERA Y UX --- */

/* 1. Jerarquía Visual para Platos Estrella */
.item-estrella {
    border: 1px solid #D4AF37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    animation: pulseNeon 3s infinite alternate;
    position: relative;
}

@keyframes pulseNeon {
    from { box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
    to { box-shadow: 0 0 25px rgba(212, 175, 55, 0.6); }
}

/* 2. Skeleton Screen (Carga percibida instantánea) */
.skeleton {
    background: #1a1a1a;
    background-image: linear-gradient(90deg, #1a1a1a 0px, #222 40px, #1a1a1a 80px);
    background-size: 600px;
    animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

/* 3. Contraste de Accesibilidad Nocturna */
.plato-descripcion, .info-secundaria {
    color: #ccc !important; /* Mayor legibilidad que el gris oscuro #888 */
    line-height: 1.6;
    font-size: 0.95rem;
}

.plato-titulo {
    color: #fff;
    font-family: 'Playfair Display', serif;
    letter-spacing: 1px;
}