/* ================= LOADING OVERLAY ================= */
.loading-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary, #0f172a);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}
.loading-screen {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    background: rgba(0, 0, 0, 0.25);
}

/* ================= LOADER ================= */
.loadingspinner {
    --square: 22px;
    --offset: 26px;
    --duration: 2.4s;
    --delay: 0.2s;
    --timing-function: ease-in-out;
    --in-duration: 0.4s;
    --in-delay: 0.1s;
    --in-timing-function: ease-out;

    width: calc(3 * var(--offset) + var(--square));
    height: calc(2 * var(--offset) + var(--square));
    position: relative;
}

.loadingspinner div {
    position: absolute;
    width: var(--square);
    height: var(--square);
    border-radius: 4px;
    background: var(--accent-primary, #842F3F);
}

/* ================= ANIMATIONS ================= */

.loadingspinner #square1 {
    left: calc(0 * var(--offset));
    top: calc(0 * var(--offset));
    animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square2 { 
    left: calc(0 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square3 {
    left: calc(1 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square4 {
    left: calc(2 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square5 {
    left: calc(3 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}

@keyframes square1 {
    0% { left: 0; top: 0; }
    8.333%,100% { left: 0; top: var(--offset); }
}

@keyframes square2 {
    0% { left: 0; top: var(--offset); }
    8.333% { top: calc(2 * var(--offset)); }
    16.67% { left: var(--offset); top: calc(2 * var(--offset)); }
    25%,83.33% { left: var(--offset); top: var(--offset); }
    91.67% { left: var(--offset); top: 0; }
    100% { left: 0; top: 0; }
}

@keyframes square3 {
    0%,100% { left: var(--offset); top: var(--offset); }
    25% { top: 0; left: var(--offset); }
    33.33% { left: calc(2 * var(--offset)); top: 0; }
    41.67%,66.67% { left: calc(2 * var(--offset)); top: var(--offset); }
    75% { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
    83.33% { left: var(--offset); top: calc(2 * var(--offset)); }
}

@keyframes square4 {
    0%,33.33% { left: calc(2 * var(--offset)); top: var(--offset); }
    41.67% { top: calc(2 * var(--offset)); }
    50% { left: calc(3 * var(--offset)); top: calc(2 * var(--offset)); }
    58.33%,100% { left: calc(3 * var(--offset)); top: var(--offset); }
}

@keyframes square5 {
    0%,50% { left: calc(3 * var(--offset)); top: var(--offset); }
    58.33% { top: 0; }
    66.67% { left: calc(2 * var(--offset)); top: 0; }
    75%,100% { left: calc(2 * var(--offset)); top: var(--offset); }
}

@keyframes squarefadein {
    from {
        transform: scale(0.75);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}