/* Lightning bolt effects for grid */
.lightning-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.lightning {
    position: absolute;
    width: 3px;
    height: 0;
    background-color: rgba(0, 124, 240, 0.7);
    box-shadow: 0 0 10px rgba(0, 223, 216, 0.8), 0 0 20px rgba(0, 124, 240, 0.5);
    transform-origin: top;
    opacity: 0;
    z-index: 1;
}

.lightning.vertical {
    width: 3px;
}

.lightning.horizontal {
    height: 3px;
}

.lightning.active {
    opacity: 1;
    animation: lightningFlash 0.5s ease-out forwards;
}

@keyframes lightningFlash {
    0% {
        opacity: 1;
        filter: brightness(1);
    }
    20% {
        opacity: 0.8;
        filter: brightness(1.5);
    }
    40% {
        opacity: 0.9;
        filter: brightness(1);
    }
    60% {
        opacity: 0.4;
        filter: brightness(1.8);
    }
    80% {
        opacity: 0.6;
        filter: brightness(1.2);
    }
    100% {
        opacity: 0;
    }
}

/* Lightning branching effect */
.lightning::before, .lightning::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 0;
    background-color: rgba(0, 223, 216, 0.7);
    box-shadow: 0 0 8px rgba(0, 124, 240, 0.8);
    transform-origin: top;
    opacity: 0;
    transition: all 0.1s;
}

.lightning.active::before, .lightning.active::after {
    opacity: 1;
    height: 30%;
    animation: branchGrow 0.2s ease-out forwards;
}

.lightning.horizontal::before, .lightning.horizontal::after {
    width: 30%;
    height: 2px;
}

.lightning.vertical.active::before {
    top: 30%;
    left: 0;
    transform: rotate(30deg);
}

.lightning.vertical.active::after {
    top: 60%;
    left: 0;
    transform: rotate(-40deg);
}

.lightning.horizontal.active::before {
    top: 0;
    left: 30%;
    transform: rotate(-30deg);
}

.lightning.horizontal.active::after {
    top: 0;
    left: 60%;
    transform: rotate(40deg);
}

@keyframes branchGrow {
    0% {
        opacity: 0.7;
        transform: scaleY(0) rotate(var(--rotation, 30deg));
    }
    100% {
        opacity: 0;
        transform: scaleY(1) rotate(var(--rotation, 30deg));
    }
}

/* For horizontal bolts */
@keyframes branchGrowHorizontal {
    0% {
        opacity: 0.7;
        transform: scaleX(0) rotate(var(--rotation, 30deg));
    }
    100% {
        opacity: 0;
        transform: scaleX(1) rotate(var(--rotation, 30deg));
    }
}

/* Glow effect at intersections */
.lightning-glow {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(0, 124, 240, 0.1);
    filter: blur(8px);
    box-shadow: 0 0 15px rgba(0, 223, 216, 0.8), 0 0 30px rgba(0, 124, 240, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.lightning-glow.active {
    animation: glowPulse 0.7s ease-out forwards;
}

@keyframes glowPulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@media (prefers-color-scheme: dark) {
    .lightning {
        background-color: rgba(0, 124, 240, 0.9);
        box-shadow: 0 0 15px rgba(0, 223, 216, 0.9), 0 0 25px rgba(0, 124, 240, 0.7);
    }
    
    .lightning::before, .lightning::after {
        background-color: rgba(0, 223, 216, 0.9);
        box-shadow: 0 0 10px rgba(0, 124, 240, 0.9);
    }
    
    .lightning-glow {
        background-color: rgba(0, 124, 240, 0.2);
        box-shadow: 0 0 20px rgba(0, 223, 216, 0.9), 0 0 40px rgba(0, 124, 240, 0.7);
    }
}