/* 中傑挑的Loading遮罩 */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 調整遮罩的高度以覆蓋整個視窗 */
    width: 100%;
    height: 100%;
}

.loader {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top: 6px solid #00f1ff;
    border-right: 6px solid #00f1ff;
    animation: rotate 1.5s linear infinite, glow 1.5s ease-in-out infinite;
    position: relative;
}

    .loader::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border-radius: 50%;
        border: 2px solid rgba(0, 241, 255, 0.2);
        animation: pulse 2s ease-in-out infinite;
    }

    .loader::after {
        content: '';
        position: absolute;
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
        border-radius: 50%;
        border: 2px solid rgba(0, 241, 255, 0.1);
        animation: pulse 2s ease-in-out infinite 0.5s;
    }

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

    100% {
        transform: rotate(360deg);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 241, 255, 0.8), 0 0 20px rgba(0, 241, 255, 0.6), 0 0 30px rgba(0, 241, 255, 0.4);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 241, 255, 1), 0 0 30px rgba(0, 241, 255, 0.8), 0 0 40px rgba(0, 241, 255, 0.6);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}