Dual-Sided Full-Screen Flashing Light Effect Aniimation code

<style>
/* FULL SCREEN DUAL BLUE FLASH */
#full-blue-flash {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    z-index: 999999;
}

/* Left and right bulbs */
#full-blue-flash .bulb {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 65px;
    margin-top: -32px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 12px 5px #00aaff,
                0 0 30px 15px #008cff,
                0 0 60px 25px #0066ff;
    z-index: 3;
}

#full-blue-flash .left-bulb {
    left: 0;
}

#full-blue-flash .right-bulb {
    right: 0;
}

/* Full screen light beams */
#full-blue-flash .beam {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s;
}

#full-blue-flash .left-beam {
    background: linear-gradient(
        90deg,
        rgba(0,140,255,0.45),
        rgba(0,140,255,0.12) 40%,
        transparent 75%
    );
    animation: leftFlash 1.2s infinite;
}

#full-blue-flash .right-beam {
    background: linear-gradient(
        270deg,
        rgba(0,140,255,0.45),
        rgba(0,140,255,0.12) 40%,
        transparent 75%
    );
    animation: rightFlash 1.2s infinite;
}

/* Screen-wide blue glow */
#full-blue-flash .screen-glow {
    position: absolute;
    inset: 0;
    background: rgba(0, 110, 255, 0.16);
    opacity: 0;
    animation: screenFlash 1.2s infinite;
}

/* Bulb flashing */
#full-blue-flash .left-bulb {
    animation: bulbLeft 1.2s infinite;
}

#full-blue-flash .right-bulb {
    animation: bulbRight 1.2s infinite;
}

@keyframes leftFlash {
    0%, 40%, 100% { opacity: 0; }
    15%, 25% { opacity: 1; }
}

@keyframes rightFlash {
    0%, 40%, 100% { opacity: 0; }
    55%, 75% { opacity: 1; }
}

@keyframes bulbLeft {
    0%, 40%, 100% { opacity: 0.2; }
    15%, 25% { opacity: 1; }
}

@keyframes bulbRight {
    0%, 40%, 100% { opacity: 0.2; }
    55%, 75% { opacity: 1; }
}

@keyframes screenFlash {
    0%, 40%, 100% { opacity: 0; }
    15%, 25%, 55%, 75% { opacity: 0.35; }
}

/* Mobile */
@media(max-width:768px) {
    #full-blue-flash .bulb {
        width: 12px;
        height: 45px;
    }
}

/* Accessibility */
@media(prefers-reduced-motion: reduce) {
    #full-blue-flash {
        display: none;
    }
}
</style>

<div id="full-blue-flash" aria-hidden="true">

    <div class="beam left-beam"></div>
    <div class="beam right-beam"></div>

    <div class="screen-glow"></div>

    <div class="bulb left-bulb"></div>
    <div class="bulb right-bulb"></div>

</div>

<script>
(function() {
    const flash = document.getElementById(
        'full-blue-flash'
    );

    if (!flash) return;

    if (window.matchMedia(
        '(prefers-reduced-motion: reduce)'
    ).matches) {
        flash.remove();
    }
})();
</script>