/* ===== SPLASH LOADING — Animation Spec ===== */

#mt-h5-loading {
    width: 100%;
    height: 100%;
    background: rgba(237, 238, 245, 1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;

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

    opacity: 0;
    /* ENTER: opacity 0→1, 240ms ease-out */
    animation: splash-enter 240ms ease-out forwards;
}

/* Logo Stack */
#mt-h5-loading .icon {
    width: 93px;
    opacity: 0;
    transform: translateY(8px);
    /* ENTER: opacity 0→1, translateY 8→0, 320ms ease-out, delay 60ms */
    /* LOOP: scale 1.0↔1.04 breathe, 1800ms ease-in-out, alternate ∞, starts after enter (60+320=380ms) */
    animation:
        logo-up 320ms ease-out 60ms forwards,
        logo-breathe 1800ms ease-in-out 380ms infinite alternate;
}

/* Progress Bar */
#mt-h5-loading .progress {
    width: 160px;
    height: 10px;
    border-radius: 20px;
    margin-top: 16px;
    position: relative;
    overflow: hidden;

    transform: scaleX(0);
    transform-origin: center;
    /* ENTER: scaleX 0→1, origin center, 240ms ease-out, delay 180ms */
    animation: bar-expand 240ms ease-out 180ms forwards;
}

#mt-h5-loading .progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffa6e0 0%, #7683ff 50%, #ffa6e0 100%);
    background-size: 200% 100%;
    background-position: 100% center;
    /* LOOP: shimmer background-position X 100%→-100%, 1500ms LINEAR ∞, starts after enter (180+240=420ms) */
    animation: bar-shimmer 1500ms linear 420ms infinite;
    will-change: background-position;
}

/* ===== EXIT state ===== */

#mt-h5-loading.splash-exit {
    /* EXIT: opacity 1→0, 220ms ease-out, delay 80ms */
    animation: exit 220ms ease-out 80ms forwards;
}

#mt-h5-loading.splash-exit .icon {
    /* EXIT: opacity 1→0, translateY 0→-4, 220ms ease-out */
    animation: logo-exit 220ms ease-out forwards;
}

#mt-h5-loading.splash-exit .progress {
    /* EXIT: scaleX 1→1.05, opacity 1→0, 200ms ease-out */
    animation: bar-exit 200ms ease-out forwards;
}

#mt-h5-loading.splash-exit .progress::before {
    animation: none;
}

/* ===== KEYFRAMES ===== */

@keyframes splash-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes exit {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes logo-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logo-breathe {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.04);
    }
}

@keyframes logo-exit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes bar-expand {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes bar-shimmer {
    from {
        background-position: 100% center;
    }
    to {
        background-position: -100% center;
    }
}

@keyframes bar-exit {
    from {
        transform: scaleX(1);
        opacity: 1;
    }
    to {
        transform: scaleX(1.05);
        opacity: 0;
    }
}

/* ===== vConsole ===== */

#__vconsole {
    position: relative;
    z-index: 9999999999;
}