.loading__dialog {
    width: 100dvw !important;
    height: 100dvh !important;
    inset: 0 !important;
    z-index: var(--z-loading);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading__dialog-titlebar {
    display: none;
}

.loading {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    overflow: hidden !important;
}

.loading__fade-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: loadingOpacity 450ms cubic-bezier(0, 0.02, 0, 1), loadingScale 800ms cubic-bezier(0.22, 0.61, 0.35, 1);
}

.loading__image {
    width: 256px;
    height: 256px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading__text {
    padding: 0;
    margin: 0;
}

.loading__spinner {
    position: absolute;
    width: 164px;
    height: 164px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(45deg);
}


.loading__airplane {
    position: relative;
    width: 164px;
    height: 164px;
    animation: airplaneRotate 2s linear infinite;
    z-index: 2; /* 飛機在點點上面 */
}

    /* 飛機圖片 */
    .loading__airplane > img {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%, -58%);
        z-index: 3; /* 飛機圖片最高層 */
    }   



@keyframes loadingOpacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes loadingScale {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}

@keyframes airplaneRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



@keyframes contrailsScale {
    0%, 5% {
        transform: scale(0);
        opacity: 0;
    }

    15% {
        transform: scale(1.5);
        opacity: 1;
    }

    45% {
        transform: scale(1);
        opacity: 0.8;
    }

    70% {
        transform: scale(0.5);
        opacity: 0.4;
    }

    85%, 100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes contrailsColor {
    0% {
        background-position-x: 25%;
    }

    12.5% {
        background-position-x: 0;
    }

    62.5% {
        background-position-x: 100%;
    }

    100% {
        background-position-x: 25%;
    }
}
.loading__dots {
    position: absolute;
    left: 0;
    top: 0;
    width: 164px;
    height: 164px;
    pointer-events: none;
    z-index: 1; /* 點點在下面 */
}

.loading__dot {
    position: absolute;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
    background: #7196d1;
    animation: contrailsScale 2s linear infinite;
    /* 不需要 z-index */
}