/* 外壳铺满视口；--show-* 仅由 adpater.ts 写入，只用于 .pl-bg */

#mt-h5-loading {
    position: fixed;
    inset: 0;
    z-index: 900;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.7s ease;
    background: #000;
}

#mt-h5-loading .pl-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--show-width, 100%);
    height: var(--show-height, 100%);
    max-width: none;
    object-fit: cover;
    object-position: top center;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

html[data-viewport='mobile'] #mt-h5-loading .pl-bg {
    width: 100%;
    height: var(--vh, 100%);
}

html[data-viewport] #mt-h5-loading .pl-bg.is-ready {
    opacity: 1;
}

#mt-h5-loading.hide {
    opacity: 0;
    pointer-events: none;
}

/* 淡出期间定格当前帧：不重启描边，也不回填白色 */
#mt-h5-loading.hide .pl-path,
#mt-h5-loading.hide .pl-load span {
    animation-play-state: paused;
}

#mt-h5-loading .pl-core {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mt-h5-loading .pl-svg {
    display: block;
    width: 150px;
    max-width: 38vw;
    height: auto;
    overflow: visible;
    /* filter: drop-shadow(0 9px 24px rgba(185, 65, 40, 0.45)); */
}

#mt-h5-loading .pl-path {
    fill: #fff;
    fill-opacity: 0;
    fill-rule: evenodd;
    stroke: #fff;
    stroke-width: 1.3;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: pldraw 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

#mt-h5-loading .pl-load {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.5);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    text-transform: lowercase;
}

#mt-h5-loading .pl-load span {
    animation: pldot 1.3s ease-in-out infinite;
}

#mt-h5-loading .pl-load span:nth-of-type(2) {
    animation-delay: 0.18s;
}

#mt-h5-loading .pl-load span:nth-of-type(3) {
    animation-delay: 0.36s;
}

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

@keyframes pldot {
    0%,
    70%,
    100% {
        opacity: 0.25;
    }

    35% {
        opacity: 1;
    }
}

@keyframes pldraw {
    0% {
        stroke-dashoffset: 1;
        fill-opacity: 0;
    }

    42% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }

    58%,
    80% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }

    96%,
    100% {
        stroke-dashoffset: -1;
        fill-opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mt-h5-loading,
    #mt-h5-loading .pl-load span {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }

    #mt-h5-loading .pl-path {
        animation: none;
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}