/* webroot/css/preloader.css */

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f7fa;
    color: #0a1628;

    opacity: 1;
    visibility: visible;

    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.site-loader-inner {
    width: min(380px, 86vw);
    text-align: center;
    animation: loaderFadeUp 0.45s ease both;
}

/* Main circular loader */
.circle-loader {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 26px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circular loading ring */
.circle-loader-ring {
    position: absolute;
    inset: 0;

    border-radius: 50%;
    border: 4px solid #dbe3ea;
    border-top-color: #00327C;
    border-right-color: #00327C;

    animation: circleSpin 1s linear infinite;
}

/* Logo starts subtle, then becomes visible */
.circle-loader-logo {
    width: 108px;
    height: 108px;
    object-fit: contain;
    border-radius: 50%;

    opacity: 0;
    transform: scale(0.82);

    animation: logoReveal 0.65s ease forwards;
    animation-delay: 0.45s;
}

/* After load is complete */
.site-loader.is-complete .circle-loader-ring {
    animation: ringComplete 0.55s ease forwards;
}

.site-loader.is-complete .circle-loader-logo {
    animation: logoFinal 0.55s ease forwards;
}

/* Tagline */
.site-loader-tagline {
    margin: 0 0 12px;

    color: #00327C;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    opacity: 0;
    animation: textFadeIn 0.45s ease forwards;
    animation-delay: 0.7s;
}

/* Percentage */
.site-loader-percent {
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;

    opacity: 0;
    animation: textFadeIn 0.45s ease forwards;
    animation-delay: 0.85s;
}

/* Animations */
@keyframes circleSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes logoReveal {
    from {
        opacity: 0;
        transform: scale(0.82);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes logoFinal {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

@keyframes ringComplete {
    from {
        transform: rotate(0deg) scale(1);
        opacity: 1;
        border-color: #00327C;
    }

    to {
        transform: rotate(180deg) scale(1.18);
        opacity: 0;
        border-color: #00327C;
    }
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loaderFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .circle-loader {
        width: 128px;
        height: 128px;
        margin-bottom: 24px;
    }

    .circle-loader-logo {
        width: 92px;
        height: 92px;
    }

    .circle-loader-ring {
        border-width: 4px;
    }

    .site-loader-tagline {
        font-size: 12px;
        letter-spacing: 0.11em;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-loader,
    .site-loader-inner,
    .circle-loader-ring,
    .circle-loader-logo,
    .site-loader-tagline,
    .site-loader-percent {
        animation: none;
        transition: none;
    }

    .circle-loader-logo,
    .site-loader-tagline,
    .site-loader-percent {
        opacity: 1;
        transform: none;
    }
}