/*
==========
Page loader
==========
*/

.container__loader--progress {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;

    background:
        radial-gradient(
            circle at 30% 40%,
            rgba(79, 140, 255, 0.18),
            transparent 45%
        ),
        radial-gradient(
            circle at 70% 60%,
            rgba(0, 194, 203, 0.14),
            transparent 50%
        ),
        var(--color-primary);

    z-index: 9999;

    transition:
        opacity var(--transition-slow, 400ms) ease,
        visibility var(--transition-slow, 400ms) ease;
}

.container__loader--process {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;

    background: rgba(29, 45, 68, 0.75);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    z-index: 9999;

    transition:
        opacity var(--transition-slow, 400ms) ease,
        visibility var(--transition-slow, 400ms) ease;
}

.container__loader--progress.is-hidden, .container__loader--process.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader {
    --size: 1px;
    --thickness: 5;

    width: calc(50 * var(--size));
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            farthest-side,
            #00C2CB 94%,
            #0000
        ) top / calc(var(--thickness) * var(--size)) calc(var(--thickness) * var(--size)) no-repeat,
        conic-gradient(
            #0000 30%,
            #00C2CB
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            #0000 calc(100% - (var(--thickness) * var(--size))),
            #000 0
        );
    mask:
        radial-gradient(
            farthest-side,
            #0000 calc(100% - (var(--thickness) * var(--size))),
            #000 0
        );

    animation: rotation 1s linear infinite;
}

.loader__text {
    margin: 0;

    color: var(--color-white);

    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;

    opacity: 0.9;

    animation: loader-pulse 1.6s ease-in-out infinite;
}

/* 
==========
Loader animations
==========
*/

@keyframes rotation {
    100% {
        transform: rotate(1turn);
    }
}

@keyframes loader-pulse {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader {
        animation: none;
    }

    .loader__text {
        animation: none;
    }
}