/* ===================================================
   Shaky 互動層樣式 (側邊 3 倍特大字暴擊版)
   =================================================== */

/* 經典街機立體雙色：衝啥彩蛋標籤 (放大 3 倍) */
.shaky-bubble-text {
    position: fixed !important;
    top: 0;
    left: 0;
    margin: 0;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center center;
    pointer-events: none !important;
    white-space: nowrap;
    z-index: 99999 !important; /* 最高層級，絕不被遮擋 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 64px; /* 基礎字級直接放大 3 倍 */
    font-weight: 900;
    color: #FFE600; /* 明亮街機黃 */
    text-shadow: 
        5px 5px 0 #D8004F,  /* 桃紅立體厚陰影加粗 */
        10px 10px 0 rgba(0, 0, 0, 0.45);
    letter-spacing: 4px;
    opacity: 0;
    will-change: transform, opacity;
}

.shaky-bubble-sub {
    display: block;
    font-size: 26px; /* 副標同步放大 */
    color: #FFFFFF;
    text-shadow: 3px 3px 0 #000;
    letter-spacing: 2px;
    margin-top: -4px;
}

/* 1. 左右兩端基礎：收合時「立刻退場」（0s 延遲，快速隱藏） */
.nav-side-tag {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 11px;
   font-family: 'Comfortaa', monospace, sans-serif;
   letter-spacing: 2px;
   pointer-events: none;
   user-select: none;
   white-space: nowrap;
   opacity: 0;
   transition: opacity 0.3s ease 0s; /* ✨ 收合立刻淡出 */
}

/* 左端刻印基礎樣式 */
.nav-side-tag.is-left {
   left: -180px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.55);
   text-shadow: 
      0 -1px 0 rgba(0, 0, 0, 0.8),
      0 1px 0 rgba(255, 255, 255, 0.15);
   transition: color 0.4s ease, text-shadow 0.4s ease, opacity 0.3s ease 0s;
}

/* 右端 v1.2 基礎樣式 */
.nav-side-tag.is-right {
   right: -180px;
   color: #c22a22;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9),
                0 1px 0 rgba(255, 255, 255, 0.25);
   transition: opacity 0.3s ease 0s;
}

/* ===================================================
   展開大舞台：等板子鋪好，延遲 0.5s 才浮現
   =================================================== */
body.is-expanded .nav-side-tag {
   opacity: 0.7;
   /* ✨ 動畫跑 0.8 秒，並且延遲 0.5 秒（等背景動畫完成）才出現 */
   transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

/* 展開時左側文字的光影切換（同步延遲 0.5s） */
body.is-expanded .nav-side-tag.is-left {
   color: rgba(220, 225, 230, 0.3);
   text-shadow: 
      0 -1px 0 rgba(0, 0, 0, 1),
      0 1px 0 rgba(255, 255, 255, 0.25);
   transition: color 0.8s ease 0.5s, text-shadow 0.8s ease 0.5s, opacity 0.8s ease 0.5s;
}