/* ===== 1. 基礎設定 ===== */

/* 顏色設定 */
:root {
    --text-primary: rgb(255, 255, 255);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glow-blue: rgba(165, 216, 255, 0.65);
}

/* 全局樣式 */
body {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;

    overflow: hidden;
    background: #020205d0;
    perspective: 1000px;  /* 設置透視效果 */

    font-size: 16px;      /* 基本字體大小 */
    font-family: 'Trebuchet MS', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    color: var(--text-primary);

    /* 禁止選取文字 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* ====== 2. 背景與特效 ====== */

/* 星雲背景 */
.nebula {
    z-index: -3;
    position: fixed;

    /* 擴展到視窗外 */
    width: 150vmax;
    height: 150vmax;    

    /* 星雲漸變背景 */
    background:
        radial-gradient(circle at 30% 30%, #7d049b 0%, transparent 50%),  /* 紫色星雲 */
        radial-gradient(circle at 70% 70%, #0395a8 0%, transparent 50%),  /* 藍色星雲 */
        radial-gradient(circle at 50% 50%, #15002a 0%, transparent 50%);  /* 深色背景 */
    filter: contrast(1.2);
    mix-blend-mode: screen;
    opacity: 0.7;
    pointer-events: none;

    animation: nebula-flow 20s linear infinite;

    /* 效能優化 */
    contain: strict;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* 星星背景 */
.stars {
    z-index: -2;
    position: fixed;
    top: 0; left: 0;
    width: 1.5px; height: 1.5px;
    pointer-events: none;
    animation: star-twinkle 5s infinite;

    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* 流星背景 */
.shootingstars {
    z-index: -1;
    position: fixed;
    height: 2px;
    background: linear-gradient(-45deg, #ffffff, rgba(0, 212, 255, 0));
    filter: drop-shadow(0 0 6px #ffffff);
    pointer-events: none;
    animation: sstar-tail 3s linear infinite, sstar-shooting 3s linear infinite;

    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}


/* ===== 3. 佈局與元件 ====== */

/* 容器 */
.container {
    display: flex;
    flex-direction: column;    /* 調換主軸方向呈垂直 */
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    gap: 1rem;
}

/* 玻璃面板 */
.glass-panel {
    position: relative;

    width: 80%;
    max-width: 450px;
    height: fit-content;
    margin-bottom: 1.5rem;
    padding: clamp(1.5rem, 3vw, 3rem);
    border-radius: 2.5rem;

    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px) saturate(80%);
    backdrop-filter: blur(8px) saturate(80%);  /* 背景模糊和飽和度 */
    border: 1px solid var(--glass-border);
    text-align: center;
    /* 陰影效果 */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.05);
    transition: all 1s cubic-bezier(0.34, 1.25, 0.64, 1);

    contain: content;
    will-change: backdrop-filter, opacity, transform;
}

/* 玻璃面板隱藏 */
.glass-panel.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(50vh) scale(0.9);
}

/* 導航項目樣式 */
.nav-item {
    display: block;
    margin: 1.5rem auto;
    padding: 0.75rem;
    border-radius: 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);

    text-decoration: none;
    color: var(--text-primary);
    font-size: clamp(0.7rem, 4vw, 1.3rem);
    font-weight: 600;
    letter-spacing: clamp(4px, 1vw, 15px);

    transition: all 0.4s ease; 
}

/* 導航項目懸停效果 */
.nav-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(165, 216, 255, 0.3);
}

/* 網頁主標題樣式 */
header h1 {
    position: relative;
    display: inline-block;   
    margin-top: 0;
    margin-bottom: 1rem;
    cursor: pointer;
    font-size: clamp(1.8rem, 8vw, 3rem);
    font-weight: 1000;
    letter-spacing: 2px;
    text-shadow: 0 0 20px var(--glow-blue);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 主標題懸停效果 */
header h1:hover, header h1.keep-scale {
    /* !important 確保壓過滑鼠移開 */
    transform: scale(1.05) !important;
    text-shadow: 
        0 0 15px var(--text-secondary),
        0 0 30px var(--glow-blue)
        !important;
}

/* 主標題點擊反饋效果 */
header h1.clicked {
    transform: scale(0.95) !important;
}

/* 使用偽元素製作星星符號 (預設隱形) */
header h1::before, header h1::after {
    content: "✧";
    position: absolute;
    top: 50%;                                                   /* 垂直居中 -> 頂邊下拉 h1 的 50% */
    transform: translateY(-50%);                                /* 垂直居中 -> 以自身高度往上移動 50% */

    color: transparent;
    opacity: 0;
    
    background: linear-gradient(135deg, #3de7fd, #dd56ff);
    -webkit-background-clip: text;
    background-clip: text;                                      /* 背景裁剪到文字上 */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));    /* 星星光暈效果 */
    transition: all 0.5s ease;
}

/* 左右邊的星星 */
header h1::before {left: -4rem;}
header h1::after {right: -4rem;}

/* 星星加上 .active 類別時 */
header h1.active::before, header h1.active::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

/* 網頁副標題樣式 */
header .subtitle {
    font-size: clamp(0.5rem, 3vw, 1.2rem);
    font-weight: 450;
    font-family: "Microsoft JhengHei", sans-serif;
    margin-bottom: 1.5rem;
    letter-spacing: 1.2px;
    color: var(--text-secondary);
}

/* 時鐘樣式 */
.clock {
    position: relative;
    margin-top: 1rem;
    font-family: 'Courier New', monospace;
    font-weight: 1000;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: all 1s cubic-bezier(0.34, 1.16, 0.64, 1);
}

/* 時鐘時間樣式 */
.clock .time {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    letter-spacing: 4px;
    transition: all 0.8s ease;
}

/* 時鐘日期樣式 (預設隱藏) */
.clock .date {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

/* 時鐘展開樣式 */
.clock.expanded {
    transform: translateY(40vh);
}

/* 時鐘時間展開樣式 */
.clock.expanded .time {
    font-size: clamp(3.5rem, 15vw, 8rem);
    color: var(--text-secondary);
    text-shadow: 0 0 20px var(--glow-blue);
}

/* 時鐘日期展開樣式 */
.clock.expanded .date {
    height: auto;
    opacity: 1;
    font-size: clamp(1.2rem, 5vw, 2rem);
    margin: 2.5rem;
}

/* 三體圖案大圓 */
.three-body {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;

    bottom: 2rem;
    left: 2rem;
    width: 100px;
    height: 100px;

    opacity: 0.5;
    cursor: pointer;

    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    transition: all 0.5s ease;
}

.three-body:hover {
    opacity: 0.8;
}

/* 三體圖案大圓 */
.three-body .big-circle {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;

    animation: three-body-rotate 10s linear infinite;
}

/* 三體圖案中圓 */
.three-body .mid-circle {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;

    width: 50%;
    height: 50%;
    left: -2%;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;

    animation: three-body-rotate 3s linear infinite reverse;
}

/* 三體圖案小圓 */
.three-body .small-circle {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;

    width: 50%;
    height: 50%;
    left: 45.5%;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
}


/* ===== 4. 動畫定義 ====== */

/* 星雲流動動畫 */
@keyframes nebula-flow {
    /* 旋轉並放大 */
    from {transform: rotate(0deg) scale(1);}
    to {transform: rotate(360deg) scale(1);}
}

/* 星星閃爍動畫 */
@keyframes star-twinkle {
    /* 透明度變化 */
    0%, 100% {opacity: 0.5;}
    50% {opacity: 1}
}

/* 流星尾巴動畫 */
@keyframes sstar-tail {
    /* 尾巴長度變化 */
    0% {width: 0;}
    50% {width: clamp(100px, 20vw, 250px);}
    100% {width: clamp(150px, 30vw, 400px);}
}

/* 流星移動動畫 */
@keyframes sstar-shooting {
    /* 從右上角移動到左下角 */
    0% {
        transform: rotate(135deg) translateX(0);
        opacity: 0;
    }
    10% {opacity: 1;}
    100% {
        transform: rotate(135deg) translateX(120vh);
        opacity: 0;
    }
}

/* 三體轉動動畫 */
@keyframes three-body-rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}


/* ===== 5. 響應式設計 ====== */

/* 當螢幕寬度小於 768px 或高度小於 650px 時觸發 */
@media screen and (max-width: 768px), screen and (max-height: 650px) {

    .three-body {
        width: 60px;
        height: 60px;
        bottom: 1rem;
        left: 1rem;
    }

}