/* Custom loader container - matches BoundedScreen background */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* Loader content - matches SplashScreen centered layout */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* Initialization text with percent - matches SplashScreen text style */
.loader-text {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.15px;
}

#loading-percent {
    font-weight: 600;
    color: rgba(78, 117, 238, 0.9);
}

/* Lightning loader container - holds both stroke and fill layers */
.lightning-container {
    position: relative;
    width: 120px;
    height: 180px;
    padding: 15px;
}

/* Lightning stroke layer - always visible, no animation */
.lightning-stroke {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 120px;
    height: 180px;
    filter: drop-shadow(0 0 10px rgba(198, 193, 231, 0.4));
    opacity: 0.8;
}

/* Lightning fill layer - animated, positioned on top */
.lightning-fill {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 120px;
    height: 180px;
    /* Animate fill from bottom to top */
    clip-path: inset(100% 0 0 0);
    animation: fill-lightning var(--loading-duration, 120s) linear forwards;
}

/* Fill animation - clips from bottom to top */
@keyframes fill-lightning {
    0% {
        clip-path: inset(100% 0 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* Fast completion animation when loaded */
#loading.loaded .lightning-fill {
    animation: fill-lightning-fast 0.5s ease-out forwards;
}

@keyframes fill-lightning-fast {
    from {
        clip-path: inset(var(--current-clip, 50%) 0 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}