html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
}

/* 背景 */
.bg_cover {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;

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

    background:
        radial-gradient(circle at top left, rgba(168, 85, 247, 0.14), transparent 32%), radial-gradient(circle at bottom right, rgba(255, 215, 120, 0.08), transparent 28%), linear-gradient(135deg, #b8a4e5 0%, #d5daeb 45%, #8790ff 100%);
}


/* 中央柔光 */
.bg_cover::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(168, 85, 247, 0.12),
            rgba(255, 215, 120, 0.05),
            transparent 72%);

    filter: blur(45px);

    animation: glowBreath 6s ease-in-out infinite alternate;
}


/* loading容器 */
#loading {
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
    z-index: 2;
}

#loading h1 {
    font-family: 'Lato';
    color: #000;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 42px;
    -webkit-animation: fade 2s infinite;
    -moz-animation: fade 2s infinite;
}

#loading p {
    font-family: 'Lato';
    color: white;
    font-size: 2rem;
    margin: 0;
    padding: 0;
}


/* 文字滑入的動畫 */
.loading-text {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 1s ease forwards;
}

.loading-text:nth-child(1) {
    animation-delay: 0.3s;
}

.loading-text:nth-child(2) {
    animation-delay: 0.8s;
}

@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* h1每個字跳動動畫 */
/* .loading-animated {
    display: inline-block;
} */

/* .loading-animated span {
    display: inline-block;
    animation: bounce 1s infinite;
} */
/* @keyframes bounce {

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

    50% {
        transform: translateY(-5px);
    }

} */

.loading-animated {
    font-size: 1.5rem;
    letter-spacing: 4px;
    font-weight: 600;
    display: inline-block;
}

.loading-animated span {
    display: inline-block;

    background: linear-gradient(90deg,
            #5f259f,
            #5d55c8,
            #d8d3e2);
    background-size: 200% 100%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: pulse 1.2s ease-in-out infinite;

    text-shadow: 0 0 8px rgba(245, 122, 208, 0.5);
}

@keyframes pulse {

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

    50% {
        transform: scale(1.4);
        opacity: 1;
    }
}


/* 文字流光 */
@keyframes loadingShine {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 220% center;
    }
}


/* 點點呼吸 */
@keyframes dotPulse {

    0%,
    80%,
    100% {
        transform: scale(0.7);
        opacity: 0.4;
    }

    40% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* 慢流光 */
@keyframes shine {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 220% center;
    }
}


/* 背景呼吸 */
@keyframes glowBreath {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}