/* ============================================================
   Preloader — fullscreen overlay with the W8_MAH Lottie logo
   animation (wwwroot/Content/site/assets/lottie/mah-logo.json).
   Background is brand navy #023145 (the animation's own frames
   sit on a near-identical navy, so the 16:9 frame blends in).
   ============================================================ */

/* Always reserve the scrollbar gutter so toggling `overflow: hidden`
   (the preloader scroll-lock below) doesn't change the layout width and
   shift centered content left when the scrollbar returns. */
html {
    scrollbar-gutter: stable;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #023145;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Prevent body scroll while preloader is active */
body.preloader-active {
    overflow: hidden;
}

/* Logo container — gentle fade/scale-in while Lottie boots */
.preloader__logo-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: preloader-reveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes preloader-reveal {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Lottie mount point — source frames are 720×405 (16:9) */
.preloader__logo {
    width: min(560px, 86vw);
    aspect-ratio: 16 / 9;
    display: block;
}

.preloader__logo svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

@media (min-width: 768px) {
    .preloader__logo {
        width: min(640px, 60vw);
    }
}