/**
 * Loading Screen Styles
 * Full-screen overlay with centered loading animation
 */

/* Main loading screen container - covers entire viewport */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    /* iOS-specific fixes for full viewport coverage */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-color: var(--nsf-light);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--nsf-z-notification); /* Ensures loading screen appears above other content */
    overflow: hidden; /* Prevent any scrolling during loading */
    margin: 0;
    padding: 0;
}

/* Loading animation container */
.loader {
    width: 130px;
    height: 60px;
    position: relative;
}

/* Animated loading indicator - creates a moving oval shape */
.loader:before {
    content: "";
    position: absolute;
    border-radius: 50px;
    box-shadow: 0 0 0 6px inset var(--nsf-primary);
    animation: l3 0.75s infinite alternate;
}

/* 
 * Loading animation keyframes
 * Creates a sliding motion effect from right to left and back
 */
@keyframes l3 {
    0% {
        inset: 0 70px 0 0; /* Start position - right side */
    }
    50% {
        inset: 0 0 0 0; /* Middle position - full width */
    }
    100% {
        inset: 0 0 0 70px; /* End position - left side */
    }
}