/* Loading screen – white full-screen with centered logo and left-to-right loader */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.55s ease-out 0.4s, visibility 0.55s ease-out 0.4s;
    contain: layout paint;
    will-change: opacity;
}

.loading-screen.loading-screen--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-screen__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease-out;
    will-change: opacity;
}

.loading-screen.loading-screen--hidden .loading-screen__content {
    opacity: 0;
}

.loading-screen__logo {
    max-width: 160px;
    width: 40vw;
    height: auto;
    margin-bottom: 2rem;
    display: block;
}

.loading-screen__bar-wrap {
    width: 200px;
    height: 3px;
    background: #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
}

.loading-screen__bar {
    height: 100%;
    width: 100%;
    background: #111;
    border-radius: 2px;
    transform-origin: left;
    animation: loading-screen-fill 1.4s ease-out forwards;
    will-change: transform;
}

@keyframes loading-screen-fill {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

/* -------------------------------------------------------------------------
   Variants (from Directus loading_animation field)
   center_loading = logo + filling bar centered (default)
   center_word    = logo only in center, fills from left to right within the logo
   top_loading    = logo centered + bar at top, bar fills left to right
   logo_fade      = logo only, fade in (no bar)
   off            = no loader (handled in JS)
   ------------------------------------------------------------------------- */

/* center_loading: default styles above (logo + bar centered) */

/* center_word: logo with white overlay that slides off to reveal */
.loading-screen--center_word .loading-screen__bar-wrap {
    display: none;
}

.loading-screen--center_word .loading-screen__logo-wrap {
    position: relative;
    max-width: 240px;
    width: 60vw;
    overflow: hidden;
}

.loading-screen--center_word .loading-screen__logo {
    max-width: 240px;
    width: 60vw;
    display: block;
}

.loading-screen--center_word .loading-screen__logo-reveal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    transform-origin: right;
    animation: loading-screen-logo-reveal 0.9s ease-out forwards;
    will-change: transform;
}

@keyframes loading-screen-logo-reveal {
    0% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

.loading-screen--top_loading {
    flex-direction: column-reverse;
}

.loading-screen--top_loading .loading-screen__content {
    width: 100%;
    max-width: none;
    flex-direction: column-reverse;
}

.loading-screen--top_loading .loading-screen__logo {
    max-width: 240px;
    width: 60vw;
}

.loading-screen--top_loading .loading-screen__bar-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    margin: 0;
    border-radius: 0;
}

.loading-screen--logo_fade .loading-screen__bar-wrap {
    display: none;
}

.loading-screen--logo_fade .loading-screen__logo {
    max-width: 240px;
    width: 60vw;
    animation: loading-screen-logo-fade 1.2s ease-out forwards;
}

@keyframes loading-screen-logo-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}