/* ===== EVE Preloader v3 (real %, glass, no brand) ===== */
:root {
    --slate-900: #0f172a;
    --slate-800: #111827;
    --slate-700: #1f2937;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --teal-300: #5eead4;
    --blue-400: #60a5fa;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --glass-bg: rgba(15,23,42,.84);
    --glass-edge: rgba(255,255,255,.09);
}

html.is-loading, html.is-loading body {
    overflow: hidden;
}

/* Overlay */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    background: radial-gradient(900px 600px at 50% 30%, rgba(94,234,212,.10), transparent 60%), linear-gradient(180deg, rgba(17,24,39,.96), rgba(15,23,42,.98));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--slate-200);
    transition: opacity .35s ease, visibility .35s ease;
}

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

.preloader__center {
    position: relative;
    width: 200px;
    height: 230px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* Bloom */
.preloader .glow {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(94,234,212,.22), rgba(94,234,212,0) 70%);
    filter: blur(10px);
    animation: glowPulse 2.6s ease-in-out infinite;
}

/* Hex */
.hex {
    position: absolute;
    width: 132px;
    aspect-ratio: 1/1;
    clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0% 50%);
}

.hex--outer {
    background: conic-gradient(from 0deg, rgba(94,234,212,.0) 0turn, rgba(94,234,212,.4) .2turn, rgba(96,165,250,.65) .5turn, rgba(94,234,212,.4) .8turn, rgba(94,234,212,.0) 1turn);
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
    animation: spin 8s linear infinite;
    mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}

.hex--inner {
    width: 112px;
    background: radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 45%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid var(--glass-edge);
    animation: bob 2.2s ease-in-out infinite;
}

/* Orbits */
.orbit {
    position: absolute;
    width: 164px;
    height: 164px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.10);
    animation: spin 9s linear infinite;
}

.orbit--b {
    width: 188px;
    height: 188px;
    animation-duration: 14s;
    animation-direction: reverse;
}

.orbit .dot {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, var(--teal-300));
    box-shadow: 0 0 14px rgba(94,234,212,.9);
}

/* Progress bar */
.preloader__bar {
    position: absolute;
    bottom: 38px;
    width: 176px;
    height: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--glass-edge);
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}

    .preloader__bar .fill {
        display: block;
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, rgba(94,234,212,.90), rgba(59,130,246,.98));
        box-shadow: 0 8px 18px rgba(59,130,246,.35);
        transition: width .14s ease; /* responsive but snappy */
    }

/* Percent: elegant, legible, no brand */
.preloader__pct {
    position: absolute;
    bottom: 14px;
    font: 800 13px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--slate-300), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

/* A11y helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Animations */
@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes bob {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

@keyframes glowPulse {
    0%,100% {
        opacity: .85;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.06)
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .preloader *, .preloader *::before, .preloader *::after {
        animation: none !important;
        transition: none !important;
    }
}