/**
 * ANIMATIONS MÉTÉO - BACKGROUNDS
 * Animations CSS pour les fonds animés météo (pas les icônes)
 * Les animations d'icônes sont dans weather-full.css
 * @version 2.0
 */

/* ============================================
   ANIMATIONS BACKGROUND LAYERS
   ============================================ */

/* === SOLEIL BACKGROUND === */
.wf-sun-svg {
    position: absolute;
    top: 10%;
    right: 10%;
    filter: drop-shadow(0 0 30px rgba(255,200,50,0.5));
}

.wf-sun-halo {
    animation: wf-sun-pulse 4s ease-in-out infinite;
}

.wf-sun-corona {
    animation: wf-sun-corona-pulse 3s ease-in-out infinite;
}

.wf-sun-rays {
    transform-origin: 60px 60px;
    animation: wf-sun-rotate 60s linear infinite;
}

@keyframes wf-sun-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes wf-sun-corona-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

@keyframes wf-sun-rotate {
    to { transform: rotate(360deg); }
}

/* === LUNE BACKGROUND === */
.wf-moon-svg {
    position: absolute;
    top: 10%;
    right: 10%;
    filter: drop-shadow(0 0 20px rgba(255,250,200,0.3));
}

.wf-moon-glow {
    animation: wf-moon-pulse 5s ease-in-out infinite;
}

.wf-moon-star {
    animation: wf-star-twinkle 3s ease-in-out infinite;
}

@keyframes wf-moon-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.03); }
}

/* === ÉTOILES - Scintillement lent et subtil === */
.wf-star {
    animation: wf-star-twinkle 6s ease-in-out infinite;
}

/* Délais décalés pour un effet naturel */
.wf-star-1 { animation-delay: 0s; animation-duration: 5s; }
.wf-star-2 { animation-delay: 1.2s; animation-duration: 7s; }
.wf-star-3 { animation-delay: 2.5s; animation-duration: 6s; }
.wf-star-4 { animation-delay: 0.8s; animation-duration: 8s; }
.wf-star-5 { animation-delay: 3.5s; animation-duration: 5.5s; }
.wf-star-6 { animation-delay: 1.8s; animation-duration: 7.5s; }
.wf-star-7 { animation-delay: 4.2s; animation-duration: 6.5s; }
.wf-star-8 { animation-delay: 2.8s; animation-duration: 8.5s; }

@keyframes wf-star-twinkle {
    0%, 100% { opacity: 0.4; }
    15% { opacity: 1; }
    30% { opacity: 0.5; }
    50% { opacity: 0.9; }
    70% { opacity: 0.3; }
    85% { opacity: 0.8; }
}

/* === ÉCLAIRS BACKGROUND === */
.wf-bolt {
    opacity: 0;
    animation: wf-lightning-flash 4s ease-in-out infinite;
}

.wf-bolt-1 { animation-delay: 0s; }
.wf-bolt-2 { animation-delay: 2s; }
.wf-bolt-3 { animation-delay: 3.5s; }

@keyframes wf-lightning-flash {
    0%, 100% { opacity: 0; }
    2% { opacity: 1; }
    4% { opacity: 0.2; }
    6% { opacity: 0.9; }
    8% { opacity: 0; }
}

/* === BROUILLARD BACKGROUND === */
.wf-layer--effects.fog {
    /* Couche de base - voile général */
    background:
        radial-gradient(ellipse 120% 40% at 30% 20%, rgba(255,255,255,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 100% 35% at 70% 40%, rgba(255,255,255,0.45) 0%, transparent 65%),
        radial-gradient(ellipse 130% 45% at 40% 60%, rgba(255,255,255,0.55) 0%, transparent 70%),
        radial-gradient(ellipse 110% 38% at 60% 80%, rgba(255,255,255,0.5) 0%, transparent 65%),
        linear-gradient(180deg,
            rgba(200,210,220,0.3) 0%,
            rgba(220,225,230,0.5) 30%,
            rgba(230,235,240,0.6) 50%,
            rgba(220,225,230,0.5) 70%,
            rgba(200,210,220,0.3) 100%);
    animation: wf-fog-drift 12s ease-in-out infinite;
}

/* Couche de brume avant (pseudo-élément) */
.wf-layer--effects.fog::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    right: -10%;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 30% at 20% 35%, rgba(255,255,255,0.6) 0%, transparent 60%),
        radial-gradient(ellipse 90% 35% at 80% 55%, rgba(255,255,255,0.55) 0%, transparent 65%),
        radial-gradient(ellipse 100% 40% at 50% 75%, rgba(255,255,255,0.6) 0%, transparent 60%);
    animation: wf-fog-drift-slow 18s ease-in-out infinite;
    pointer-events: none;
}

/* Couche de brume arrière (pseudo-élément) */
.wf-layer--effects.fog::after {
    content: '';
    position: absolute;
    top: 0;
    left: -5%;
    right: -5%;
    bottom: 0;
    background:
        radial-gradient(ellipse 100% 50% at 60% 25%, rgba(245,248,250,0.4) 0%, transparent 70%),
        radial-gradient(ellipse 120% 45% at 30% 50%, rgba(245,248,250,0.35) 0%, transparent 65%),
        radial-gradient(ellipse 90% 40% at 70% 70%, rgba(245,248,250,0.4) 0%, transparent 60%);
    animation: wf-fog-drift-fast 8s ease-in-out infinite reverse;
    pointer-events: none;
    opacity: 0.8;
}

@keyframes wf-fog-drift {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.85;
    }
    50% {
        transform: translateX(15px);
        opacity: 0.95;
    }
}

@keyframes wf-fog-drift-slow {
    0%, 100% {
        transform: translateX(-20px);
        opacity: 0.7;
    }
    50% {
        transform: translateX(25px);
        opacity: 0.9;
    }
}

@keyframes wf-fog-drift-fast {
    0%, 100% {
        transform: translateX(10px);
        opacity: 0.6;
    }
    50% {
        transform: translateX(-15px);
        opacity: 0.8;
    }
}

/* ============================================
   ANIMATIONS TORNADE
   ============================================ */

.wf-tornado-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.wf-tornado-funnel {
    animation: wf-tornado-sway 3s ease-in-out infinite;
    transform-origin: 200px 20px;
}

@keyframes wf-tornado-sway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.wf-tornado-ring {
    fill: none;
    stroke: rgba(100, 100, 100, 0.6);
    stroke-width: 3;
    animation: wf-tornado-ring-rotate 2s linear infinite;
}

.wf-tornado-ring-1 { animation-duration: 1.5s; stroke: rgba(80, 80, 80, 0.7); }
.wf-tornado-ring-2 { animation-duration: 1.7s; animation-delay: -0.2s; }
.wf-tornado-ring-3 { animation-duration: 1.9s; animation-delay: -0.4s; }
.wf-tornado-ring-4 { animation-duration: 2.1s; animation-delay: -0.6s; }
.wf-tornado-ring-5 { animation-duration: 2.3s; animation-delay: -0.8s; }
.wf-tornado-ring-6 { animation-duration: 2.5s; animation-delay: -1.0s; }
.wf-tornado-ring-7 { animation-duration: 2.7s; animation-delay: -1.2s; }
.wf-tornado-ring-8 { animation-duration: 2.9s; animation-delay: -1.4s; stroke: rgba(60, 60, 60, 0.5); }

@keyframes wf-tornado-ring-rotate {
    0% { stroke-dasharray: 20 10; stroke-dashoffset: 0; }
    100% { stroke-dasharray: 20 10; stroke-dashoffset: -60; }
}

.wf-tornado-debris circle {
    fill: rgba(80, 60, 40, 0.8);
    animation: wf-debris-fly 2s ease-in-out infinite;
}

.wf-tornado-debris circle:nth-child(1) { animation-delay: 0s; }
.wf-tornado-debris circle:nth-child(2) { animation-delay: 0.3s; }
.wf-tornado-debris circle:nth-child(3) { animation-delay: 0.6s; }
.wf-tornado-debris circle:nth-child(4) { animation-delay: 0.9s; }
.wf-tornado-debris circle:nth-child(5) { animation-delay: 1.2s; }
.wf-tornado-debris circle:nth-child(6) { animation-delay: 1.5s; }

@keyframes wf-debris-fly {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(30px, -50px) scale(1.2); }
}

/* ============================================
   ANIMATIONS RAFALES (SQUALLS)
   ============================================ */

.wf-squalls-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.wf-squall-line {
    stroke-linecap: round;
    animation: wf-squall-move 1.2s linear infinite;
}

.wf-squall-1 { stroke-width: 3; animation-delay: 0s; animation-duration: 1s; }
.wf-squall-2 { stroke-width: 5; animation-delay: 0.15s; animation-duration: 0.9s; }
.wf-squall-3 { stroke-width: 4; animation-delay: 0.35s; animation-duration: 1.1s; }
.wf-squall-4 { stroke-width: 6; animation-delay: 0.5s; animation-duration: 0.85s; }
.wf-squall-5 { stroke-width: 3; animation-delay: 0.7s; animation-duration: 1.15s; }
.wf-squall-6 { stroke-width: 5; animation-delay: 0.85s; animation-duration: 0.95s; }
.wf-squall-7 { stroke-width: 4; animation-delay: 1s; animation-duration: 1.05s; }

@keyframes wf-squall-move {
    0% { transform: translateX(-150%); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(250%); opacity: 0; }
}

/* Feuilles emportées par le vent */
.wf-leaf {
    animation: wf-leaf-fly 3s ease-in-out infinite;
}

.wf-leaf-1 { animation-duration: 2.5s; animation-delay: 0s; }
.wf-leaf-2 { animation-duration: 3.2s; animation-delay: 0.5s; }
.wf-leaf-3 { animation-duration: 2.8s; animation-delay: 1.2s; }
.wf-leaf-4 { animation-duration: 3.5s; animation-delay: 0.8s; }
.wf-leaf-5 { animation-duration: 2.6s; animation-delay: 1.8s; }
.wf-leaf-6 { animation-duration: 3s; animation-delay: 2.2s; }

@keyframes wf-leaf-fly {
    0% { transform: translate(-50px, 40px) rotate(0deg) scale(1.2); opacity: 0; }
    10% { opacity: 1; }
    25% { transform: translate(100px, 60px) rotate(180deg) scale(1); }
    50% { transform: translate(200px, 35px) rotate(360deg) scale(1.1); }
    75% { transform: translate(300px, 70px) rotate(540deg) scale(0.9); }
    90% { opacity: 1; }
    100% { transform: translate(450px, 50px) rotate(720deg) scale(1); opacity: 0; }
}

/* Parapluie emporté */
.wf-umbrella {
    animation: wf-umbrella-fly 6s ease-in-out infinite;
    transform-origin: 15px 0;
}

@keyframes wf-umbrella-fly {
    0% { transform: translate(-60px, 80px) rotate(-30deg); opacity: 0; }
    5% { opacity: 1; }
    20% { transform: translate(80px, 60px) rotate(15deg); }
    40% { transform: translate(180px, 100px) rotate(-20deg); }
    60% { transform: translate(280px, 50px) rotate(25deg); }
    80% { transform: translate(380px, 90px) rotate(-10deg); }
    95% { opacity: 1; }
    100% { transform: translate(480px, 70px) rotate(30deg); opacity: 0; }
}

/* Papiers volants */
.wf-paper {
    animation: wf-paper-fly 4s ease-in-out infinite;
}

.wf-paper-1 { animation-duration: 3.5s; animation-delay: 1s; }
.wf-paper-2 { animation-duration: 4.2s; animation-delay: 2.5s; }

@keyframes wf-paper-fly {
    0% { transform: translate(-40px, 120px) rotate(0deg); opacity: 0; }
    10% { opacity: 0.9; }
    25% { transform: translate(80px, 90px) rotate(90deg); }
    50% { transform: translate(180px, 140px) rotate(180deg); }
    75% { transform: translate(300px, 100px) rotate(270deg); }
    90% { opacity: 0.9; }
    100% { transform: translate(450px, 130px) rotate(360deg); opacity: 0; }
}

/* ============================================
   EFFETS ATMOSPHÉRIQUES
   ============================================ */

/* Brume (mist) */
.wf-layer--effects.mist {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.15) 0%,
        rgba(255,255,255,0.35) 30%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.35) 70%,
        rgba(255,255,255,0.15) 100%);
    animation: wf-mist-drift 10s ease-in-out infinite;
}

@keyframes wf-mist-drift {
    0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.6; }
    50% { transform: translateX(15px) scaleX(1.03); opacity: 0.75; }
}

/* Brume sèche (haze) */
.wf-layer--effects.haze {
    background: linear-gradient(180deg,
        rgba(255,248,220,0.1) 0%,
        rgba(255,248,220,0.2) 50%,
        rgba(255,248,220,0.1) 100%);
    animation: wf-haze-pulse 8s ease-in-out infinite;
}

@keyframes wf-haze-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.6; }
}

/* Fumée (smoke) */
.wf-layer--effects.smoke {
    background: linear-gradient(180deg,
        rgba(100,100,100,0.15) 0%,
        rgba(100,100,100,0.3) 30%,
        rgba(100,100,100,0.35) 50%,
        rgba(100,100,100,0.3) 70%,
        rgba(100,100,100,0.15) 100%);
    animation: wf-smoke-drift 12s ease-in-out infinite;
}

@keyframes wf-smoke-drift {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.5; }
    33% { transform: translateX(10px) translateY(-5px); opacity: 0.65; }
    66% { transform: translateX(-5px) translateY(3px); opacity: 0.55; }
}

/* Tempête de poussière */
.wf-layer--effects.dust-storm {
    background: linear-gradient(135deg,
        rgba(194,178,128,0.3) 0%,
        rgba(210,180,120,0.4) 30%,
        rgba(194,178,128,0.35) 60%,
        rgba(180,160,110,0.3) 100%);
    animation: wf-dust-storm 6s ease-in-out infinite;
}

@keyframes wf-dust-storm {
    0%, 100% { transform: translateX(0) scale(1); opacity: 0.5; }
    25% { transform: translateX(20px) scale(1.02); opacity: 0.7; }
    50% { transform: translateX(-10px) scale(0.98); opacity: 0.6; }
    75% { transform: translateX(15px) scale(1.01); opacity: 0.65; }
}

/* Cendres volcaniques */
.wf-layer--effects.volcanic {
    background: linear-gradient(180deg,
        rgba(50,50,50,0.4) 0%,
        rgba(60,50,50,0.5) 30%,
        rgba(50,40,40,0.55) 50%,
        rgba(60,50,50,0.5) 70%,
        rgba(50,50,50,0.4) 100%);
    animation: wf-volcanic-pulse 5s ease-in-out infinite;
}

@keyframes wf-volcanic-pulse {
    0%, 100% { opacity: 0.6; filter: brightness(1); }
    30% { opacity: 0.75; filter: brightness(0.9); }
    60% { opacity: 0.65; filter: brightness(1.05); }
}

/* Lueur de lave */
.wf-layer--effects.volcanic::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(0deg,
        rgba(180,50,20,0.15) 0%,
        transparent 100%);
    animation: wf-lava-glow 8s ease-in-out infinite;
}

@keyframes wf-lava-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}