/*
 Theme Name: Blocksy Child
 Template: blocksy
*/

/* =============================================================================
   CYBERPUNK NEON TRANSITION EFFECT
   ============================================================================= */

/* Full-screen neon overlay */
.cyberpunk-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000000 !important; /* Black background */
    z-index: 999999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: block !important;
}

/* Static glitch lines using gradients */
.cyberpunk-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            #ffffff 2px,
            #ffffff 8px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            #00f7ff 3px,
            #00f7ff 12px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 4px,
            #000000 4px,
            #000000 15px
        );
    opacity: 0.3;
    mix-blend-mode: overlay;
}

/* Second layer of lines for more chaos */
.cyberpunk-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 5px,
            #ffffff 5px,
            #ffffff 18px
        ),
        repeating-linear-gradient(
            270deg,
            transparent,
            transparent 6px,
            #00f7ff 6px,
            #00f7ff 20px
        );
    opacity: 0.2;
    mix-blend-mode: screen;
}

/* Active state for transition */
.cyberpunk-overlay.active {
    opacity: 1 !important;
    pointer-events: all !important;
    visibility: visible !important;
}

/* Accessibility: Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cyberpunk-overlay,
    .cyberpunk-overlay::before,
    .cyberpunk-overlay::after {
        transition: none !important;
        animation: none !important;
    }
    
    .cyberpunk-overlay.active {
        opacity: 0.5; /* Reduced intensity for accessibility */
    }
}

/* Ensure overlay is above everything */
.cyberpunk-overlay {
    z-index: 999999 !important;
}