/* 整個背景黑色 */
body {
    background: #000;
    margin: 0;
}

/* 外層容器：垂直置中 + 動畫與文字上下排列 */
.loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 28px; /* 點點動畫與文字距離 */
}

/* 點點動畫區 */
.cssload-dots {
    height: 25vh;
    position: relative;
    filter: url(#goo);
    margin-top: 45vh
}

/* 小點設定 */
.cssload-dot {
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
}

    .cssload-dot:before {
        content: "";
        width: 34px;
        height: 34px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin-left: -17px;
        margin-top: -17px;
    }

    /* 中心大點 */
    .cssload-dot:nth-child(5):before {
        z-index: 100;
        width: 44px;
        height: 44px;
        margin-left: -22px;
        margin-top: -22px;
        animation: cssload-dot-colors 4.6s ease infinite;
    }

    /* 四個旋轉點：不同顏色 + 不同延遲 */
    .cssload-dot:nth-child(1) {
        animation: cssload-dot-rotate-1 4.6s linear infinite;
    }

        .cssload-dot:nth-child(1):before {
            background-color: #FF4D6D; /* 粉紅 */
            animation: cssload-dot-move 4.6s ease infinite;
        }

    .cssload-dot:nth-child(2) {
        animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
    }

        .cssload-dot:nth-child(2):before {
            background-color: #4DD0FF; /* 電光藍 */
            animation: cssload-dot-move 4.6s 1.15s ease infinite;
        }

    .cssload-dot:nth-child(3) {
        animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
    }

        .cssload-dot:nth-child(3):before {
            background-color: #7CFC00; /* 螢光綠 */
            animation: cssload-dot-move 4.6s 2.3s ease infinite;
        }

    .cssload-dot:nth-child(4) {
        animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
    }

        .cssload-dot:nth-child(4):before {
            background-color: #FFD93D; /* 亮橘黃 */
            animation: cssload-dot-move 4.6s 3.45s ease infinite;
        }

/* 動畫：上下彈跳 */
@keyframes cssload-dot-move {
    0% {
        transform: translateY(0);
    }

    18%, 22% {
        transform: translateY(-68px);
    }

    40%, 100% {
        transform: translateY(0);
    }
}

/* 中心大點顏色循環 → 加入紫色變五色 */
@keyframes cssload-dot-colors {
    0% {
        background-color: #FFD93D;
    }
    /* 黃 */
    20% {
        background-color: #FF4D6D;
    }
    /* 粉紅 */
    40% {
        background-color: #4DD0FF;
    }
    /* 藍 */
    60% {
        background-color: #7CFC00;
    }
    /* 綠 */
    80% {
        background-color: #B983FF;
    }
    /* 紫 */
    100% {
        background-color: #FFD93D;
    }
    /* 黃 */
}

/* 旋轉路徑動畫 */
@keyframes cssload-dot-rotate-1 {
    0% {
        transform: rotate(-105deg);
    }

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

@keyframes cssload-dot-rotate-2 {
    0% {
        transform: rotate(165deg);
    }

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

@keyframes cssload-dot-rotate-3 {
    0% {
        transform: rotate(435deg);
    }

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

@keyframes cssload-dot-rotate-4 {
    0% {
        transform: rotate(705deg);
    }

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

/* Loading 文字 */
.loading-text {
    font: 700 24px/1.4 "Segoe UI", Roboto, Arial;
    letter-spacing: .15em;
    color: #FFFFFF;
    text-transform: uppercase;
    animation: breathe 1.8s ease-in-out infinite;
    user-select: none;
}

@keyframes breathe {
    0%,100% {
        opacity: 0.7;
        letter-spacing: .12em;
    }

    50% {
        opacity: 1;
        letter-spacing: .18em;
    }
}