/* Lightning effect overlay that follows the scrollbar as an additional layer */
.lightning-scrollbar-overlay {
    position: fixed;
    right: 0;
    top: 0;
    width: var(--scrollbar-width, 12px); /* Dynamically match exact scrollbar width */
    height: 100%; /* Use % instead of vh to avoid overflow */
    pointer-events: none;
    z-index: 102; /* Higher than scrollbar z-index to ensure overlay is visible */
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: hidden;
    mix-blend-mode: screen; /* Helps blend effects better with scrollbar */
}

/* Main lightning bolt for the overlay */
.lightning-bolt {
    position: absolute;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    height: 0;
    filter: blur(0.5px) drop-shadow(0 0 2px rgba(83, 109, 254, 0.8));
    transition: height 0.1s linear;
    overflow: hidden;
}

/* Active lightning bolt */
.scrolling.active-scroll .lightning-bolt {
    height: var(--bolt-height, 50px);
    transition: height 0.05s linear;
}

/* Lightning segments to make the bolt look more natural */
.lightning-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 20%, 
        rgba(131, 156, 255, 0.8) 40%,
        rgba(83, 109, 254, 0.7) 60%,
        rgba(83, 109, 254, 0.3) 80%,
        rgba(83, 109, 254, 0) 100%);
    opacity: 0;
    animation: lightning-segment-flicker 0.3s infinite alternate;
}

/* Different delays for segments to create dynamic effect */
.lightning-segment:nth-child(1) {
    animation-delay: 0s;
}
.lightning-segment:nth-child(2) {
    animation-delay: 0.1s;
}
.lightning-segment:nth-child(3) {
    animation-delay: 0.05s;
}

/* Flickering animation for lightning segments */
@keyframes lightning-segment-flicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.5; }
}

/* Direction-specific styling for lightning bolt */
.scroll-up .lightning-bolt {
    border-radius: 0 0 3px 3px;
    background: linear-gradient(to top,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(131, 156, 255, 0.8) 50%, 
        rgba(83, 109, 254, 0.6) 100%);
}

.scroll-down .lightning-bolt {
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(131, 156, 255, 0.8) 50%, 
        rgba(83, 109, 254, 0.6) 100%);
}

/* Speed-specific effects */
.scroll-fast .lightning-bolt {
    filter: blur(0.5px) drop-shadow(0 0 5px rgba(83, 109, 254, 1));
}

.scroll-medium .lightning-bolt {
    filter: blur(0.5px) drop-shadow(0 0 3px rgba(83, 109, 254, 0.8));
}

/* Enhanced dark mode styling */
[data-theme="dark"] .lightning-bolt {
    background: rgba(255, 255, 255, 0.9);
    filter: blur(0.5px) drop-shadow(0 0 5px rgba(131, 156, 255, 1));
}

[data-theme="dark"] .scroll-fast .lightning-bolt {
    filter: blur(0.5px) drop-shadow(0 0 8px rgba(131, 156, 255, 1));
}

/* Additional lightning sparks */
.lightning-spark {
    position: absolute;
    width: 2px;
    height: 4px;
    background: rgba(255, 255, 255, 0.9);
    transform-origin: center;
    animation: spark-flicker 0.2s infinite alternate;
    filter: blur(0.5px);
    opacity: 0;
}

/* Show sparks during active scrolling */
.scrolling.active-scroll .lightning-spark {
    opacity: 0.8;
}

/* Random angles for sparks */
.lightning-spark:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: 0s;
}
.lightning-spark:nth-child(2) {
    transform: rotate(0deg);
    animation-delay: 0.1s;
}
.lightning-spark:nth-child(3) {
    transform: rotate(0deg);
    animation-delay: 0.05s;
}
.lightning-spark:nth-child(4) {
    transform: rotate(0deg);
    animation-delay: 0.15s;
}

/* Spark animation */
@keyframes spark-flicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.4; }
}

/* Lightning flashes for fast scrolling */
.lightning-flash {
    position: absolute;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(131, 156, 255, 0.7) 50%,
        rgba(83, 109, 254, 0.5) 100%);
    filter: blur(0.5px);
    width: 100%;
    opacity: 0;
    animation: flash-animation 0.3s ease-out forwards;
}

/* Animation for lightning flashes */
@keyframes flash-animation {
    0% { opacity: 0; transform: scaleY(0); }
    50% { opacity: 0.7; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(0.5); }
}

/* Dark mode enhancements for flashes */
[data-theme="dark"] .lightning-flash {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(131, 156, 255, 0.8) 50%,
        rgba(83, 109, 254, 0.6) 100%);
}