/* 🌟 本機引入 jf open 粉圓 2.1 字型檔 */
@font-face {
  font-family: 'jf-openhunround';
  src: url('../fonts/jf-openhuninn-2.1.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700;900&family=M+PLUS+Rounded+1c:wght@800;900&display=swap');


/* ===================================================
   Shaky 互動層樣式 (側邊 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: 'jf-openhunround', sans-serif !important;
    font-size: 64px;
    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;
}

/* 右端 v2.0：Shaky 櫻花粉透光刻印標籤 (粉嫩、微透、不搶戲) */
.nav-side-tag.is-right {
   right: -130px;
   /* 高明度櫻花粉 + 65% 微透明度 */
   color: rgba(255, 118, 161, 0.8);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   /* 輕透立體刻印光感：下方微暗、上方微白 */
   text-shadow: 
      0 -1px 0 rgba(0, 0, 0, 0.6),
      0 1px 1px rgba(255, 255, 255, 0.15);
   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;
}