/* Animated Weather Backgrounds for Weather Slide */

/* ===== SUNNY WEATHER ===== */
/* Big sun in top-right corner */
.slide[data-slide="weather"].bg-sunny::before {
    content: '';
    position: absolute;
    top: 50px;
    right: 80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 50%, rgba(255, 165, 0, 0) 70%);
    border-radius: 50%;
    animation: sunshine-pulse 4s ease-in-out infinite;
    filter: blur(15px);
    opacity: 0.9;
    z-index: 1;
}

/* Sun rays rotating */
.slide[data-slide="weather"].bg-sunny::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 50px;
    width: 300px;
    height: 300px;
    background:
        conic-gradient(from 0deg,
            transparent 0deg, #FFD700 10deg, transparent 20deg,
            transparent 40deg, #FFA500 50deg, transparent 60deg,
            transparent 80deg, #FFD700 90deg, transparent 100deg,
            transparent 120deg, #FFA500 130deg, transparent 140deg,
            transparent 160deg, #FFD700 170deg, transparent 180deg,
            transparent 200deg, #FFA500 210deg, transparent 220deg,
            transparent 240deg, #FFD700 250deg, transparent 260deg,
            transparent 280deg, #FFA500 290deg, transparent 300deg,
            transparent 320deg, #FFD700 330deg, transparent 340deg
        );
    border-radius: 50%;
    animation: sunshine-rays 20s linear infinite;
    filter: blur(20px);
    opacity: 0.75;
    z-index: 1;
}

@keyframes sunshine-pulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes sunshine-rays {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== RAINY WEATHER ===== */
/* Darker rain clouds */
.slide[data-slide="weather"].bg-rainy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 800px 200px at 30% 20%, rgba(100, 100, 120, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 600px 180px at 70% 15%, rgba(80, 80, 100, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 700px 150px at 50% 10%, rgba(90, 90, 110, 0.3) 0%, transparent 50%);
    z-index: 1;
}

/* Rain animation handled by Canvas in weather-effects.js */

/* ===== SNOWY WEATHER ===== */
/* Snow animation handled by Particles.js in weather-effects.js */

/* ===== CLOUDY/OVERCAST WEATHER ===== */
/* Multiple gray cloud layers */
.slide[data-slide="weather"].bg-cloudy::before {
    content: '';
    position: absolute;
    top: 30px;
    left: -100px;
    width: 700px;
    height: 250px;
    background:
        radial-gradient(ellipse at center, rgba(200, 200, 210, 0.6) 0%, rgba(180, 180, 190, 0.4) 40%, rgba(160, 160, 170, 0.15) 70%, transparent 85%);
    border-radius: 50%;
    filter: blur(30px);
    animation: cloud-drift-1 35s ease-in-out infinite;
    z-index: 1;
}

.slide[data-slide="weather"].bg-cloudy::after {
    content: '';
    position: absolute;
    top: 100px;
    right: -150px;
    width: 800px;
    height: 280px;
    background:
        radial-gradient(ellipse at center, rgba(180, 180, 190, 0.55) 0%, rgba(160, 160, 170, 0.35) 40%, rgba(140, 140, 150, 0.12) 70%, transparent 85%);
    border-radius: 50%;
    filter: blur(35px);
    animation: cloud-drift-2 45s ease-in-out infinite;
    z-index: 1;
}

@keyframes cloud-drift-1 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.8; }
    50% { transform: translateX(150px) translateY(40px); opacity: 1; }
}

@keyframes cloud-drift-2 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.75; }
    50% { transform: translateX(-120px) translateY(-25px); opacity: 0.95; }
}

/* ===== STORMY WEATHER ===== */
/* Dark storm clouds */
.slide[data-slide="weather"].bg-stormy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 900px 250px at 25% 15%, rgba(60, 60, 80, 0.5) 0%, transparent 60%),
        radial-gradient(ellipse 800px 220px at 75% 20%, rgba(50, 50, 70, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 700px 200px at 50% 12%, rgba(40, 40, 60, 0.4) 0%, transparent 60%);
    animation: storm-clouds 5s ease-in-out infinite;
    z-index: 1;
}

/* Lightning handled by GSAP in lightning-effect.js */

@keyframes storm-clouds {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(-30px); opacity: 0.9; }
}

/* Windy effect - subtle movement on all elements */
.slide[data-slide="weather"].bg-windy .weather-card {
    animation: wind-sway 3s ease-in-out infinite;
}

.slide[data-slide="weather"].bg-windy .weather-card:nth-child(2) {
    animation-delay: 0.2s;
}

.slide[data-slide="weather"].bg-windy .weather-card:nth-child(3) {
    animation-delay: 0.4s;
}

.slide[data-slide="weather"].bg-windy .weather-card:nth-child(4) {
    animation-delay: 0.6s;
}

.slide[data-slide="weather"].bg-windy .weather-card:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes wind-sway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-5px) rotate(-0.5deg); }
    75% { transform: translateX(5px) rotate(0.5deg); }
}

/* Windy background - moving lines */
.slide[data-slide="weather"].bg-windy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 100px,
        rgba(255, 255, 255, 0.03) 100px,
        rgba(255, 255, 255, 0.03) 102px
    );
    animation: wind-lines 8s linear infinite;
    z-index: 0;
}

@keyframes wind-lines {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Ensure content stays above weather effects */
.slide[data-slide="weather"] .slide-content {
    position: relative;
    z-index: 2;
}

/* Darker cards for snowy background (light background) */
.slide[data-slide="weather"].bg-snowy .weather-card {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(15px);
}

.slide[data-slide="weather"].bg-snowy .weather-card::before {
    background: rgba(174, 145, 66, 0.15) !important;
}

/* Fog/Mist effect - much denser and low to the ground */
.slide[data-slide="weather"].bg-mist::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -30%;
    width: 130%;
    height: 60%;
    background:
        radial-gradient(ellipse at center, rgba(230, 230, 240, 0.25) 0%, rgba(220, 220, 230, 0.15) 40%, transparent 70%);
    filter: blur(100px);
    animation: mist-drift-1 20s ease-in-out infinite;
    z-index: 1;
}

.slide[data-slide="weather"].bg-mist::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -20%;
    width: 110%;
    height: 50%;
    background:
        radial-gradient(ellipse at center, rgba(240, 240, 250, 0.2) 0%, rgba(230, 230, 240, 0.12) 40%, transparent 70%);
    filter: blur(120px);
    animation: mist-drift-2 25s ease-in-out infinite;
    z-index: 1;
}

@keyframes mist-drift-1 {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(8%); opacity: 0.55; }
}

@keyframes mist-drift-2 {
    0%, 100% { transform: translateX(0); opacity: 0.35; }
    50% { transform: translateX(-8%); opacity: 0.5; }
}