/* ── PREMIUM CORPORATE MINIMALIST LOADER ────────────────────────── */
:root {
    --corp-navy: #0A1128;
    --corp-accent: #d92334; /* Crimson */
    --corp-gray: #f8fafc;
    --corp-text-muted: rgba(255, 255, 255, 0.6);
}

.loader-wrapper {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--corp-navy);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
    overflow: hidden;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

/* Corporate Ripple Logo Area */
.loader-logo-area {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chasing-dots {
    position: relative;
    width: 140px;
    height: 140px;
}

.dot {
    position: absolute;
    width: 140px;
    height: 140px;
    opacity: 0;
    transform: rotate(0deg);
    animation: orbit 2.2s cubic-bezier(0.25, 1, 0.2, 1) infinite;
}

.dot::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: calc(50% - 10px);
    top: 0;
}

/* Colors matching the examples (red, yellow, teal, blue, light-blue) */
.dot-1::after { background: #e63946; }
.dot-2::after { background: #ecd503; }
.dot-3::after { background: #2a9d8f; }
.dot-4::after { background: #0072ff; }
.dot-5::after { background: #4cc9f0; }

/* Delays for chasing/follow effect */
.dot-1 { animation-delay: 0.12s; }
.dot-2 { animation-delay: 0.24s; }
.dot-3 { animation-delay: 0.36s; }
.dot-4 { animation-delay: 0.48s; }
.dot-5 { animation-delay: 0.6s; }

@keyframes orbit {
    0% {
        transform: rotate(0deg);
        opacity: 1;
        animation-timing-function: ease-out;
    }
    7% {
        transform: rotate(180deg);
        animation-timing-function: linear;
    }
    30% {
        transform: rotate(360deg);
        animation-timing-function: ease-in-out;
    }
    40% {
        transform: rotate(540deg);
    }
    55% {
        transform: rotate(720deg);
        opacity: 1;
    }
    75% {
        transform: rotate(900deg);
        opacity: 0;
    }
    100% {
        transform: rotate(900deg);
        opacity: 0;
    }
}

/* Progress HUD */
.loader-info {
    width: 260px;
}

.status-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--corp-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    height: 1.2rem;
}

.progress-container {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--corp-accent);
    border-radius: 20px;
    transition: width 0.3s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.percentage-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: 600;
    margin-top: 0.6rem;
    opacity: 0.8;
}

.loader-wrapper.loader--out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}