/* Loader Container - Full Screen Yellow */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Default Full Clip Path */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s ease 0.5s;
    will-change: clip-path, opacity;
}

/* When loaded, animate the clip-path to shrink like a lightning bolt/zap */
.page-loader.loaded {
    animation: lightning-zap 0.4s forwards ease-in-out;
}

/* Optional: Inner content (e.g. Logo) to animate out first */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.page-loader.loaded .loader-content {
    opacity: 0;
    transform: scale(2);
}

@keyframes lightning-zap {

    /* 
        Sequence:
        0% = Full Screen
        20% = Starts to jaggedly indent from sides (Thick Bolt)
        50% = Thin jagged lightning bolt in center
        100% = Disappears (Width 0)
    */
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    15% {
        /* Big jagged slice */
        clip-path: polygon(20% 0, 80% 0,
                70% 30%, 90% 30%,
                60% 60%, 85% 60%,
                40% 100%, 15% 100%,
                25% 65%, 10% 65%,
                30% 35%, 5% 35%);
    }

    40% {
        /* Thin Bolt */
        clip-path: polygon(45% 0, 55% 0,
                52% 30%, 58% 30%,
                48% 60%, 55% 60%,
                50% 100%, 48% 100%,
                45% 65%, 40% 65%,
                42% 35%, 35% 35%);
    }

    100% {
        /* Closed/Gone */
        clip-path: polygon(50% 0, 50% 0,
                50% 30%, 50% 30%,
                50% 60%, 50% 60%,
                50% 100%, 50% 100%,
                50% 65%, 50% 65%,
                50% 35%, 50% 35%);
        opacity: 0;
    }
}