/* Weather Effects CSS */

/* Weather effect container */
.weather-effect-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

/* Rain effect */
.rain-effect {
    position: absolute;
    width: 2px;
    background: rgba(120, 160, 255, 0.7);
    height: 20px;
    animation: rain-fall linear infinite;
    z-index: 1000;
}

@keyframes rain-fall {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh));
        opacity: 0;
    }
}

/* Sandstorm effect */
.sandstorm-effect {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(210, 180, 140, 0.7);
    border-radius: 50%;
    animation: sandstorm-blow linear infinite;
    z-index: 1000;
}

@keyframes sandstorm-blow {
    0% {
        transform: translate(-10px, 0);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translate(calc(100vw + 10px), 0);
        opacity: 0;
    }
}

/* Rainbow effect */
.rainbow-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        rgba(255, 0, 0, 0.1),
        rgba(255, 165, 0, 0.1),
        rgba(255, 255, 0, 0.1),
        rgba(0, 128, 0, 0.1),
        rgba(0, 0, 255, 0.1),
        rgba(75, 0, 130, 0.1),
        rgba(238, 130, 238, 0.1)
    );
    opacity: 0;
    animation: rainbow-appear 1s ease-in-out forwards;
    z-index: 999;
    pointer-events: none;
}

@keyframes rainbow-appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

/* Plant weather effect classes */
.plant-rain-effect {
    position: relative;
}

.plant-rain-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(120, 160, 255, 0.2);
    z-index: 5;
    pointer-events: none;
    border-radius: 10px;
}

.plant-sandstorm-effect {
    position: relative;
}

.plant-sandstorm-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(210, 180, 140, 0.3);
    z-index: 5;
    pointer-events: none;
    border-radius: 10px;
}

.plant-rainbow-effect {
    position: relative;
}

.plant-rainbow-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(255, 0, 0, 0.1),
        rgba(255, 165, 0, 0.1),
        rgba(255, 255, 0, 0.1),
        rgba(0, 128, 0, 0.1),
        rgba(0, 0, 255, 0.1),
        rgba(75, 0, 130, 0.1),
        rgba(238, 130, 238, 0.1)
    );
    z-index: 5;
    pointer-events: none;
    border-radius: 10px;
    animation: rainbow-glow 2s infinite alternate;
}

@keyframes rainbow-glow {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.7;
    }
}