/* ==========================================================================
   TU REFUGIO - ATMÓSFERAS Y ANIMACIONES EMOCIONALES
   Cada estado de ánimo es un pequeño mundo vivo
   ========================================================================== */

/* Animaciones SVG de las Ilustraciones */
.anim-float-slow {
    animation: svg-float 5s ease-in-out infinite;
}

.anim-breathe {
    animation: svg-breathe 4s ease-in-out infinite;
    transform-origin: center;
}

.anim-pulse-subtle {
    animation: svg-pulse 2.5s ease-in-out infinite;
}

.anim-steam {
    animation: svg-steam 3s linear infinite;
}

.anim-sway-left {
    animation: svg-sway-left 3.5s ease-in-out infinite alternate;
}

.anim-sway-right {
    animation: svg-sway-right 4s ease-in-out infinite alternate;
}

.anim-drift-left {
    animation: svg-drift-left 6s ease-in-out infinite alternate;
}

.anim-drift-right {
    animation: svg-drift-right 7s ease-in-out infinite alternate;
}

.anim-float-spark {
    animation: svg-spark 3s ease-in-out infinite alternate;
}

.anim-spin-very-slow {
    animation: svg-spin 35s linear infinite;
}

.anim-flame {
    animation: svg-flame 1.8s ease-in-out infinite alternate;
    transform-origin: 160px 112px;
}

.anim-ripple {
    animation: svg-ripple 4.5s ease-out infinite;
    transform-origin: 160px 165px;
}

.anim-wave {
    animation: svg-wave 4s ease-in-out infinite alternate;
}

/* Keyframes para Ilustraciones */
@keyframes svg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes svg-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes svg-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes svg-steam {
    0% { transform: translateY(0) scaleY(1); opacity: 0; }
    40% { opacity: 0.7; }
    100% { transform: translateY(-16px) scaleY(1.3); opacity: 0; }
}

@keyframes svg-sway-left {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-8deg); }
}

@keyframes svg-sway-right {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(8deg); }
}

@keyframes svg-drift-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-14px); }
}

@keyframes svg-drift-right {
    0% { transform: translateX(0); }
    100% { transform: translateX(14px); }
}

@keyframes svg-spark {
    0% { transform: translateY(0) scale(1); opacity: 0.4; }
    50% { opacity: 1; }
    100% { transform: translateY(-12px) scale(1.15); opacity: 0.6; }
}

@keyframes svg-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes svg-flame {
    0% { transform: scale(0.96) skewX(-1deg); }
    50% { transform: scale(1.04) skewX(1.5deg); }
    100% { transform: scale(0.98) skewX(-1deg); }
}

@keyframes svg-ripple {
    0% { transform: scale(0.85); opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 0; }
}

@keyframes svg-wave {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

/* ==========================================================================
   ATMÓSFERAS INDIVIDUALES (FONDOS Y ACENTOS DINÁMICOS)
   ========================================================================== */

/* 1. CANSADA: Lavanda sedosa y noche estrellada calmada */
body.world-tired {
    --accent-primary: #9d8df1;
    --accent-primary-light: #efeaff;
    --shadow-glow: 0 0 45px rgba(157, 141, 241, 0.3);
}
body.world-tired .atmosphere-backdrop {
    background: radial-gradient(circle at 80% 20%, rgba(157, 141, 241, 0.18) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(107, 70, 193, 0.12) 0%, transparent 50%);
}

/* 2. DUDO DE MÍ: Azul índigo suave con halos de claridad */
body.world-doubting {
    --accent-primary: #5a82ec;
    --accent-primary-light: #e8f0fe;
    --shadow-glow: 0 0 45px rgba(90, 130, 236, 0.3);
}
body.world-doubting .atmosphere-backdrop {
    background: radial-gradient(circle at 50% 30%, rgba(99, 179, 237, 0.2) 0%, transparent 70%),
                radial-gradient(circle at 80% 70%, rgba(49, 130, 206, 0.12) 0%, transparent 50%);
}

/* 3. NECESITO ÁNIMO: Amanecer durazno chispeante y esperanza */
body.world-need-encouragement {
    --accent-primary: #ed8936;
    --accent-primary-light: #feebd9;
    --shadow-glow: 0 0 45px rgba(237, 137, 54, 0.3);
}
body.world-need-encouragement .atmosphere-backdrop {
    background: radial-gradient(circle at 20% 30%, rgba(246, 173, 85, 0.22) 0%, transparent 60%),
                radial-gradient(circle at 80% 60%, rgba(104, 211, 145, 0.14) 0%, transparent 55%);
}

/* 4. TUVE UN BUEN DÍA: Oro cálido y sol radiante */
body.world-good-day {
    --accent-primary: #d69e2e;
    --accent-primary-light: #fef9c3;
    --shadow-glow: 0 0 50px rgba(236, 201, 75, 0.38);
}
body.world-good-day .atmosphere-backdrop {
    background: radial-gradient(circle at 50% 20%, rgba(250, 240, 137, 0.32) 0%, transparent 65%),
                radial-gradient(circle at 75% 75%, rgba(246, 224, 94, 0.18) 0%, transparent 50%);
}

/* 5. MÁS O MENOS: Verde menta suave y cielo despejado ligero */
body.world-so-so {
    --accent-primary: #319795;
    --accent-primary-light: #e6fffa;
    --shadow-glow: 0 0 45px rgba(49, 151, 149, 0.28);
}
body.world-so-so .atmosphere-backdrop {
    background: radial-gradient(circle at 70% 30%, rgba(129, 230, 217, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 30% 70%, rgba(79, 209, 197, 0.15) 0%, transparent 50%);
}

/* 6. ME CUESTA HOY: Vela acogedora y tonos terracota de refugio */
body.world-struggling {
    --accent-primary: #dd6b20;
    --accent-primary-light: #fffaf0;
    --shadow-glow: 0 0 45px rgba(221, 107, 32, 0.28);
}
body.world-struggling .atmosphere-backdrop {
    background: radial-gradient(circle at 50% 50%, rgba(246, 173, 85, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(192, 86, 33, 0.15) 0%, transparent 50%);
}

/* 7. TRANQUILA: Salvia matcha y gotas de armonía */
body.world-peaceful {
    --accent-primary: #38a169;
    --accent-primary-light: #f0fff4;
    --shadow-glow: 0 0 45px rgba(72, 187, 120, 0.28);
}
body.world-peaceful .atmosphere-backdrop {
    background: radial-gradient(circle at 30% 30%, rgba(154, 230, 180, 0.24) 0%, transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(72, 187, 120, 0.15) 0%, transparent 50%);
}

/* 8. FRUSTRADA: Olas del mar refrescantes que limpian la tensión */
body.world-frustrated {
    --accent-primary: #3182ce;
    --accent-primary-light: #ebf8ff;
    --shadow-glow: 0 0 45px rgba(66, 153, 225, 0.28);
}
body.world-frustrated .atmosphere-backdrop {
    background: radial-gradient(circle at 80% 40%, rgba(144, 205, 244, 0.22) 0%, transparent 65%),
                radial-gradient(circle at 20% 60%, rgba(49, 130, 206, 0.15) 0%, transparent 55%);
}

/* 9. ENOJADA: Calma crepuscular que enfría el calor de la rabia */
body.world-angry {
    --accent-primary: #e53e3e;
    --accent-primary-light: #fff5f5;
    --shadow-glow: 0 0 45px rgba(229, 62, 62, 0.28);
}
body.world-angry .atmosphere-backdrop {
    background: radial-gradient(circle at 50% 30%, rgba(254, 178, 178, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 50% 80%, rgba(74, 85, 104, 0.18) 0%, transparent 65%);
}

/* 10. DECEPCIONADA: Cuarzo rosa reparador y amor propio */
body.world-disappointed {
    --accent-primary: #d53f8c;
    --accent-primary-light: #fff5f7;
    --shadow-glow: 0 0 45px rgba(213, 63, 140, 0.28);
}
body.world-disappointed .atmosphere-backdrop {
    background: radial-gradient(circle at 30% 40%, rgba(246, 135, 179, 0.22) 0%, transparent 60%),
                radial-gradient(circle at 75% 70%, rgba(251, 182, 206, 0.16) 0%, transparent 50%);
}

/* 11. NO SÉ CÓMO ME SIENTO: Bruma lavanda etérea y estrellas */
body.world-uncertain {
    --accent-primary: #805ad5;
    --accent-primary-light: #faf5ff;
    --shadow-glow: 0 0 45px rgba(128, 90, 213, 0.3);
}
body.world-uncertain .atmosphere-backdrop {
    background: radial-gradient(circle at 50% 40%, rgba(183, 148, 244, 0.22) 0%, transparent 65%),
                radial-gradient(circle at 80% 20%, rgba(129, 230, 217, 0.14) 0%, transparent 55%),
                radial-gradient(circle at 20% 80%, rgba(246, 135, 179, 0.14) 0%, transparent 55%);
}