@charset "UTF-8";

/* ==========================================================================
   1. 全域重置與滿版滾動軸
   ========================================================================== */
html, body.honors-body {
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;
    background-color: #0c0e12; /* 深邃石墨黑底色 */
    color: #ffffff;
    font-family: "Comfortaa", "Noto Sans TC", sans-serif;
    user-select: none;
    overflow-x: hidden;
}

/* 核心滾動軌道 */
.honors-scroll-rack {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 通用容器 */
.honors-container {
    width: 92vw;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.honors-section {
    position: relative;
    width: 100vw;
    box-sizing: border-box;
    padding: 100px 0;
}

.honors-section-header {
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.honors-section-title {
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 800;
    margin: 0;
    letter-spacing: -1px;
}

.honors-section-sub {
    font-size: 13px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   頂部通用導覽列：完全對齊 about-scroll.css 標準
   ========================================================================== */
.site-top-header,
#mainTopHeader {
    position: fixed !important;
    top: 35px !important;
    left: 0 !important;
    width: 100vw !important;
    height: auto !important;
    z-index: 99999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
}

.site-top-header .nav-links,
nav#navLinks {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 22px !important;
    pointer-events: auto !important;
    z-index: 100000 !important;
}

.site-top-header .nav-links a.navlink,
nav#navLinks a.navlink {
    padding: 0 10px !important;
    font-size: 22px !important;
    font-family: "Comfortaa", sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    color: #f7f7f7 !important;
    display: inline-block !important;
    position: relative !important;
    -webkit-box-reflect: below -4px linear-gradient(transparent 50%, rgba(255, 255, 255, 0.35)) !important;
    text-shadow: -0.5px 0px rgba(0, 255, 255, 0.3), 0.5px 0px rgba(255, 0, 255, 0.3);
    transition: color 0.3s ease !important;
}

/* 🌟 HONORS 頁面當前 active 保持純白高亮 */
.site-top-header .nav-links a.navlink.active,
nav#navLinks a.navlink.active {
    color: #ffffff !important;
}

/* 🌟 Hover 觸發全站統一純水平 RGB 抖動 (Y軸完全不跳動) */
.site-top-header .nav-links a.navlink:hover,
nav#navLinks a.navlink:hover {
    color: #ff8fdd !important;
    background: transparent !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    animation: rgb-burst 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes rgb-burst {
    0%   { text-shadow: 0px 0px transparent, 0px 0px transparent; transform: translateX(0); }
    20%  { text-shadow: -5px 0px #00ffff, 5px 0px #ff00ff; transform: translateX(-2px); }
    40%  { text-shadow: 4px 0px #00ffff, -4px 0px #ff00ff; transform: translateX(2px); }
    60%  { text-shadow: -3px 0px #00ffff, 3px 0px #ff00ff; transform: translateX(-1px); }
    80%  { text-shadow: 2px 0px #00ffff, -2px 0px #ff00ff; transform: translateX(1px); }
    100% { text-shadow: -1px 0px rgba(0, 255, 255, 0.6), 1px 0px rgba(255, 0, 255, 0.6); transform: translateX(0); }
}

/* 🌟 兩側副標記樣式：只在 1025px 以上桌機才顯現 🌟 */
@media screen and (min-width: 1025px) {
    .nav-links .nav-side-tag,
    nav#navLinks .nav-side-tag {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        user-select: none;
        pointer-events: none;
    }

    .nav-links .nav-side-tag.is-left,
    nav#navLinks .nav-side-tag.is-left {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 0.5 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
        position: static !important;
        margin: 0 !important;
        transform: translateX(-72px) !important;
    }

    .nav-links .nav-side-tag.is-right,
    nav#navLinks .nav-side-tag.is-right {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 0.65 !important;
        color: #ffffff !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        backdrop-filter: blur(4px) !important;
        letter-spacing: 1px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
        position: static !important;
        margin: 0 !important;
        transform: translateX(72px) !important;
    }
}

/* ==========================================================================
   右上角漢堡選單：向下滾動時與 NAV 同步滑順退場
   ========================================================================== */

/* 1. 給予所有可能使用的漢堡按鈕平滑過渡動畫 */
.menu-btn,
.hamburger,
.menu-toggle,
.menu-icon,
#menu-btn,
#menuToggle,
#hamburgerBtn,
header .menu-btn,
header.site-top-header ~ .menu-btn {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
    will-change: transform, opacity;
}

/* 2. 🌟 關鍵：當加上 nav-is-hidden 時，強制向上退場隱藏 */
.menu-btn.nav-is-hidden,
.hamburger.nav-is-hidden,
.menu-toggle.nav-is-hidden,
.menu-icon.nav-is-hidden,
#menu-btn.nav-is-hidden,
#menuToggle.nav-is-hidden,
#hamburgerBtn.nav-is-hidden,
header .menu-btn.nav-is-hidden,
header.site-top-header ~ .menu-btn.nav-is-hidden {
    transform: translateY(-160%) !important; /* 向上滑出畫面頂部 */
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   2. 第 1 區：滿版 3D 空間展台
   ========================================================================== */
.section-vortex {
    height: 100vh;
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* ==========================================================================
   第一區：300vh 轉場主軌道 + 固定全螢幕畫布 (徹底解決下方被裁切)
   ========================================================================== */
.vortex-scroll-track {
    position: relative !important;
    width: 100vw !important;
    height: 320vh !important; /* 保留完整的滾動行程 */
    display: block !important;
    pointer-events: none !important;
}

/* 🌟 加入 will-change 與 transition，讓 JS 在第二區把它整座往上推 */
/* 🌟 第一區：加入聚焦微光（中央幽藍聚光燈，外圍暗黑漸暈） */
.section-vortex {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    will-change: transform;

    /* 核心調整：中央 45% 處泛出非常內斂的藍灰光澤 (rgba: 16, 28, 45)，外圍自然收斂回深黑 (#07090d) */
    background: radial-gradient(
        circle at 50% 50%, 
        #040a46 0%, 
        #010c30 50%, 
        #000518 90%
    ) !important;
}

/* 🌟 當滑過 300vh 進入第二區時，將畫布隱藏，避免遮擋第二區的點擊與 Hover */
/* 🌟 修改後：不要隱藏整個區塊，僅關閉滑鼠穿透避免遮擋第二區 Hover */
.section-vortex.is-passed {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

.honors-vortex-canvas-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    opacity: 0; /* 🌟 初始隱藏，等所有卡片貼圖載入完畢後再優雅淡入 */
}

.honors-vortex-canvas-wrap canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.vortex-scroll-hint {
    transition: opacity 0.3s ease !important;
}

/* ==========================================================================
   背景巨幕大字：純實色水母呼吸 (無描邊、零穿幫、頂級雜誌浮水印質感)
   ========================================================================== */
.honors-huge-bg-title {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
    user-select: none !important;
    line-height: 1.0 !important;
    padding: 30px 20px !important;
    isolation: isolate !important;
    overflow: visible !important;
    will-change: transform; /* 🌟 確保平滑滾動性能 */
}

.honors-vortex-canvas-wrap {
    z-index: 2 !important;
}

/* 兩行容器置中 */
.honors-huge-bg-title .title-line-1,
.honors-huge-bg-title .title-line-2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    overflow: visible !important;
}

.honors-huge-bg-title .title-line-1 {
    margin-bottom: 16px !important;
}

/* 🌟 單個字母樣式：純實心填滿，徹底告別破線與雜亂接縫 */
.honors-huge-bg-title span {
    font-size: clamp(52px, 10vw, 140px) !important;
    font-weight: 900 !important;
    font-family: "Comfortaa", sans-serif !important;
    -webkit-text-stroke: 0 !important; /* 👈 完全關閉描邊 */
    display: inline-block !important;
    transform: none !important;
    overflow: visible !important;
    will-change: color, opacity !important;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    animation-iteration-count: infinite !important;
}

/* 第一行：SHAKY */
.title-line-1 span {
    margin: 0 0.12em !important;
}

/* 第二行：HONORS */
.title-line-2 span {
    margin: 0 0.06em !important;
}

/* 1. 背景大字容器：隨滾動注入 --scroll-glow (0 ~ 1) 大幅提升光芒強度 */
.honors-huge-bg-title {
  --scroll-glow: 0;                    /* 由 JS 動態注入 0 ~ 1 */
  
  /* 🌟 核心：隨著向下滾動，整體透明度從 0.65 暴增至 1.0 (字體徹底浮現) */
  opacity: calc(0.65 + var(--scroll-glow) * 0.35) !important;
  
  /* 🌟 雙層光暈爆發：一層亮白核心光 + 一層青藍深海水母光 */
  filter: drop-shadow(0 0 calc(var(--scroll-glow) * 20px) rgba(255, 255, 255, calc(var(--scroll-glow) * 0.75)))
          drop-shadow(0 0 calc(var(--scroll-glow) * 60px) rgba(0, 220, 255, calc(var(--scroll-glow) * 0.60)));
  
  transition: opacity 0.15s ease-out, filter 0.15s ease-out;
  will-change: transform, opacity, filter;
}

/* 2. 🌟 水母呼吸底質：在頂部時不搶戲，具備幽藍飽和度、不泛灰死白 */
@keyframes jellyfishSolidBreathe {
  0% {
    color: rgba(255, 255, 255, 0.04);
    opacity: 0.35;
    text-shadow: none;
  }
  40% {
    color: rgba(255, 255, 255, 0.10);
    opacity: 0.55;
    text-shadow: 0 0 16px rgba(0, 180, 255, 0.18);
  }
  60% {
    /* 頂部靜止時的呼吸峰值：柔和透藍，絕不奪走卡片風采 */
    color: rgba(255, 255, 255, 0.22);
    opacity: 0.85;
    text-shadow: 0 0 24px rgba(0, 200, 255, 0.35),
                 0 0 50px rgba(0, 100, 255, 0.20);
  }
  80% {
    color: rgba(255, 255, 255, 0.12);
    opacity: 0.65;
    text-shadow: 0 0 16px rgba(0, 180, 255, 0.15);
  }
  100% {
    color: rgba(255, 255, 255, 0.04);
    opacity: 0.35;
    text-shadow: none;
  }
}

/* 🌟 11 個字母完全獨立的相異週期與秒差 */
/* 第一行：S-H-A-K-Y */
.title-line-1 span:nth-child(1) { animation-name: jellyfishSolidBreathe; animation-duration: 9.2s; animation-delay: -1.5s; }
.title-line-1 span:nth-child(2) { animation-name: jellyfishSolidBreathe; animation-duration: 12.4s; animation-delay: -6.8s; }
.title-line-1 span:nth-child(3) { animation-name: jellyfishSolidBreathe; animation-duration: 7.8s; animation-delay: -0.5s; }
.title-line-1 span:nth-child(4) { animation-name: jellyfishSolidBreathe; animation-duration: 11.1s; animation-delay: -4.2s; }
.title-line-1 span:nth-child(5) { animation-name: jellyfishSolidBreathe; animation-duration: 8.6s; animation-delay: -7.5s; }

/* 第二行：H-O-N-O-R-S */
.title-line-2 span:nth-child(1) { animation-name: jellyfishSolidBreathe; animation-duration: 13.5s; animation-delay: -3.1s; }
.title-line-2 span:nth-child(2) { animation-name: jellyfishSolidBreathe; animation-duration: 8.3s; animation-delay: -5.7s; }
.title-line-2 span:nth-child(3) { animation-name: jellyfishSolidBreathe; animation-duration: 10.7s; animation-delay: -1.9s; }
.title-line-2 span:nth-child(4) { animation-name: jellyfishSolidBreathe; animation-duration: 14.2s; animation-delay: -8.4s; }
.title-line-2 span:nth-child(5) { animation-name: jellyfishSolidBreathe; animation-duration: 7.2s; animation-delay: -4.6s; }
.title-line-2 span:nth-child(6) { animation-name: jellyfishSolidBreathe; animation-duration: 11.8s; animation-delay: -2.3s; }


.vortex-scroll-hint {
    position: absolute;
    /* 🌟 原本是 bottom: 40px; 直接拉高到 110px ~ 130px，讓它清楚浮在視覺舒適區 */
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.45);
    z-index: 5;
    pointer-events: none;
    animation: hintBounce 2s infinite ease-in-out;
}

@keyframes hintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.3; }
    50% { transform: translateX(-50%) translateY(6px); opacity: 0.8; }
}

/* ==========================================================================
   3. 第 2 & 3 區：列表與 Hover 浮空預覽圖
   ========================================================================== */
.awards-list-group,
.press-list-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.honors-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: padding 0.3s ease, border-color 0.3s ease;
}

.honors-row:hover {
    padding: 24px 20px;
    border-color: rgba(255, 255, 255, 0.3);
}

.honors-row-left {
    display: flex;
    align-items: baseline;
    gap: 25px;
}

.honors-row-num {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    font-family: monospace;
}

.honors-row-name {
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 700;
    transition: color 0.3s ease, transform 0.3s ease;
}

.honors-row:hover .honors-row-name {
    color: #ff8fdd;
    transform: translateX(8px);
}

.honors-row-right {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
}

/* 浮空預覽大圖 */
.awards-floating-preview,
.press-floating-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 320px;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.85);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 143, 221, 0.25);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.35s ease;
}

.awards-floating-preview.is-active,
.press-floating-preview.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.awards-floating-preview img,
.press-floating-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   4. 第 4 區：大事記巨型文字 + SHAKY 碰撞舞台
   ========================================================================== */
.section-milestones {
    min-height: 100vh;
    padding-bottom: 120px;
}

.milestone-interactive-stage {
    position: relative;
    width: 100%;
    min-height: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.milestone-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 5;
}

.milestone-col.left-col {
    align-items: flex-start;
    width: 42%;
}

.milestone-col.right-col {
    align-items: flex-end;
    width: 42%;
}

/* 巨型字體項目 */
.milestone-big-item {
    font-size: clamp(32px, 4.5vw, 68px);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.15s ease;
    display: inline-block;
    will-change: transform;
}

.milestone-big-item:hover {
    color: #00f0ff;
}

/* 中央動態 SHAKY 角色 */
.milestone-shaky-actor {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    z-index: 10;
    cursor: pointer;
}

.milestone-shaky-actor img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   5. 共用 Footer 容器在 HONORS 的定位
   ========================================================================== */
footer.site-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    padding: 40px 0 !important;
    opacity: 0.8 !important;
    text-align: center !important;
}

/* ==========================================================================
   第 2 區：AWARDS 版面重構 (左側靠左收緊 + 右側巨型字體魄力全開)
   ========================================================================== */
.section-awards-archive {
    position: relative;
    width: 100vw;
    padding: 130px 0 150px;
    box-sizing: border-box;
    /* 深藍底色 + 經典點陣網格 */
    background-color: #060b13;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    overflow: hidden;
}

/* 在第 2 區頂部鋪一層柔和過渡光，讓 1 區與 2 區接軌時有光學融合感 */
.section-awards-archive::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.honors-archive-layout {
    width: 92vw;
    max-width: 1560px; /* 👈 放寬最大寬度，大器舒展 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

/* 左側文字清單區：寬度收緊至 52%，向左推齊 */
.archive-left-col {
    width: 52%;
    display: flex;
    flex-direction: column;
}

.archive-header {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-bottom: 10px;
}

.archive-main-title {
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 900;
    letter-spacing: 3px;
    margin: 0 0 14px 0;
    color: #ffffff;
    font-family: "Comfortaa", sans-serif;
    padding: 0 0 10px;
}

/* ==========================================================================
   第 2 區：AWARDS 表格對齊 (NO. 水平置中、DATE 靠左切齊)
   ========================================================================== */
.archive-sub-meta {
    display: grid;
    grid-template-columns: 46px 1fr 110px 38px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
    align-items: center;
}

/* 🌟 表頭各欄對齊 */
.archive-sub-meta span:nth-child(1) { text-align: center; } /* NO. 置中 */
.archive-sub-meta span:nth-child(2) { text-align: left; }   /* 名稱靠左 */
.archive-sub-meta span:nth-child(3) { text-align: center; }   /* DATE 置中 */
.archive-sub-meta span:nth-child(4) { text-align: center; } /* LINK 置中 */

.archive-list-wrap {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 單行項目：高度收斂，緊湊俐落 */
.archive-item {
    display: grid;
    grid-template-columns: 46px 1fr 110px 38px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);
    font-size: 14.5px;
    cursor: default;
    transition: background-color 0.2s ease, padding 0.2s ease, color 0.2s ease;
}

.archive-item:hover {
    color: #ffffff;
    padding-left: 14px;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.08) 0%, transparent 80%);
    border-bottom: 1px solid rgba(0, 240, 255, 0.4);
}

/* 🌟 內文各欄對齊 */
.archive-item .col-num {
    font-size: 12px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.32);
    text-align: center; /* 01 數字水平置中，與 NO. 垂直貫通 */
}

.archive-item .col-date {
    font-size: 12px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.38);
    text-align: center !important;
}

.archive-item .col-arrow-btn {
    justify-self: center; /* 箭頭置中 */
}

/* 🌟 全尺寸修復：不管在哪個解析度折行，永遠嚴格靠左齊平，絕不置中 */
.archive-item .col-name,
.press-item .col-name {
    font-weight: 500;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important; /* 確保起點在最左側 */
    text-align: left !important;            /* 換行文字強制靠左 */
    gap: 6px 8px;
    letter-spacing: 0.2px;
    min-width: 0;                          /* 防止 flex 內容溢出破版 */
}

/* 確保內部小標題與括號換行時也 100% 靠左 */
.archive-item .col-name small,
.press-item .col-name small {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.38);
    text-align: left !important;
}


/* 獨立外連按鈕：僅在此處可點擊 */
.col-arrow-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.col-arrow-btn:hover {
    color: #ff8fdd;
    background: rgba(255, 143, 221, 0.12);
    transform: translate(2px, -2px);
}

.col-arrow-btn.is-disabled {
    cursor: default;
    color: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   第 2 區右側：下移 250px + 行高間距擴大 + 預設交錯解構排版
   ========================================================================== */
.archive-right-col {
    width: 44%;
    position: relative;
    align-self: stretch;               /* 讓右欄完整繼承左欄長度，確保追蹤與 sticky 正常 */
    pointer-events: none;
    overflow: visible;
    top: 0;                            /* 歸零父層偏移，避免破壞 JS 的 Y 軸計算 */
}

/* 底層巨型文字容器：Sticky 置頂並鎖定下移 250px */
.archive-bg-editorial {
    position: sticky;
    top: 100px;                         /* 🌟 隨滾動固定在距頂部 100px 舒適視野 */
    padding-top: 150px;                  /* 🌟 拔除過度的 300px 推移，歸位對齊清單頂部 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    user-select: none;
    pointer-events: none;
    z-index: 1;                        /* 底層文字層級 */
    opacity: 0.9;
    transition: opacity 0.4s ease;
}

.archive-right-col.has-hover .archive-bg-editorial {
    opacity: 0.22;                     /* 卡片浮出時文字優雅淡出退後 */
}

/* 巨型行文字：字與字高度拉大、透氣舒展 */
.archive-bg-editorial .editorial-line {
    font-size: clamp(34px, 3.6vw, 62px);
    font-weight: 900;
    line-height: 1.15;                 /* 行高加大，不再壓迫 */
    letter-spacing: 1px;               /* 舒展字距 */
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.12);
    font-family: "Comfortaa", sans-serif;
    margin-bottom: 24px;               /* 各行間距顯著拉開 */
    white-space: nowrap;
    will-change: transform;
}

/* ==========================================================================
   各行「預設起始位置」徹底錯落分開 (打破生硬對齊，初始即形成幾何張力)
   ========================================================================== */
.archive-bg-editorial .editorial-line:nth-child(1) { 
    margin-left: 10px;                  /* 第 1 行：微靠左 */
}
.archive-bg-editorial .editorial-line:nth-child(2) { 
    margin-left: 140px;                 /* 第 2 行：大幅向右凸出推開 */
}
.archive-bg-editorial .editorial-line:nth-child(3) { 
    margin-left: 0px;                   /* 第 3 行：貼齊極左基準 */
}
.archive-bg-editorial .editorial-line:nth-child(4) { 
    margin-left: 85px;                  /* 第 4 行：中度偏右 */
    color: rgba(0, 240, 255, 0.22) !important;       /* 🌟 電馭青藍，通透不刺眼 */
    letter-spacing: 3px;
    text-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}
.archive-bg-editorial .editorial-line:nth-child(5) { 
    margin-left: 175px;                 /* 第 5 行：極度向右靠 (與第 3、6 行形成巨大落差) */
}
.archive-bg-editorial .editorial-line:nth-child(6) { 
    margin-left: 35px;                  /* 第 6 行：拉回靠左 */
}
.archive-bg-editorial .editorial-line:nth-child(7) { 
    margin-left: 20px;                 /* 第 7 行：再次推向右側 */
    color: rgba(255, 255, 255, 0.22); 
    letter-spacing: 5px; 
}
.archive-bg-editorial .editorial-line:nth-child(8) { 
    margin-left: 5px;                   /* 第 8 行：貼近左側 */
}
.archive-bg-editorial .editorial-line:nth-child(9) { 
    margin-left: 60px;                  /* 第 9 行：粉紅標語居中穿插 */
    font-size: clamp(12px, 1.0vw, 15px);
    letter-spacing: 7px;
    font-family: "Comfortaa", monospace;
    font-weight: 700;
    color: rgba(242, 93, 255, 0.558); 
    margin-top: 14px;
    margin-bottom: 0;
    opacity: 0.85;
}

/* 無框浮動卡片：隨 Y 軸平滑跟隨並覆蓋於文字上 */
.archive-floating-card {
    position: absolute;
    top: 0;
    left: 8%;
    width: 280px;
    height: 386px;
    background: transparent !important;
    border-radius: 12px;               /* 稍微加大圓角，更顯精緻 */
    overflow: hidden;
    
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    border: none !important;

    perspective: 1000px;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 99 !important;
    will-change: transform, opacity;
    transition: opacity 0.25s ease, box-shadow 0.3s ease;
    
}

.archive-floating-card.is-active {
    opacity: 1;
}

.archive-floating-card .card-inner-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 雙圖層基礎：由 GSAP 控制從小放大覆蓋 */
/* 🌟 核心防破圖：空 src 時徹底隱藏，不讓瀏覽器畫出破圖圖標與白邊 */
.archive-floating-card .stage-layer:not([src]),
.archive-floating-card .stage-layer[src=""],
.press-floating-card .stage-layer:not([src]),
.press-floating-card .stage-layer[src=""] {
    opacity: 0 !important;
    visibility: hidden !important;
    border: none !important;
    outline: none !important;
}

/* 雙圖層基礎：強制消除預設框線 */
.archive-floating-card .stage-layer,
.press-floating-card .stage-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center center;
    opacity: 0;
    pointer-events: none;
    border: none !important;
    outline: none !important;
    will-change: transform, opacity;
}

/* RWD 響應式優化 */
@media (max-width: 992px) {
    .archive-left-col { width: 100%; }
    .archive-right-col { display: none; }
}

/* ==========================================================================
   強制修復：NAV RGB 抖動色彩 + 滾動上下收合
   ========================================================================== */

/* 🌟 強力 RGB 爆裂抖動動畫 */
@keyframes rgb-burst {
    0%   { text-shadow: 0px 0px transparent, 0px 0px transparent; transform: translate(0, 0); }
    20%  { text-shadow: -5px 0px #00ffff, 5px 0px #ff00ff; transform: translate(-2px, 1px); }
    40%  { text-shadow: 4px 0px #00ffff, -4px 0px #ff00ff; transform: translate(2px, -1px); }
    60%  { text-shadow: -3px 0px #00ffff, 3px 0px #ff00ff; transform: translate(-1px, 0); }
    80%  { text-shadow: 2px 0px #00ffff, -2px 0px #ff00ff; transform: translate(1px, 0); }
    100% { text-shadow: -1px 0px rgba(0, 255, 255, 0.6), 1px 0px rgba(255, 0, 255, 0.6); transform: translate(0, 0); }
}

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

/* 3. 頂部 NAV 容器與過渡效果 */
.site-top-header,
#mainTopHeader {
    position: fixed !important;
    top: 35px !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 99999 !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
    will-change: transform, opacity;
}

/* 右上角漢堡按鈕過渡 */
.menu-btn,
.hamburger,
.menu-toggle,
header .menu-btn {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
    will-change: transform, opacity;
}

/* 🌟 核心隱藏類名：向上收合 */
.nav-is-hidden {
    transform: translateY(-150%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   第 2 區：三段式滾動登場 (標題先起 ➔ 列表整體升起 ➔ 右側文字橫向滑入)
   ========================================================================== */

/* 1. 第二區容器保持常駐實體，黑底正常鋪開 */
.section-awards-archive {
    opacity: 1 !important;
    transform: none !important;
}

/* 階段 ①：AWARDS 標題（預設沉在最下方 80px） */
.archive-header {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.archive-header.step-show {
    opacity: 1;
    transform: translateY(0);
}

/* 階段 ②：獲獎列表整體（整個清單包裹層，預設沉在最下方 100px） */
.archive-list-wrap {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.archive-list-wrap.step-show {
    opacity: 1;
    transform: translateY(0);
}

/* 階段 ③：右側大字容器（預設推到右側 140px 外） */
.archive-bg-editorial {
    opacity: 0;
    transform: translateX(140px);
    transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.archive-bg-editorial.step-show {
    opacity: 0.9;
    transform: translateX(0);
}

/* 確保行內項目自身不要隱藏，避免下方發空 */
.archive-item {
    opacity: 1 !important;
    transform: none !important;
}



/* ==========================================================================
   三排巨幕跑馬燈牆：極光電氣草綠深林底座 (乾淨優化精簡版)
   ========================================================================== */
.honors-marquee-wall {
    position: relative;
    width: 100vw;
    padding: 50px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: radial-gradient(ellipse 90% 360px at 50% 50%, 
        rgba(0, 255, 102, 0.36) 0%, 
        rgba(0, 180, 75, 0.22) 50%, 
        #042614 90%) !important;
    border-top: 1px solid rgba(0, 255, 102, 0.35) !important;
    border-bottom: 1px solid rgba(0, 255, 102, 0.35) !important;
    box-shadow: 0 0 45px rgba(0, 255, 102, 0.15) !important;
}

.marquee-row {
    position: relative;
    width: 100vw;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

/* 軌道容器：由 JS 直接做連續微積分位移 */
.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee-text-group {
    display: flex;
    align-items: center;
    gap: 42px;
    padding-right: 42px;
}

/* 🌟 1. 全域跑馬燈文字：第一區電氣草綠 */
.marquee-text-group span {
    font-size: clamp(50px, 3.0vw, 44px);
    font-weight: 900;
    font-family: "Comfortaa", sans-serif;
    letter-spacing: 1px;
    color: rgba(0, 255, 102, 0.32) !important;
    text-shadow: 0 0 6px rgba(0, 255, 102, 0.35) !important;
    text-transform: uppercase;
    line-height: 1;
}

/* 🌟 2. 幾何符號 (/// 與 〰)：亮電氣綠微光 */
.marquee-text-group .icon-sym,
.marquee-text-group span.icon-sym {
    display: inline-block !important;
    color: #1dde75 !important;
    vertical-align: middle !important;
    margin: 0 16px !important;
    opacity: 1 !important;
    text-shadow: 0 0 4px rgba(0, 255, 102, 0.6) !important;
    user-select: none !important;
    line-height: 1 !important;
}

.marquee-text-group .sym-slash {
    font-size: clamp(22px, 2.2vw, 28px) !important;
    font-weight: 700 !important;
    font-family: monospace !important;
    letter-spacing: 2px !important;
}

.marquee-text-group .sym-wave {
    font-size: clamp(18px, 1.8vw, 24px) !important;
    font-weight: 400 !important;
    position: relative !important;
    top: -2px !important;
}

/* 🌟 3. Shaky 小人動態圖標 */
.marquee-gif-icon,
.shaky-brand-icon img,
.shaky-brand-icon {
    display: inline-block !important;
    width: 48px !important;              
    height: 56px !important;
    position: relative !important;
    top: -7px !important;               
    vertical-align: middle !important;
    margin: 0 20px !important;
    object-fit: contain !important;
    user-select: none !important;
    pointer-events: none !important;
    filter: brightness(0) invert(85%) sepia(85%) saturate(1500%) hue-rotate(65deg) brightness(110%) drop-shadow(0 0 3px rgba(0, 255, 102, 0.3)) !important;
    opacity: 0.85 !important;
}

/* ==========================================================================
   第 3 區：FEATURED & PRESS (左右鏡像 + 粉紫微光 + 三段進場)
   ========================================================================== */
.section-honors-press {
    position: relative;
    width: 100vw;
    padding: 130px 0 60px;
    box-sizing: border-box;
    background-color: #060b13;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    overflow: hidden;
}

/* 🌟 B 方案：左側覆蓋柔和粉紫環境光 */
.press-ambient-glow {
    position: absolute;
    top: 15%;
    left: -5%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(255, 143, 221, 0.07) 0%, rgba(0, 240, 255, 0.02) 45%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}

.honors-press-layout {
    width: 92vw;
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* 左側文字與卡片欄 (44%) */
.press-left-col {
    width: 44%;
    position: relative;
    align-self: stretch;
    pointer-events: none;
    overflow: visible;
}

.press-bg-editorial {
    position: sticky;
    top: 100px;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    user-select: none;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: translateX(-120px); /* 預設向左偏移 */
    transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1), transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.press-bg-editorial.step-show {
    opacity: 0.9;
    transform: translateX(0);
}

.press-left-col.has-hover .press-bg-editorial {
    opacity: 0.22;
}

.press-bg-editorial .press-editorial-line {
    font-size: clamp(34px, 3.6vw, 62px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.12);
    font-family: "Comfortaa", sans-serif;
    margin-bottom: 24px;
    white-space: nowrap;
    will-change: transform;
}

/* 左側錯落預設位置 */
.press-bg-editorial .press-editorial-line:nth-child(1) { margin-left: 0px; }
.press-bg-editorial .press-editorial-line:nth-child(2) { margin-left: 110px; color: rgba(255, 143, 221, 0.22); letter-spacing: 4px; }
.press-bg-editorial .press-editorial-line:nth-child(3) { margin-left: 20px; }
.press-bg-editorial .press-editorial-line:nth-child(4) { margin-left: 50px; }
.press-bg-editorial .press-editorial-line:nth-child(5) { margin-left: 30px; }
.press-bg-editorial .press-editorial-line:nth-child(6) { margin-left: 85px; color: rgba(0, 240, 255, 0.2); }

/* 左側獨立浮動卡片 */
.press-floating-card {
    position: absolute;
    top: 0;
    right: 8%;
    width: 280px;
    height: 386px;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 143, 221, 0.15);
    perspective: 1000px;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 99 !important;
    will-change: transform, opacity;
    transition: opacity 0.25s ease;
}

.press-floating-card.is-active {
    opacity: 1;
}

.press-floating-card .card-inner-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.press-floating-card .stage-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center center;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* 右側清單欄 (52%) */
.press-right-col {
    width: 52%;
    display: flex;
    flex-direction: column;
}

/* 階段 ①：標題 */
.press-header {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-bottom: 10px;
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.press-header.step-show {
    opacity: 1;
    transform: translateY(0);
}

.press-main-title {
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 900;
    letter-spacing: 3px;
    margin: 0 0 14px 0;
    color: #ffffff;
    font-family: "Comfortaa", sans-serif;
    padding: 0 0 10px;
}

.press-sub-meta {
    display: grid;
    grid-template-columns: 46px 1fr 110px 38px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
    align-items: center;
}

/* 🌟 表頭對齊 */
.press-sub-meta span:nth-child(1) { text-align: center; } /* NO. 置中 */
.press-sub-meta span:nth-child(2) { text-align: left; }   /* 名稱靠左 */
.press-sub-meta span:nth-child(3) { text-align: center; }   /* DATE 置中 */
.press-sub-meta span:nth-child(4) { text-align: center; } /* LINK 置中 */

.press-item {
    display: grid;
    grid-template-columns: 46px 1fr 110px 38px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);
    font-size: 14.5px;
    cursor: default;
    transition: background-color 0.2s ease, padding 0.2s ease, color 0.2s ease;
}

/* 🌟 內文對齊 */
.press-item .col-num {
    font-size: 12px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.32);
    text-align: center; /* 數字置中 */
}

.press-item .col-date {
    font-size: 12px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.38);
    text-align: center;   /* 箭頭置中 */
}

.press-item .col-arrow-btn {
    justify-self: center; /* 箭頭置中 */
}

/* 🌟 階段 ②：清單層（對齊標準 46px 1fr 110px 38px，NO置中，DATE靠左） */
.press-list-wrap {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.press-list-wrap.step-show {
    opacity: 1;
    transform: translateY(0);
}

.press-item:hover {
    color: #ffffff;
    padding-left: 14px;
    background: linear-gradient(90deg, rgba(255, 143, 221, 0.08) 0%, transparent 80%);
    border-bottom: 1px solid rgba(255, 143, 221, 0.4);
}

.press-item .col-name small {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 992px) {
    .press-left-col { display: none; }
    .press-right-col { width: 100%; }
}

/* ==========================================================================
   第四區大事記完整樣式 (CHRONICLES & TIMELINE SHOWCASE - 最終乾淨整合版)
   ========================================================================== */

/* 1. 第三區底部留白收斂（避免過大黑洞空隙） */
#pressSection,
.section-honors-press,
.honors-press-layout {
  padding-bottom: 60px !important;
  margin-bottom: 0px !important;
}

/* 2. 第四區最外層容器 */
.section-chronicle {
  position: relative !important;
  width: 100% !important;
  padding: 80px 0 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  /* 🌟 圖層疊加：上層點陣網格 + 底層深藍至全黑漸層 */
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, #010a27 0%, #00040f 60%, #000000 100%) !important;
  
  /* 🌟 第一個尺寸對應點陣 (28px 28px)，第二個 auto 對應整個漸層鋪滿 */
  background-size: 28px 28px, 100% 100% !important;
}

/* 3. 碰撞換字標題外層容器 */
.chronicle-header-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 15px !important;
  margin-bottom: 70px !important;
  perspective: 1000px !important;
}

/* 4. 碰撞標題容器：徹底拔除白底與陰影方框，滑鼠維持標準箭頭 */
/* 讓裝飾符號以標題方塊為基準做絕對定位 */
.bounce-title-box {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 45px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  cursor: default !important;
  user-select: none !important;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 🌟 星星裝飾通用樣式 */
.title-sparkle {
  position: absolute !important;
  font-family: sans-serif !important;
  line-height: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  color: inherit;                      /* 繼承文字色彩，隨換色同步變色 */
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* 右上角：四芒星 */
.sparkle-tr {
  top: -12px !important;
  right: 5px !important;
  font-size: clamp(24px, 3.2vw, 42px) !important;
  animation: starBlink 2.2s ease-in-out infinite alternate !important;
}

/* 🌟 右上附屬小星：實心、較小巧、坐落在主星的右下方 */
.sparkle-tr-sub {
  top: 14px !important;                 /* 位於主星下方一些 */
  right: -12px !important;              /* 稍微往外推一點，形成高低錯落 */
  font-size: clamp(14px, 1.8vw, 24px) !important; /* 尺寸小巧精緻 */
  animation: starBlink 1.8s ease-in-out infinite alternate !important;
  animation-delay: -0.6s !important;    /* 與旁邊的主星錯開閃爍呼吸，更有靈動感 */
}

/* 左下角：小十字星 */
.sparkle-bl {
  bottom: -10px !important;
  left: 8px !important;
  font-size: clamp(20px, 2.6vw, 34px) !important;
  animation: starBlink 2.2s ease-in-out infinite alternate !important;
  animation-delay: -1.1s !important;   /* 錯開閃爍時間 */
}

/* 星星微幅自轉與呼吸縮放 */
@keyframes starBlink {
  0% {
    transform: scale(0.85) rotate(-10deg);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.15) rotate(15deg);
    opacity: 1;
  }
}

/* 5. 巨型英文字：預設純白，支援碰撞翻轉與平滑變色 */
/* 🌟 1. 頂部彈跳標語 (EVOLUTION / SHAKYVERSE)：橫向擴展 + 飽滿粗圓 */
.bounce-word {
  font-family: 'Zen Maru Gothic', 'Arial Black', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(52px, 8.5vw, 120px) !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  cursor: default !important;

  /* 🌟 描邊推到 3.5px，厚度再往上提一層 */
  -webkit-text-stroke: 3.5px currentColor !important;
  paint-order: stroke fill;

  /* 🌟 水平橫向拉寬 6%：擴大視野骨架，更有大器感 */
  display: inline-block !important;
  transform: scaleX(1.06) !important;

  will-change: transform, opacity, color;
  transition: transform 0.25s ease, opacity 0.25s ease, color 0.35s ease !important;
}

/* 換字翻轉縮放動態 */
.bounce-word.word-flipping {
  opacity: 0 !important;
  transform: scale(0.88) translateY(12px) !important;
}

/* 6. 大事記海報舞台：左右視覺等距對齊（右側補償捲軸寬度） + 淡藍底色 */
.chronicle-poster-stage {
  position: relative !important;
  width: calc(100% - 72px) !important;
  max-width: calc(100% - 72px) !important;
  margin-left: 28px !important;
  margin-right: 44px !important;           /* 抵銷右側捲軸擠壓 */
  margin-bottom: 0px !important;
  /* 🌟 0% 到 45% 都維持蜜桃粉，45% 之後才開始往暖黃過渡 */
  /* 🌟 135deg 柔光流動，左上蜜桃粉、右下暖陽黃，色彩層次極佳 */
  background: linear-gradient(135deg, #ffcfc7 0%, #ffcfc7 35%, #ffc7e9 100%) !important;
  border-radius: 36px !important;
  padding: 90px 32px 110px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45) !important;
  color: #101216 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 大事記縱向排列容器 */
.chronicle-timeline-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 23px !important;
}

/* 單個項目容器 */
.chronicle-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  transition: opacity 0.35s ease !important;
}

/* 懸停聚光燈：其他項目適度維持深色（不泛白） */
.chronicle-timeline-list:hover .chronicle-item:not(:hover) {
  opacity: 0.7 !important;
}

/* 文字包覆層 */
.chronicle-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 巨型遊戲名稱（大黑斜體，純展示） */
/* 🌟 2. 大事記名稱：採用黑體斜體，穩固壓住海報重心，速度感與 Hover 色塊張力最強 */
.chronicle-game-name {
  font-family: 'Arial Black', Impact, sans-serif !important;
  font-style: italic !important;               /* 👈 保留動態斜體速度感 */
  font-weight: 900 !important;
  font-size: clamp(44px, 7.8vw, 118px) !important;
  line-height: 0.92 !important;
  letter-spacing: -2px !important;
  color: #101216 !important;
  text-transform: uppercase !important;
  margin: 0 0 10px 0 !important;
  cursor: default !important;
  user-select: none !important;

  /* 描邊 1.5px 稍微微磨外角，兼顧平底穩定度與厚重色塊 */
  -webkit-text-stroke: 1.5px currentColor !important;
  paint-order: stroke fill;

  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 下方副標題實體可點擊超連結 */
.chronicle-date-link {
  display: inline-block !important;
  font-family: monospace !important;
  font-size: clamp(18px, 1.1vw, 16px) !important;
  font-weight: 800 !important;
  color: #2b1b19 !important;
  letter-spacing: 0.1px !important;
  text-decoration: none !important;
  cursor: pointer !important;               /* 副標題顯示點擊手指 */
  transition: color 0.25s ease, text-decoration 0.25s ease, transform 0.2s ease !important;
}

.chronicle-date-link:hover {
  text-decoration: underline !important;
  transform: translateY(-2px) !important;
}

/* 7. 多彩霓虹 Hover 響應 */
.chronicle-item.color-neon-pink:hover .chronicle-game-name,
.chronicle-item.color-neon-pink:hover .chronicle-date-link {
  color: #ff007f !important;
}

.chronicle-item.color-neon-yellow:hover .chronicle-game-name,
.chronicle-item.color-neon-yellow:hover .chronicle-date-link {
  color: #df9e00 !important;
}

.chronicle-item.color-neon-cyan:hover .chronicle-game-name,
.chronicle-item.color-neon-cyan:hover .chronicle-date-link {
  color: #0066ff !important;
}

.chronicle-item.color-neon-mint:hover .chronicle-game-name,
.chronicle-item.color-neon-mint:hover .chronicle-date-link {
  color: #00ab6b !important;
}

.chronicle-item.color-neon-orange:hover .chronicle-game-name,
.chronicle-item.color-neon-orange:hover .chronicle-date-link {
  color: #ff5500 !important;
}

.chronicle-item.color-neon-purple:hover .chronicle-game-name,
.chronicle-item.color-neon-purple:hover .chronicle-date-link {
  color: #8800ff !important;
}

.chronicle-item.color-neon-green:hover .chronicle-game-name,
.chronicle-item.color-neon-green:hover .chronicle-date-link {
  color: #0fb800 !important;
}

/* ==========================================================================
   8. Hover 縮圖小卡：統一 4px 白邊規格 + 向上懸浮露出副標 + 上浮呼吸動態
   ========================================================================== */

/* 外層卡片：統一 104px 正方形，4px 純白厚外框，20px 圓角 */
.chronicle-hover-card {
  position: absolute !important;
  top: 45% !important;                      /* 向上懸浮，下方副標與日期完整露出 */
  left: 50% !important;
  width: 104px !important;
  height: 104px !important;
  background-color: #ffffff !important;
  border-radius: 20px !important;           /* 統一外圓角 20px */
  border: 4px solid #ffffff !important;     /* 統一 4px 質感純白外框 */
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26) !important;
  overflow: hidden !important;              /* 切齊內部圖片，避免邊角溢出破綻 */
  pointer-events: none !important;
  z-index: 20 !important;
  opacity: 0 !important;
  box-sizing: border-box !important;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.22s ease !important;
}

/* 內部圖片：內圓角完全貼合（20 - 4 = 16px 近似值 14px~16px） */
.chronicle-hover-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
}

/* 社群品牌卡（LINE, YouTube, X）：同樣保有 4px 白邊，內部實色底 */
.chronicle-hover-card.card-icon-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.chronicle-hover-card.badge-line {
  background-color: #06c755 !important;
}

.chronicle-hover-card.badge-yt {
  background-color: #ff0000 !important;
}

.chronicle-hover-card.badge-x {
  background-color: #000000 !important;
}

.chronicle-hover-card.card-icon-badge svg {
  width: 48px !important;
  height: 48px !important;
  display: block !important;
}

/* 🌟 滑鼠移入：
   1. launchAndGlideDown (0.9s，只跑 1 次)：高速無回彈衝頂 ➔ 慢慢無動力降落
   2. loopBreathe (2.2s，延遲 0.9s 後無限循環)：接續著做平穩呼吸（往上 ➔ 往下）
🌟 */
.chronicle-item:hover .chronicle-hover-card {
  opacity: 1 !important;
  pointer-events: none !important;
  animation: 
    launchAndGlideDown 0.9s ease-out forwards,
    loopBreathe 2.2s ease-in-out 0.9s infinite !important;
}

/* 🌟 動態 1（單次進場）：高速衝頂（完全不反彈） ➔ 像羽毛無動力慢慢降落 🌟 */
@keyframes launchAndGlideDown {
  /* 1. 起點：從下方 130px 衝刺，完全縮小 */
  0% {
    transform: translate(-50%, calc(-50% + 180px)) scale(0.35);
    opacity: 0;
  }
  
  /* 2. 前 0.2 秒極速衝上頂點：精準停在最高點，絕無任何回彈或過衝！ */
  22% {
    transform: translate(-50%, calc(-50% - 6px)) scale(1);
    opacity: 1;
  }

  /* 3. 無動力慢慢降落（花了 0.7 秒極其緩慢地飄落沉降 14px） */
  100% {
    transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
    opacity: 1;
  }
}

/* 🌟 動態 2（常態循環）：只有這段在呼吸！從降落後的低點，慢慢往上 ➔ 慢慢往下 🌟 */
@keyframes loopBreathe {
  0%, 100% {
    /* 銜接動態 1 降落後的低點位置 */
    transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
  }
  50% {
    /* 慢慢往上浮起 */
    transform: translate(-50%, calc(-50% - 4px)) scale(1.02);
  }
}


/* ==========================================================================
   RWD 響應式優化：1024px ~ 1660px 筆電視野修復
   ========================================================================== */
@media (max-width: 1660px) {
    /* 1. 字級微調，第 9 行小標語排除不縮小 */
    .archive-bg-editorial .editorial-line:not(:nth-child(9)) {
        font-size: clamp(28px, 3.0vw, 52px) !important;
        letter-spacing: 1px !important;
        margin-bottom: 20px !important;
    }

    /* 2. 右側錯落間距適度靠邊 */
    .archive-bg-editorial .editorial-line:nth-child(1) { margin-left: 10px !important; }
    .archive-bg-editorial .editorial-line:nth-child(2) { margin-left: 105px !important; }
    .archive-bg-editorial .editorial-line:nth-child(3) { margin-left: 0px !important; }
    .archive-bg-editorial .editorial-line:nth-child(4) { margin-left: 65px !important; }
    .archive-bg-editorial .editorial-line:nth-child(5) { margin-left: 135px !important; }
    .archive-bg-editorial .editorial-line:nth-child(6) { margin-left: 25px !important; }
    .archive-bg-editorial .editorial-line:nth-child(7) { margin-left: 15px !important; }
    .archive-bg-editorial .editorial-line:nth-child(8) { margin-left: 0px !important; }
    .archive-bg-editorial .editorial-line:nth-child(9) { margin-left: 45px !important; }

    /* 3. 第 3 區同步調整 */
    .press-bg-editorial .press-editorial-line {
        font-size: clamp(28px, 3.0vw, 52px) !important;
        letter-spacing: 1px !important;
        margin-bottom: 20px !important;
    }
    .press-bg-editorial .press-editorial-line:nth-child(2) { margin-left: 85px !important; }
    .press-bg-editorial .press-editorial-line:nth-child(6) { margin-left: 65px !important; }
}

/* ==========================================================================
   RWD 響應式優化：992px 以下 (平板端水平對稱置中)
   ========================================================================== */
@media (max-width: 992px) {
  .chronicle-poster-stage {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 70px 20px 80px !important;
    border-radius: 28px !important;
  }
}

/* ==========================================================================
   1. 平板專用斷點 (601px ~ 1024px，包含 768px 平板)
   ========================================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  /* 🌟 768 平板行程足夠 (170vh)，旋渦能自然展開轉動，不再被腰斬 */
  .vortex-scroll-track {
    height: 170vh !important;
  }

  .section-vortex {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }

  .section-awards-archive {
    position: relative !important;
    z-index: 5 !important;
    padding: 60px 0 50px !important;
  }

}

/* ==========================================================================
   2. 純手機專用斷點 (≤ 600px) ── 維持你覺得很完美的手機現狀！
   ========================================================================== */
@media (max-width: 600px) {
  /* --------------------------------------------------
     1. 全域滾動與第一區：解開 fixed，抽屜式實體覆蓋
     -------------------------------------------------- */
  html, body.honors-body,
  .honors-scroll-rack {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 手機專屬 100vh 抽屜式 */
  .vortex-scroll-track {
    height: 100vh !important;
  }

  .section-vortex {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 1 !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  .honors-vortex-canvas-wrap {
    overflow: hidden !important;
  }

  .honors-vortex-canvas-wrap canvas {
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .section-awards-archive {
    position: relative !important;
    z-index: 5 !important;
    box-shadow: 0 -25px 60px rgba(0, 0, 0, 0.95) !important;
    padding: 35px 0 30px !important;
  }

  .vortex-scroll-hint {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* --------------------------------------------------
     2. 頂部導覽列
     -------------------------------------------------- */
  .site-top-header .nav-links,
  nav#navLinks {
    display: none !important;
    pointer-events: none !important;
  }

  /* --------------------------------------------------
     3. 第 1 區巨幕大字
     -------------------------------------------------- */
  .honors-huge-bg-title {
    top: 25% !important;
    transform: translate(-50%, -50%) !important;
    width: 100vw !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 16px rgba(0, 180, 255, 0.45)) 
            drop-shadow(0 0 32px rgba(0, 120, 255, 0.25)) !important;
  }

  .honors-huge-bg-title span {
    font-size: clamp(38px, 11vw, 56px) !important;
    color: rgba(230, 245, 255, 0.55) !important;
    text-shadow: 0 0 14px rgba(0, 200, 255, 0.40) !important;
    animation-duration: 6s !important;
  }

  .honors-huge-bg-title .title-line-1 {
    margin-bottom: 8px !important;
  }

  /* --------------------------------------------------
     4. 第 2 & 3 區清單
     -------------------------------------------------- */
  .section-honors-press,
  #pressSection {
    padding: 30px 0 15px !important;
  }

  #pressSection,
  .honors-press-layout {
    padding-bottom: 15px !important;
    margin-bottom: 0px !important;
  }

  .archive-header,
  .press-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
  }

  .archive-main-title,
  .press-main-title {
    text-align: left !important;
    width: 100% !important;
    font-size: clamp(24px, 6.5vw, 32px) !important;
    letter-spacing: 2px !important;
    padding-left: 0 !important;
    margin-bottom: 6px !important;
  }

/* 🌟 手機端配比：DATE 緊湊定為 60px 靠左切齊，空間全留給標題 */
  .archive-sub-meta,
  .press-sub-meta,
  .archive-item,
  .press-item {
    display: grid !important;
    grid-template-columns: 24px 1fr 60px 18px !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 表頭樣式 */
  .archive-sub-meta,
  .press-sub-meta {
    font-size: 9.5px !important;
    letter-spacing: 0.5px !important;
    padding: 6px 0 !important;
  }

  /* 🌟 表頭 4 欄對齊：DATE 靠左 */
  .archive-sub-meta span:nth-child(1), .press-sub-meta span:nth-child(1) { text-align: center !important; }
  .archive-sub-meta span:nth-child(2), .press-sub-meta span:nth-child(2) { text-align: left !important; }
  .archive-sub-meta span:nth-child(3), .press-sub-meta span:nth-child(3) { text-align: center !important; } 
  .archive-sub-meta span:nth-child(4), .press-sub-meta span:nth-child(4) { text-align: center !important; }

  /* 內文序號置中 */
  .archive-item .col-num, .press-item .col-num {
    font-size: 11px !important;
    text-align: center !important;
  }

  /* 🌟 內文日期靠左切齊，寬度 60px 恰好包覆不留虛空 */
  .archive-item .col-date, .press-item .col-date {
    font-size: 10px !important;
    text-align: left !important;   /* 日期靠左切齊 */
    white-space: nowrap !important;
  }

  /* 箭頭置中 */
  .col-arrow-btn {
    justify-self: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 12px !important;
  }

  /* 🌟 強制文字全部嚴格靠左齊平，換行絕不置中 */
  .archive-item .col-name,
  .press-item .col-name {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    display: flex !important;
    flex-direction: column !important;    /* 垂直排列：標題在上、副標在下 */
    align-items: flex-start !important;    /* 靠左對齊 */
    justify-content: center !important;
    text-align: left !important;           /* 換行文字嚴格齊左 */
    gap: 3px !important;
  }

  /* 針對內部所有文字節點與小標籤，全部鎖定靠左 */
  .archive-item .col-name span,
  .archive-item .col-name small,
  .press-item .col-name span,
  .press-item .col-name small {
    font-size: 10px !important;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
  }

  .archive-item .col-name small,
  .press-item .col-name small { font-size: 10px !important; }
  .archive-item .col-date,
  .press-item .col-date { font-size: 10px !important; }

  /* --------------------------------------------------
     5. 跑馬燈牆
     -------------------------------------------------- */
  .honors-marquee-wall {
    padding: 24px 0 !important;
    gap: 8px !important;
  }

  .marquee-text-group span {
    font-size: clamp(22px, 5.2vw, 28px) !important;
  }

  .marquee-text-group {
    gap: 18px !important;
    padding-right: 18px !important;
  }

  .marquee-text-group .sym-slash {
    font-size: 15px !important;
    margin: 0 6px !important;
  }

  .marquee-gif-icon {
    width: 30px !important;
    height: 36px !important;
    margin: 0 10px !important;
  }

  /* --------------------------------------------------
     6. 第 4 區大事記
     -------------------------------------------------- */
  .section-chronicle {
    padding-top: 15px !important;
    padding-bottom: 0px !important;
  }

  .chronicle-header-wrap {
    margin-bottom: 25px !important;
    padding-top: 0 !important;
  }

  .bounce-title-box {
    padding: 6px 20px !important;
  }

  .bounce-word {
    font-size: clamp(32px, 9vw, 44px) !important;
    letter-spacing: -1px !important;
  }

  .chronicle-game-name {
    font-size: clamp(30px, 8vw, 42px) !important;
    margin-bottom: 6px !important;
  }

  .chronicle-date-link {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }

  /* --------------------------------------------------
     7. Footer
     -------------------------------------------------- */
  footer.site-footer {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
  }
}

/* 🌟 1024px 以下：撐滿 100%、拔除 NAV 兩側標籤、對齊校正 */
@media (min-width: 601px) and (max-width: 1024px) {
    /* 1. 徹底隱藏 NAV 左右兩邊的 SHAKY LAB. 與 v2.0，不讓它浮出穿幫 */
    .nav-side-tag,
    .nav-side-tag.is-left,
    .nav-side-tag.is-right {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 2. 清單滿版舒展 */
    .archive-left-col,
    .press-right-col {
        width: 100% !important;
        max-width: 100% !important;
    }
    .archive-right-col,
    .press-left-col {
        display: none !important;
    }

    /* 3. 平板 Grid 比例：第一欄 40px 置中、第三欄 100px 靠左 */
    .archive-sub-meta,
    .press-sub-meta,
    .archive-item,
    .press-item {
        display: grid !important;
        grid-template-columns: 40px 1fr 100px 32px !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 序號一律水平置中 */
    .archive-sub-meta span:nth-child(1),
    .press-sub-meta span:nth-child(1),
    .archive-item .col-num,
    .press-item .col-num {
        text-align: center !important;
    }

    /* 日期一律靠左對齊，不再貼在最右邊 */
    .archive-sub-meta span:nth-child(3),
    .press-sub-meta span:nth-child(3),
    .archive-item .col-date,
    .press-item .col-date {
        text-align: center !important;
    }

    /* 箭頭置中 */
    .archive-sub-meta span:nth-child(4),
    .press-sub-meta span:nth-child(4) {
        text-align: center !important;
    }
    .col-arrow-btn {
        justify-self: center !important;
    }
}

/* ==========================================================================
   5. 共用 Footer：全站統一低調微光，Hover 才優雅浮現
   ========================================================================== */
/* 🌟 大卡片與頁面底部保持優雅呼吸空間 */
footer.site-footer {
    position: relative !important;
    width: 100% !important;
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
    text-align: center !important;
    opacity: 0.15 !important;
    transition: opacity 0.35s ease !important;
}

/* 🌟 Hover 到底部時才清晰點亮 */
footer.site-footer:hover {
    opacity: 0.85 !important;
}

/* ==========================================================================
   Honors 專屬 RWD：對齊全站斷點 (1024px 小字隱藏、768px NAV 隱藏、手機漢堡定位)
   ========================================================================== */

/* 🌟 1. 1100px 以下（包含 1024px）：連同 is-left / is-right 與動畫徹底強制封殺 */
@media screen and (max-width: 1100px) {
    html body.honors-body .nav-side-tag,
    html body.honors-body .nav-side-tag.is-left,
    html body.honors-body .nav-side-tag.is-right,
    html body.is-expanded .nav-side-tag,
    html body.is-expanded .nav-side-tag.is-left,
    html body.is-expanded .nav-side-tag.is-right,
    html body .site-top-header .nav-side-tag,
    html body nav#navLinks .nav-side-tag,
    .nav-side-tag,
    .nav-side-tag.is-left,
    .nav-side-tag.is-right {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: none !important;   /* 👈 關鍵：徹底拔除 0.5s 延遲浮現動畫 */
        animation: none !important;
    }
}

/* 🌟 2. 768px 以下：NAV 選單徹底隱藏，只留漢堡按鈕 */
@media screen and (max-width: 768px) {
    .site-top-header .nav-links,
    nav#navLinks {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* 🌟 3. 600px 以下手機版：漢堡按鈕位置完全對齊 Roadmap 完美數值 (top: 15px; right: 20px;) */
@media screen and (max-width: 600px) {
    body.honors-body .menu-container {
        right: 20px !important;
        top: 15px !important;
    }
}