/* SVG Logo Lightning Bolt Animations */

/* Base styles for lightning bolts */

.lightning-bolt {
    filter: drop-shadow(0 0 2px var(--clr-primary-orange));
    transform-origin: center;
    transition: filter 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* Initially hidden */
}

/* Flickering/glowing animation - simulates lightning effect */
@keyframes lightningFlicker {

    0%,
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 2px var(--clr-primary-orange)) drop-shadow(0 0 4px rgba(255, 79, 1, 0.5));
    }

    25% {
        opacity: 0.9;
        filter: drop-shadow(0 0 3px var(--clr-primary-orange)) drop-shadow(0 0 6px rgba(255, 79, 1, 0.7));
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0 0 4px var(--clr-primary-orange)) drop-shadow(0 0 8px rgba(255, 79, 1, 0.8)) drop-shadow(0 0 12px rgba(255, 79, 1, 0.4));
    }

    75% {
        opacity: 0.85;
        filter: drop-shadow(0 0 2px var(--clr-primary-orange)) drop-shadow(0 0 4px rgba(255, 79, 1, 0.6));
    }
}

/* Additional glow animation */
@keyframes lightningGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 2px var(--clr-primary-orange)) drop-shadow(0 0 4px rgba(255, 79, 1, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 6px var(--clr-primary-orange)) drop-shadow(0 0 12px rgba(255, 79, 1, 0.8)) drop-shadow(0 0 18px rgba(255, 79, 1, 0.4));
    }
}

/* Fade-in animation for when logo enters viewport */
@keyframes lightningFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Base animations - only run when visible */
.mylogo.visible #lightning-1 {
    animation: lightningFadeIn 0.8s ease-out 0.5s forwards,
        lightningFlicker 2s ease-in-out infinite 1.3s,
        lightningGlow 3s ease-in-out infinite 1.3s;
}

.mylogo.visible #lightning-2 {
    animation: lightningFadeIn 0.8s ease-out 0.7s forwards,
        lightningFlicker 2.3s ease-in-out infinite 1.5s,
        lightningGlow 3.2s ease-in-out infinite 1.5s;
}

/* Reset when logo leaves viewport */
.mylogo:not(.visible) .lightning-bolt {
    opacity: 0;
    animation: none !important;
}

/* Optional: Scale pulse on hover for interactivity */
.mylogo.visible:hover .lightning-bolt {
    animation: lightningFlicker 1.5s ease-in-out infinite,
        lightningGlow 2s ease-in-out infinite,
        lightningPulse 1s ease-in-out infinite;
}

@keyframes lightningPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/* Intense lightning flash effect (can be triggered with a class) */
.lightning-bolt.flash {
    animation: lightningFlash 0.3s ease-out;
}

@keyframes lightningFlash {
    0% {
        opacity: 1;
        filter: drop-shadow(0 0 2px var(--clr-primary-orange));
    }

    25% {
        opacity: 1.2;
        filter: drop-shadow(0 0 20px var(--clr-primary-orange)) drop-shadow(0 0 30px rgba(255, 79, 1, 1)) drop-shadow(0 0 40px rgba(255, 79, 1, 0.8));
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0 0 10px var(--clr-primary-orange)) drop-shadow(0 0 15px rgba(255, 79, 1, 0.9));
    }

    100% {
        opacity: 1;
        filter: drop-shadow(0 0 2px var(--clr-primary-orange)) drop-shadow(0 0 4px rgba(255, 79, 1, 0.5));
    }
}