.app-loader {
    --app-loader-duration: 5s;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 25px;
    background: #091624;
    color: #fff;
    font-family: Inter, Arial, sans-serif;
    text-align: center;
    visibility: hidden;
    animation: app-loader-opening var(--app-loader-duration) step-end;
}

.app-loader img {
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
}

.app-loader p {
    color: #d7b674;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.app-loader strong {
    font-size: clamp(26px, 5vw, 48px);
    letter-spacing: -1.5px;
}

.app-loader span {
    color: #8fa8be;
    font-size: 13px;
}

.app-loader__progress {
    width: min(100%, 240px);
    height: 3px;
    flex-shrink: 0;
    margin-top: 20px;
    background: #e1bb75;
    transform-origin: left;
    animation: app-loader-progress var(--app-loader-duration) linear;
}

@keyframes app-loader-opening {
    from { visibility: visible; }
    to { visibility: hidden; }
}

@keyframes app-loader-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Let the focused site or app control remain visible to keyboard users. */
body:has(:focus-visible) .app-loader {
    opacity: 0;
    pointer-events: none;
}

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

@media print {
    .app-loader {
        display: none;
    }
}