/* =================================================
   PREMIUM JUMPING BOX LOADER (SLOW & ELEGANT)
================================================= */

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.app-loader.hidden {
    display: none;
}

/* Backdrop */
.loader-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(15,23,42,0.75),
        rgba(2,6,23,0.95)
    );
    backdrop-filter: blur(10px);
}

/* Loader container */
.data-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    gap: 16px;
}

/* Base box */
.data-box {
    width: 18px;
    height: 48px;
    border-radius: 10px;

    transform: translateY(0);
    opacity: 0.85;

    animation: jumpWave 2.2s ease-in-out infinite;
}

/* Individual colors */
.box-1 {
    background: linear-gradient(180deg,#facc15,#eab308);
    animation-delay: 0s;
}
.box-2 {
    background: linear-gradient(180deg,#22c55e,#16a34a);
    animation-delay: .2s;
}
.box-3 {
    background: linear-gradient(180deg,#3b82f6,#2563eb);
    animation-delay: .4s;
}
.box-4 {
    background: linear-gradient(180deg,#a855f7,#6d28d9);
    animation-delay: .6s;
}
.box-5 {
    background: linear-gradient(180deg,#ef4444,#b91c1c);
    animation-delay: .8s;
}

/* Caption */
.loader-caption {
    position: absolute;
    top: calc(50% + 72px);
    left: 50%;
    transform: translateX(-50%);

    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: .35px;
    color: #e5e7eb;
    opacity: .9;
}

/* Jump animation */
@keyframes jumpWave {
    0% {
        transform: translateY(0);
        box-shadow: none;
    }
    30% {
        transform: translateY(-22px);
        box-shadow: 0 18px 30px rgba(255,255,255,0.25);
    }
    60% {
        transform: translateY(0);
        box-shadow: none;
    }
    100% {
        transform: translateY(0);
    }
}

/* Mobile tuning */
@media (max-width: 480px) {
    .data-box {
        width: 14px;
        height: 40px;
    }

    .loader-caption {
        font-size: 0.8rem;
    }
}

.app-loader {
    transition: opacity .35s ease;
}

.app-loader.hidden {
    opacity: 0;
    pointer-events: none;
}