/*
    |--------------------------------------------------------------------------
    | Page Loading
    |--------------------------------------------------------------------------
    */

    body.page-loading {
        overflow: hidden;
    }

    #pageLoader {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(
                circle at 50% 50%,
                rgba(99, 102, 241, .10),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                #f8fafc 0%,
                #f1f5f9 100%
            );
        opacity: 1;
        visibility: visible;
        transition:
            opacity .35s ease,
            visibility .35s ease;
    }

    #pageLoader.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #pageLoader .loader {
        width: 28px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #E3AAD6;
        transform-origin: top;
        display: grid;
        animation: l3-0 1s infinite linear;
    }

    #pageLoader .loader::before,
    #pageLoader .loader::after {
        content: "";
        grid-area: 1 / 1;
        background: #F4DD51;
        border-radius: 50%;
        transform-origin: top;
        animation: inherit;
        animation-name: l3-1;
    }

    #pageLoader .loader::after {
        background: #F10C49;
        --s: 180deg;
    }

    @keyframes l3-0 {
        0%,
        20% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes l3-1 {
        50% {
            transform: rotate(var(--s, 90deg));
        }

        100% {
            transform: rotate(0);
        }
    }

    /*
    |--------------------------------------------------------------------------
    | ซ่อนองค์ประกอบหลักระหว่างโหลด
    |--------------------------------------------------------------------------
    */

    .login-shell {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition:
            opacity .45s ease,
            transform .45s ease,
            visibility .45s ease;
    }

    body.page-loading .login-shell {
        opacity: 0;
        visibility: hidden;
        transform: translateY(14px);
    }

    /*
    |--------------------------------------------------------------------------
    | ลด Animation สำหรับผู้ใช้ที่ตั้งค่า Reduce Motion
    |--------------------------------------------------------------------------
    */

    @media (prefers-reduced-motion: reduce) {
        #pageLoader .loader,
        #pageLoader .loader::before,
        #pageLoader .loader::after {
            animation-duration: 1.8s;
        }

        #pageLoader,
        .login-shell {
            transition: none;
        }
    }