.loading-wrap {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    padding: 24px;
}

.loading-zoom {
    transform: scale(1.5);
    transform-origin: center;
}

.loading-card {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    padding: clamp(28px, 6vw, 60px) clamp(28px, 9vw, 84px);
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    animation: fadeUpMagic 700ms cubic-bezier(.2, .7, .2, 1) 80ms forwards;
}

.loading-small {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(18px, 3.2vw, 22px);
    letter-spacing: 1.2px;
    font-family: 'Witches Note Free', 'Melkia Starlight', 'Combo', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

.loading-title {
    font-family: 'Ghostburn', 'Melkia Starlight', 'Combo', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    color: #ffffff;
    font-size: clamp(48px, 12vw, 112px);
    line-height: 0.95;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.35), 0 0 18px rgba(236, 72, 153, 0.28);
}

/* Glowing progress bar */
.progress {
    margin-top: 18px;
    width: min(72vw, 520px);
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.18);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 18px rgba(197, 180, 255, 0.75), 0 0 24px rgba(255, 105, 180, 0.75), 0 0 42px rgba(167, 139, 250, 0.65), 0 0 64px rgba(139, 92, 246, 0.55);
}

.progress .bar {
    height: 100%;
    width: 0%;
    position: relative;
    background: linear-gradient(90deg,
            #ff6abf 0%,
            #ff86cb 16%,
            #ffa2d7 32%,
            #f1d8ff 48%,
            #cdbdff 64%,
            #a794ff 80%,
            #8b5cf6 100%);
    background-size: 300% 100%;
    animation: loadBar 6s ease-in-out forwards, shimmer 3.2s ease-in-out infinite, pulseGlow 1.2s ease-in-out infinite alternate;
    box-shadow: 0 0 42px rgba(255, 130, 200, 0.95), 0 0 62px rgba(197, 180, 255, 0.95), 0 0 86px rgba(139, 92, 246, 0.75), 0 0 120px rgba(197, 180, 255, 0.55);
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.85));
    will-change: transform, box-shadow;
}

.progress .bar::after {
    content: '';
    position: absolute;
    inset: -12px -18px;
    background:
        radial-gradient(80px 40px at 20% 50%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
        radial-gradient(120px 60px at 60% 50%, rgba(255, 90, 180, 0.85), rgba(255, 90, 180, 0) 70%),
        radial-gradient(100px 50px at 90% 50%, rgba(197, 180, 255, 0.85), rgba(197, 180, 255, 0) 70%);
    filter: blur(18px) saturate(140%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.95;
    animation: pulseAura 1.2s ease-in-out infinite alternate;
}

@keyframes loadBar {
    to {
        width: 100%;
    }
}

@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 28px rgba(236, 72, 153, 0.75), 0 0 44px rgba(167, 139, 250, 0.75), 0 0 64px rgba(139, 92, 246, 0.65);
    }

    100% {
        box-shadow: 0 0 60px rgba(236, 72, 153, 1), 0 0 90px rgba(167, 139, 250, 1), 0 0 130px rgba(139, 92, 246, 0.95);
    }
}

@keyframes pulseAura {
    0% {
        opacity: 0.85;
    }

    100% {
        opacity: 1;
    }
}

/* Subtle noise overlay to break banding */
.progress::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
        repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
    background-size: 8px 8px, 10px 10px;
    animation: noiseDrift 2.8s linear infinite;
}

@keyframes noiseDrift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 20px 14px, -16px -12px;
    }
}