/* Cloud scrolling animation enhancements */

@keyframes float-left {
    0% {
        transform: translateX(calc(100vw + 150px));
    }
    100% {
        transform: translateX(-150px);
    }
}

/* Create additional cloud types */
.cloud-fast {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(15px);
    opacity: 0.5;
    animation-name: float-across;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.cloud-slow {
    position: absolute;
    background: rgba(220, 255, 220, 0.6);
    border-radius: 50%;
    filter: blur(25px);
    opacity: 0.4;
    animation-name: float-left;
    animation-duration: 120s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Lightning effect */
.lightning {
    position: absolute;
    width: 3px;
    height: 70px;
    background: rgba(255, 255, 220, 0.9);
    filter: blur(2px);
    transform-origin: top;
    opacity: 0;
    animation: lightning-flash 10s linear infinite;
    z-index: 10;
}

.lightning:after {
    content: '';
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 40%;
    background: white;
    opacity: 0.9;
    filter: blur(7px);
}

.lightning-bolt {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    animation: lightning-bolt 15s linear infinite;
}

@keyframes lightning-flash {
    0%, 96%, 97.5%, 99%, 100% {
        opacity: 0;
    }
    96.8%, 97.2%, 98.2%, 98.8% {
        opacity: 1;
    }
}

@keyframes lightning-bolt {
    0%, 96%, 100% {
        opacity: 0;
    }
    97.2% {
        opacity: 0.8;
    }
    97.6% {
        opacity: 0;
    }
    98.4% {
        opacity: 0.7;
    }
    98.8% {
        opacity: 0;
    }
}

/* Add this to the existing CSS file */