@charset "UTF-8";

html, body.games-body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden !important;
    font-family: "Comfortaa", cursive, "Noto Sans TC", "微軟正黑體", sans-serif;
    user-select: none;
}

.gallery-viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1400px;
    pointer-events: auto;
}

/* ==========================================================================
   1. 上方人物：置頂 450px
   ========================================================================== */
.shaky-character-wrapper {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    height: 450px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0; /* ✨ 初始隱藏，杜絕載入殘影 */
    transform-origin: center bottom;
}

.shaky-character-wrapper img#shakyimg {
    height: 100%;
    width: 100%;
    max-height: 450px;
    max-width: 450px;
    display: block;
    opacity: 1; /* ✨ 預設就給 1，避免被吃掉 */
    filter: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0); /* ✨ 開啟 GPU 硬體加速，切換圖檔時不破功 */
}

/* ==========================================================================
   2. 深底背板：初始精準位於人物下方
   ========================================================================== */
.stage-backdrop {
    position: absolute;
    top: 500px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    max-width: 90vw;
    height: 500px;
    background-color: rgba(45, 48, 58, 0.9);
    border-radius: 10px;
    z-index: 10;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: background-color 0.4s ease;
}

/* ==========================================================================
   3. 前景內容容器
   ========================================================================== */
.stage-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    pointer-events: none;
}

/* 導覽列選單 */
.nav-links {
    position: absolute;
    top: 535px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 15px;
    z-index: 40;
    pointer-events: auto;
    will-change: top, transform;
}

.nav-links a.navlink {
    padding: 0px 10px;
    font-size: 22px;
    text-decoration: none;
    cursor: pointer;
    color: #f7f7f7;
    display: inline-block;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-box-reflect: below -4px linear-gradient(transparent 50%, rgba(255, 255, 255, 0.35));
    text-shadow: -0.5px 0px rgba(0, 255, 255, 0.3), 0.5px 0px rgba(255, 0, 255, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.nav-links a.navlink:hover,
.nav-links a.navlink:active {
    color: #ff8fdd;
    animation: rgb-burst 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes rgb-burst {
    0% { text-shadow: 0px 0px transparent, 0px 0px transparent; }
    20% { text-shadow: -5px 0px cyan, 5px 0px magenta; }
    40% { text-shadow: 3px 0px cyan, -3px 0px magenta; }
    60% { text-shadow: -2px 0px cyan, 2px 0px magenta; }
    80% { text-shadow: 1px 0px cyan, -1px 0px magenta; }
    100% { text-shadow: -1px 0px rgba(0, 255, 255, 0.6), 1px 0px rgba(255, 0, 255, 0.6); }
}

/* ==========================================================================
   4. 3D 空間舞台：確保卡片層級高於背景大字
   ========================================================================== */
.carousel-3d-scene {
    position: absolute;
    top: 560px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    max-width: 90vw;
    height: 340px;
    perspective: 1200px;
    pointer-events: none;
    z-index: 20; /* ✨ 提高層級，確保卡片永遠在背景文字上方 */
    will-change: top, width, transform;
}

.carousel-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: auto;
}

/* 卡片：精準以 (left: 50%, top: 50%) 居中對齊 */
/* 卡片：乾淨純粹，無黑邊、無雙重圓角 */
.carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -110px;
    margin-top: -110px;
    width: 220px;
    height: 220px;
    border-radius: 12px;
    background-color: transparent;
    text-decoration: none;
    box-sizing: border-box;
    transform-origin: center center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
    will-change: transform, opacity, width, height, margin-left, margin-top;
    transition: box-shadow 0.3s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    outline: 1px solid transparent; /* 消除亞像素鋸齒裁切線 */
}
.carousel-item:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 255, 255, 0.25);
}

/* 卡片圖片：乾淨無黑邊、純粹樣式 */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
    -webkit-box-reflect: below 5px linear-gradient(to bottom, transparent 60%, rgba(255, 255, 255, 0.1) 100%);
}

/* ✨ 1. 首頁小舞台：兩側非 Active 卡片自然壓暗，但依然是不透底的實體 */
body:not(.is-expanded) .carousel-item img {
    filter: brightness(0.45);
}

/* ✨ 2. 首頁小舞台：正中間 Active 卡片 100% 原色全亮 */
body:not(.is-expanded) .carousel-item.active img {
    filter: brightness(1);
}

/* ✨ 3. 展開模式 (Mode 1~4)：全部卡片 100% 正常全亮，不受影響 */
body.is-expanded .carousel-item img {
    filter: brightness(1);
}

/* 左右切換按鈕：垂直置中於輪播兩側 */
.carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 999;
}

.carousel-controls button {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 22px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-controls button:hover {
    background: rgba(255, 143, 221, 0.5);
    transform: scale(1.1);
}

/* ==========================================================================
   5. 底部 Footer：預設低調暗灰半透明，Hover 時平滑點亮
   ========================================================================== */
.gallery-footer,
footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    width: 100vw;
    text-align: center;
    font-size: 13px;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    user-select: none;
    
    /* 展開前完全隱藏 */
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
}

/* 展開後顯示：預設 35% 半透明低調暗灰，不搶卡片焦點 */
body.show-footer footer,
body.show-footer .gallery-footer,
.gallery-footer.show {
    opacity: 0.35 !important;
    pointer-events: auto !important;
    transition: opacity 0.35s ease !important;
}

/* ✨ 滑鼠移入底部時，整體平滑點亮至 90% */
body.show-footer footer:hover,
body.show-footer .gallery-footer:hover,
.gallery-footer.show:hover {
    opacity: 0.9 !important;
}

/* Footer 文字與超連結樣式 */
footer a,
.gallery-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    margin: 0 4px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

footer a:hover,
.gallery-footer a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.modal, .award-modal, .legal-modal, [id*="modal"], [id*="Modal"] {
    position: fixed !important;
    z-index: 2147483647 !important;
}

/* ==========================================================================
   6. 手機版適配
   ========================================================================== */
@media (max-width: 767px) {
    .mode-segmented-control {
        display: none !important;
    }

    html, body.games-body {
        overflow: hidden !important;
        height: 100vh !important;
        width: 100vw;
    }

    .gallery-viewport {
        height: 100vh !important;
        width: 100vw;
        overflow: hidden !important;
        position: relative !important;
    }

    .shaky-character-wrapper { 
        width: 270px; 
        height: 270px; 
        top: 15px; 
    }

    .stage-backdrop { 
        top: 320px !important; 
        bottom: 0 !important;
        height: auto !important;
        min-height: calc(100vh - 320px) !important;
        width: 100vw !important; 
        max-width: 100vw !important;
        border-radius: 0 !important; 
    }

    .nav-links {
        display: none !important;
    }

    .carousel-3d-scene { 
        top: 350px !important; 
        width: 100vw !important; 
        max-width: 100vw !important;
        height: 200px !important; 
    }

    .carousel-item {
        width: 150px !important;
        height: 150px !important;
        margin-left: -75px !important;
        margin-top: -75px !important;
    }

    .carousel-item .imgp {
        bottom: -30px !important;
        font-size: 15px !important;
    }

    .carousel-controls { 
        padding: 0 10px; 
    }

    footer {
        position: absolute !important;
        bottom: 60px !important;
        top: auto !important;
        left: 0;
        width: 100vw !important;
        text-align: center !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   7. 5 段膠囊模式切換列
   ========================================================================== */
.mode-segmented-control {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    background: rgba(18, 20, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px;
    border-radius: 30px;
    z-index: 99999 !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.segmented-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 44px;
    height: 32px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 1;
}

.seg-btn {
    position: relative;
    width: 44px;
    height: 32px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    z-index: 2;
    transition: color 0.25s ease, transform 0.2s ease;
    outline: none;
}

.seg-btn:hover {
    color: rgba(255, 255, 255, 0.9);
}

.seg-btn.active {
    color: #ffffff;
}

/* ==========================================================================
   8. 模式一專屬標題 (僅中間 Active 顯示) VS 展開模式 (全顯示)
   ========================================================================== */

/* --- 模式一：3D 輪播標題 --- */
.carousel-item .imgp {
    position: absolute;
    top: auto !important;
    bottom: -35px !important; /* ✨ 舒適距離 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 143, 221, 0.4);
    opacity: 0;
    transition: opacity 0.35s ease, font-size 0.3s ease, bottom 0.3s ease;
    pointer-events: none;
}

.carousel-item.active .imgp {
    opacity: 1 !important;
}

@media (max-width: 1200px) {
    .carousel-item .imgp {
        font-size: 19px !important;
    }
}

@media (max-width: 900px) {
    .carousel-item .imgp {
        font-size: 17px !important;
    }
}

/* --- 展開模式 (Mode 1~4) 10張標題全部正常顯示 --- */
body.is-free-mode .carousel-controls {
    opacity: 0 !important;
    pointer-events: none !important;
}

.carousel-item {
    border: 1px solid transparent;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
}

body.is-free-mode .carousel-item:hover {
    z-index: 600 !important;
    border-color: rgba(255, 143, 221, 0.9);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6), 0 0 45px rgba(255, 143, 221, 0.9);
}

body.is-free-mode .carousel-item:hover .imgp {
    opacity: 1 !important;
    color: #ff8fdd;
    animation: rgb-burst 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

body.is-free-mode .carousel-item .imgp {
    opacity: 0.85 !important;
    font-size: 16px !important;
    bottom: -28px !important;
    font-weight: 600;
}

@media (max-width: 1360px) {
    body.is-free-mode .carousel-item .imgp {
        font-size: 14px !important;
        bottom: -26px !important;
    }
}

@media (max-width: 1023px) {
    body.is-free-mode .carousel-item .imgp {
        font-size: 12px !important;
        bottom: -22px !important;
        letter-spacing: 0px !important;
    }
}

/* ==========================================================================
   導覽列 (Nav Links) 768px ~ 1024px RWD 緊湊排版
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .nav-links {
        gap: 18px !important;
        padding-right: 65px !important;
        box-sizing: border-box;
    }

    .nav-links a {
        font-size: 14px !important;
        letter-spacing: 0.5px !important;
    }
}

@media (min-width: 768px) and (max-width: 850px) {
    .nav-links {
        gap: 12px !important;
        padding-right: 60px !important;
    }

    .nav-links a {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   游標 (Cursor) 與抓取手感 (Grab / Grabbing / Pointer) 精準定義
   ========================================================================== */
html, body.games-body, .gallery-viewport {
    cursor: default !important;
}

/* 1. 背景游標：模式 0 與模式 4 (星環) 為開掌手 grab / 拖曳握拳 grabbing */
body:not(.is-free-mode) .stage-backdrop,
body:not(.is-free-mode) .carousel-stage,
body:not(.is-free-mode) .carousel-3d-scene,
body.is-orbit .stage-backdrop,
body.is-orbit .carousel-stage,
body.is-orbit .carousel-3d-scene {
    cursor: grab !important;
}

body:not(.is-free-mode) .stage-backdrop:active,
body:not(.is-free-mode) .carousel-stage:active,
body:not(.is-free-mode) .carousel-3d-scene:active,
body.is-orbit .stage-backdrop:active,
body.is-orbit .carousel-stage:active,
body.is-orbit .carousel-3d-scene:active {
    cursor: grabbing !important;
}

/* 2. 背景游標：模式 1~3 (排除 is-orbit) 為一般箭頭 */
body.is-free-mode:not(.is-orbit) .stage-backdrop,
body.is-free-mode:not(.is-orbit) .carousel-stage,
body.is-free-mode:not(.is-orbit) .carousel-3d-scene {
    cursor: default !important;
}

/* 3. ✨ 最高優先權（寫在最後）：所有卡片、圖片、按鈕碰觸時一律顯示點擊手指 pointer */
.carousel-item,
.carousel-item *,
.carousel-item img,
.carousel-btn,
.carousel-btn *,
.seg-btn,
.seg-btn *,
.nav-links a {
    cursor: pointer !important;
}

/* ==========================================================================
   ✨ 1. 右側外沿向下展開按鈕 (初始常駐微光，展開後隱藏)
   ========================================================================== */
.expand-trigger-btn {
    position: absolute;
    top: 515px;
    left: 50%;
    margin-left: 415px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: -6px;
    color: #ffffff;
    font-size: 14px;
    z-index: 9999;
    cursor: pointer !important;
    padding: 8px;
    border-radius: 8px;
    opacity: 0.35;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.3s ease;
    user-select: none;
}

.expand-trigger-btn:hover {
    opacity: 1;
    transform: translateY(3px);
}

/* 展開大舞台時淡出隱藏 */
body.is-expanded .expand-trigger-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 3 個箭頭向下波浪流動動態 */
.expand-trigger-btn i {
    display: block;
    line-height: 9px;
    opacity: 0.2;
    animation: flowDown 1.4s ease-in-out infinite;
    pointer-events: none;
}

.expand-trigger-btn .arrow-1 { animation-delay: 0s; }
.expand-trigger-btn .arrow-2 { animation-delay: 0.2s; }
.expand-trigger-btn .arrow-3 { animation-delay: 0.4s; }

@keyframes flowDown {
    0% { transform: translateY(-4px); opacity: 0.15; }
    40% { transform: translateY(2px); opacity: 1; }
    80%, 100% { transform: translateY(6px); opacity: 0.15; }
}

/* ==========================================================================
   ✨ 2. 底部向上收合按鈕 (展開後顯示，支援點擊)
   ========================================================================== */
.collapse-hint {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: -5px;
    color: #ffffff;
    font-size: 12px;
    cursor: pointer !important;
    padding: 6px 12px;
    border-radius: 12px;
    user-select: none;
    z-index: 9999;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.2s ease;
}

/* 展開大舞台時常駐半透明，並開啟點擊 */
body.is-expanded.show-footer .collapse-hint {
    opacity: 0.35;
    visibility: visible;
    pointer-events: auto !important;
}

.collapse-hint:hover {
    opacity: 0.95 !important;
    transform: translateX(-50%) translateY(-2px);
}

/* 3 個箭頭由下往上流動 */
.collapse-hint i {
    display: block;
    line-height: 8px;
    opacity: 0.2;
    animation: flowUp 1.4s ease-in-out infinite;
}

.collapse-hint .arrow-up-1 { animation-delay: 0s; }
.collapse-hint .arrow-up-2 { animation-delay: 0.2s; }
.collapse-hint .arrow-up-3 { animation-delay: 0.4s; }

@keyframes flowUp {
    0% { transform: translateY(4px); opacity: 0.15; }
    40% { transform: translateY(-2px); opacity: 1; }
    80%, 100% { transform: translateY(-6px); opacity: 0.15; }
}

/* ==========================================================================
   ✨ 全域微點陣 + 游標動態增亮 (常駐微光、游標處加亮)
   ========================================================================== */
.stage-backdrop {
    overflow: hidden;
}

.spotlight-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    /* 收合時：等面板縮好後，再花 0.8s 慢慢淡出隱藏 */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.15s, 
                visibility 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.15s;

    /* 1. 全域點陣網格 (間距 24px，細微圓點) */
    background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1px);
    background-size: 24px 24px;

    /* 2. 遮罩：全域維持 0.12 微弱透出，游標周圍 350px 增亮至 1.0 (全亮) */
    -webkit-mask-image: radial-gradient(
        circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.18) 80%,
        rgba(0, 0, 0, 0.18) 100%
    );
    mask-image: radial-gradient(
        circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.18) 80%,
        rgba(0, 0, 0, 0.18) 100%
    );
}

/* 僅在大舞台展開時顯示：延遲 0.35s 等黑底拉伸定位，再花 0.9s 柔和顯現 */
body.is-expanded .spotlight-grid {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.35s, 
                visibility 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.35s;
}

/* ==========================================================================
   ✨ 彗星長拖尾文字：頂部極亮、長距離漸層衰減
   ========================================================================== */
.bg-kinetic-text {
    position: fixed !important;
    top: 85px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw;
    text-align: center;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    
    font-size: clamp(3.8rem, 11.5vw, 10.5rem);
    font-weight: 900 !important;
    font-family: "Comfortaa", system-ui, sans-serif;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    
    /* ✨ 超長彗星漸層：頂部極亮 (1.0) -> 中段細膩漸暗 -> 尾部長距離拖曳 */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 255, 0.75) 25%, 
        rgba(255, 255, 255, 0.35) 55%, 
        rgba(255, 255, 255, 0.08) 85%, 
        transparent 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    text-shadow: none !important;
    filter: none !important;
    opacity: 0;
    will-change: transform, opacity, top;
}

/* 僅在大舞台展開時顯示 */
body:not(.is-expanded) .bg-kinetic-text {
    display: none !important;
}

/* ✨ 點陣背景：長拖尾縱向彗光 (高度由 60px 擴展至 360px 垂直貫穿拖尾) */
.spotlight-grid {
    background-image: radial-gradient(rgba(255, 255, 255, 0.75) 1.2px, transparent 1.2px) !important;
    background-size: 24px 24px !important;
    -webkit-mask-image: radial-gradient(
        circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.15) 80%,
        rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
        ellipse 75vw 360px at 50% var(--comet-y, -999px),
        rgba(0, 0, 0, var(--comet-core, 0.9)) 0%,
        rgba(0, 0, 0, calc(var(--comet-core, 0.9) * 0.4)) 45%,
        transparent 100%
    ) !important;
    mask-image: radial-gradient(
        circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.15) 80%,
        rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
        ellipse 75vw 360px at 50% var(--comet-y, -999px),
        rgba(0, 0, 0, var(--comet-core, 0.9)) 0%,
        rgba(0, 0, 0, calc(var(--comet-core, 0.9) * 0.4)) 45%,
        transparent 100%
    ) !important;
}

/* ==========================================================================
   ✨ 彗星文字容器與動態流星子元素 (Spawn & Destroy)
   ========================================================================== */
.bg-kinetic-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    user-select: none;
    z-index: 1; /* 位於點陣上方、卡片後方 */
    overflow: hidden;
}

/* ==========================================================================
   ✨ 高級輕透彗星文字 (不搶主風采、保留瀑布質感)
   ========================================================================== */
.comet-item {
    position: fixed !important;
    top: 85px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw;
    text-align: center;
    pointer-events: none;
    user-select: none;
    
    font-size: clamp(3.8rem, 11.5vw, 10.5rem);
    font-weight: 700 !important; /* ✨ 稍微收細筆畫，增加空氣感 */
    font-family: "Comfortaa", system-ui, sans-serif;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    
    /* ✨ 大幅淡化的輕透彗尾：頂部微亮 (0.35) -> 中段柔和 (0.12) -> 底部透明 */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.35) 0%, 
        rgba(255, 255, 255, 0.22) 25%, 
        rgba(255, 255, 255, 0.08) 55%, 
        rgba(255, 255, 255, 0.02) 85%, 
        transparent 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    mix-blend-mode: screen; /* ✨ 多層重疊時自然透光，不死白 */
    text-shadow: none !important;
    filter: none !important;
    opacity: 0;
    will-change: transform, opacity, top;
}

/* 僅在大舞台展開時才允許顯現 */
body:not(.is-expanded) .bg-kinetic-container {
    display: none !important;
}

/* ✨ 模式 2 專屬：白芯・霓虹粉紫光暈（柔光微亮） */
.carousel-item.is-ball-hovered {
    box-shadow: 
        0 0 0 2px rgba(255, 255, 255, 0.95),       /* 清透純白核心內邊 */
        0 0 18px rgba(225, 75, 255, 0.78),        /* 霓虹亮粉紫主光暈 */
        0 0 45px rgba(160, 45, 230, 0.38),        /* 外層深粉紫漸層散光 */
        0 12px 35px rgba(0, 0, 0, 0.5) !important;
    transition: box-shadow 0.22s ease-out;
}

.carousel-item.is-ball-hovered img {
    filter: brightness(1.04) !important;
}

/* ✨ 模式 4 專屬：深邃宇宙冷白微光（深空星芒感、通透不刺眼） */
.carousel-item.is-orbit-hovered {
    box-shadow: 
        0 0 0 1.5px rgba(255, 255, 255, 0.9),       /* 純淨細白星芒輪廓 */
        0 0 16px rgba(220, 240, 255, 0.65),        /* 冰晶冷白主光暈 */
        0 0 38px rgba(160, 205, 255, 0.25),        /* 外層幽微深空藍冷散光 */
        0 15px 40px rgba(0, 0, 0, 0.6) !important;
    transition: box-shadow 0.25s ease-out;
}

.carousel-item.is-orbit-hovered img {
    filter: brightness(1.06) !important;
}