body {
    background: linear-gradient(180deg,
            #2c3e50 0%,
            #34495e 20%,
            #4a5568 40%,
            #2d3748 60%,
            #1a202c 80%,
            #0f1419 100%);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}


.thunder-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg,
            #3b82f6 0%,
            #8b5cf6 25%,
            #06b6d4 50%,
            #10b981 75%,
            #f59e0b 100%);
    z-index: 9999;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
}


.thunder-bg-scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}


.thunder-sky-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center top,
            rgba(52, 73, 94, 0.3) 0%,
            rgba(44, 62, 80, 0.5) 30%,
            rgba(26, 32, 44, 0.7) 60%,
            rgba(15, 20, 25, 0.9) 100%);
    z-index: -2;
    pointer-events: none;
}


.thunder-clouds-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.thunder-cloud {
    position: absolute;
    background: radial-gradient(ellipse,
            rgba(45, 55, 72, 0.8) 0%,
            rgba(26, 32, 44, 0.6) 40%,
            rgba(15, 20, 25, 0.4) 70%,
            transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0;
}


.thunder-lightning-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.thunder-lightning-bolt {
    position: absolute;
    background: linear-gradient(180deg,
            #ffffff 0%,
            #3b82f6 20%,
            #8b5cf6 40%,
            #06b6d4 60%,
            #10b981 80%,
            #f59e0b 100%);
    opacity: 0;
    transform-origin: top center;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}


.thunder-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.thunder-electric-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: radial-gradient(circle,
            #ffffff 0%,
            #3b82f6 30%,
            #8b5cf6 60%,
            transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.8);
    opacity: 0;
}


.thunder-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(59, 130, 246, 0.05) 30%,
            transparent 60%);
    opacity: 0;
    pointer-events: none;
}


@keyframes thunder-cloud-drift {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateX(calc(100vw + 200px)) translateY(-20px);
        opacity: 0;
    }
}

@keyframes thunder-lightning-strike {

    0%,
    90%,
    100% {
        opacity: 0;
        height: 0;
        transform: scaleY(0);
    }

    1%,
    3% {
        opacity: 1;
        height: 100vh;
        transform: scaleY(1) skewX(-2deg);
    }

    2% {
        opacity: 0.7;
        transform: scaleY(1) skewX(2deg);
    }

    4%,
    6% {
        opacity: 0.9;
        height: 100vh;
        transform: scaleY(1) skewX(-1deg);
    }

    5% {
        opacity: 0.5;
        transform: scaleY(1) skewX(1deg);
    }
}

@keyframes thunder-electric-float {

    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }

    25% {
        transform: translateY(-10px) translateX(5px) scale(1.2);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-5px) translateX(-3px) scale(0.8);
        opacity: 1;
    }

    75% {
        transform: translateY(-15px) translateX(8px) scale(1.1);
        opacity: 0.6;
    }
}

@keyframes thunder-flash-effect {

    0%,
    95%,
    100% {
        opacity: 0;
    }

    1%,
    3% {
        opacity: 0.3;
    }

    2% {
        opacity: 0.1;
    }

    4%,
    6% {
        opacity: 0.2;
    }

    5% {
        opacity: 0.05;
    }
}


@media (max-width: 768px) {
    .thunder-progress-bar {
        height: 3px;
    }

    .thunder-cloud {
        filter: blur(0.5px);
    }
}

@media (max-width: 480px) {
    .thunder-progress-bar {
        height: 2px;
    }
}