/* 主要頁面的動態效果
 *
 * 這份檔案只「加」動態，不改任何既有樣式的版面、顏色或尺寸。
 * visual-lock.css 與 visual-lock-v52.css（首頁／AI 導遊／路線／攻略／足跡）
 * 原本沒有任何 keyframes 與 transition，這裡補上。
 *
 * 進場動畫一律掛在 #main-content[data-qg-enter] 之下，該旗標只有換頁時才出現，
 * 所以收藏、加入路線這類會觸發整頁 render() 的互動不會重播動畫。
 */

/* 進場動畫只在「系統沒有要求減少動態」時才存在。
 * 這樣就不可能出現「動畫被關掉、元素卻卡在 opacity:0」的空白頁——
 * 減少動態時這些規則根本不會被套用。
 */
@media (prefers-reduced-motion: no-preference) {

  /* ==========================================================
     1. 頁面容器進場
     ========================================================== */

  #main-content[data-qg-enter] > .ql-desktop-page,
  #main-content[data-qg-enter] > .ql-mobile-page,
  #main-content[data-qg-enter] > .ql-v52-guide-detail,
  #main-content[data-qg-enter] > .ql-venue-guide,
  #main-content[data-qg-enter] > .ql-mobile-venue-guide,
  #main-content[data-qg-enter] > .v3-page,
  #main-content[data-qg-enter] > .v4-detail-page,
  #main-content[data-qg-enter] > .qg-live-section {
    animation: qg-m-rise 420ms cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }

  /* ==========================================================
     2. 面板與區塊：依序浮現
     ========================================================== */

  #main-content[data-qg-enter] .ql-panel,
  #main-content[data-qg-enter] .ql-mobile-section,
  #main-content[data-qg-enter] .v4-section,
  #main-content[data-qg-enter] .v3-page > section {
    animation: qg-m-rise 460ms cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }

  #main-content[data-qg-enter] .ql-panel:nth-of-type(1),
  #main-content[data-qg-enter] .ql-mobile-section:nth-of-type(1) { animation-delay: 40ms; }
  #main-content[data-qg-enter] .ql-panel:nth-of-type(2),
  #main-content[data-qg-enter] .ql-mobile-section:nth-of-type(2) { animation-delay: 90ms; }
  #main-content[data-qg-enter] .ql-panel:nth-of-type(3),
  #main-content[data-qg-enter] .ql-mobile-section:nth-of-type(3) { animation-delay: 140ms; }
  #main-content[data-qg-enter] .ql-panel:nth-of-type(n + 4),
  #main-content[data-qg-enter] .ql-mobile-section:nth-of-type(n + 4) { animation-delay: 180ms; }

  /* Hero 的文字與吉祥物稍微晚一點進來 */
  #main-content[data-qg-enter] .ql-desktop-hero > div,
  #main-content[data-qg-enter] .ql-mobile-hero > div {
    animation: qg-m-rise 520ms cubic-bezier(0.22, 0.68, 0.32, 1) 60ms both;
  }

  #main-content[data-qg-enter] .ql-hero-mascot,
  #main-content[data-qg-enter] .ql-campus-art {
    animation: qg-m-fade 720ms ease 140ms both;
  }

  /* ==========================================================
     3. 卡片：錯開進場（用 nth-child，不需要改既有 JS）
     ========================================================== */

  #main-content[data-qg-enter] .ql-place-card,
  #main-content[data-qg-enter] .ql-venue-guide__card,
  #main-content[data-qg-enter] .ql-mobile-venue-guide__card,
  #main-content[data-qg-enter] .ql-v52-route-row,
  #main-content[data-qg-enter] .ql-nearby-grid > article,
  #main-content[data-qg-enter] .ql-theme-grid > button,
  #main-content[data-qg-enter] .ql-mini-grid > button,
  #main-content[data-qg-enter] .ql-v52-more-guides article,
  #main-content[data-qg-enter] .ql-v52-mobile-more article,
  #main-content[data-qg-enter] .ql-foot-timeline > article,
  #main-content[data-qg-enter] .ql-itinerary-row,
  #main-content[data-qg-enter] .v3-trip-card,
  #main-content[data-qg-enter] .v4-place-card,
  #main-content[data-qg-enter] .v4-event-card {
    animation: qg-m-rise 420ms cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }

  #main-content[data-qg-enter] .ql-place-card:nth-child(1),
  #main-content[data-qg-enter] .ql-venue-guide__card:nth-child(1),
  #main-content[data-qg-enter] .ql-mobile-venue-guide__card:nth-child(1),
  #main-content[data-qg-enter] .ql-v52-route-row:nth-child(1),
  #main-content[data-qg-enter] .ql-nearby-grid > article:nth-child(1),
  #main-content[data-qg-enter] .ql-theme-grid > button:nth-child(1),
  #main-content[data-qg-enter] .ql-mini-grid > button:nth-child(1),
  #main-content[data-qg-enter] .ql-foot-timeline > article:nth-child(1),
  #main-content[data-qg-enter] .ql-itinerary-row:nth-child(1) { animation-delay: 120ms; }

  #main-content[data-qg-enter] .ql-place-card:nth-child(2),
  #main-content[data-qg-enter] .ql-venue-guide__card:nth-child(2),
  #main-content[data-qg-enter] .ql-mobile-venue-guide__card:nth-child(2),
  #main-content[data-qg-enter] .ql-v52-route-row:nth-child(2),
  #main-content[data-qg-enter] .ql-nearby-grid > article:nth-child(2),
  #main-content[data-qg-enter] .ql-theme-grid > button:nth-child(2),
  #main-content[data-qg-enter] .ql-mini-grid > button:nth-child(2),
  #main-content[data-qg-enter] .ql-foot-timeline > article:nth-child(2),
  #main-content[data-qg-enter] .ql-itinerary-row:nth-child(2) { animation-delay: 160ms; }

  #main-content[data-qg-enter] .ql-place-card:nth-child(3),
  #main-content[data-qg-enter] .ql-venue-guide__card:nth-child(3),
  #main-content[data-qg-enter] .ql-mobile-venue-guide__card:nth-child(3),
  #main-content[data-qg-enter] .ql-v52-route-row:nth-child(3),
  #main-content[data-qg-enter] .ql-nearby-grid > article:nth-child(3),
  #main-content[data-qg-enter] .ql-theme-grid > button:nth-child(3),
  #main-content[data-qg-enter] .ql-mini-grid > button:nth-child(3),
  #main-content[data-qg-enter] .ql-foot-timeline > article:nth-child(3),
  #main-content[data-qg-enter] .ql-itinerary-row:nth-child(3) { animation-delay: 200ms; }

  /* 第四張之後統一停在 240ms，長清單最後一張不會等太久 */
  #main-content[data-qg-enter] .ql-place-card:nth-child(n + 4),
  #main-content[data-qg-enter] .ql-v52-route-row:nth-child(n + 4),
  #main-content[data-qg-enter] .ql-nearby-grid > article:nth-child(n + 4),
  #main-content[data-qg-enter] .ql-theme-grid > button:nth-child(n + 4),
  #main-content[data-qg-enter] .ql-mini-grid > button:nth-child(n + 4),
  #main-content[data-qg-enter] .ql-foot-timeline > article:nth-child(n + 4),
  #main-content[data-qg-enter] .ql-itinerary-row:nth-child(n + 4) { animation-delay: 240ms; }

  /* ==========================================================
     4. AI 導遊對話：依說話的人從不同邊進來
     ========================================================== */

  #main-content[data-qg-enter] .ql-ai-message,
  #main-content[data-qg-enter] .ql-mobile-ai-msg {
    animation: qg-m-in-left 460ms cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }

  #main-content[data-qg-enter] .ql-user-message,
  #main-content[data-qg-enter] .ql-mobile-user-msg {
    animation: qg-m-in-right 460ms cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }

  #main-content[data-qg-enter] .ql-chat-log > *:nth-child(1),
  #main-content[data-qg-enter] .ql-ai-mobile-thread > *:nth-child(1) { animation-delay: 140ms; }
  #main-content[data-qg-enter] .ql-chat-log > *:nth-child(2),
  #main-content[data-qg-enter] .ql-ai-mobile-thread > *:nth-child(2) { animation-delay: 220ms; }
  #main-content[data-qg-enter] .ql-chat-log > *:nth-child(3),
  #main-content[data-qg-enter] .ql-ai-mobile-thread > *:nth-child(3) { animation-delay: 300ms; }
  #main-content[data-qg-enter] .ql-chat-log > *:nth-child(n + 4),
  #main-content[data-qg-enter] .ql-ai-mobile-thread > *:nth-child(n + 4) { animation-delay: 360ms; }

  /* 路線建議卡片在訊息之後展開 */
  #main-content[data-qg-enter] .ql-route-suggestion,
  #main-content[data-qg-enter] .ql-mobile-route-card {
    animation: qg-m-rise 480ms cubic-bezier(0.22, 0.68, 0.32, 1) 420ms both;
  }

}

/* ==========================================================
   5. 互動回饋：hover 與按下（不受換頁旗標限制）
   ========================================================== */

.ql-place-card,
.ql-venue-guide__card,
.ql-mobile-venue-guide__card,
.ql-v52-route-row,
.v3-trip-card,
.ql-nearby-grid > article,
.ql-v52-more-guides article,
.ql-v52-mobile-more article {
  transition: transform 220ms cubic-bezier(0.22, 0.68, 0.32, 1),
              box-shadow 220ms ease;
}

.ql-place-card:hover,
.ql-venue-guide__card:hover,
.ql-mobile-venue-guide__card:hover,
.v3-trip-card:hover,
.ql-nearby-grid > article:hover,
.ql-v52-more-guides article:hover,
.ql-v52-mobile-more article:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(31, 41, 55, 0.12);
}

.ql-v52-route-row:hover {
  transform: translateX(3px);
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.1);
}

/* 卡片內的圖片緩慢放大，overflow 由既有樣式決定，這裡不改版面 */
.ql-place-card > img,
.ql-nearby-grid > article img,
.ql-v52-more-guides article img {
  transition: transform 480ms cubic-bezier(0.22, 0.68, 0.32, 1);
}

.ql-place-card:hover > img,
.ql-nearby-grid > article:hover img,
.ql-v52-more-guides article:hover img {
  transform: scale(1.04);
}

/* 主要按鈕與方塊選項 */
.ql-primary,
.ql-theme-grid > button,
.ql-mini-grid > button,
.ql-quick-strip button,
.ql-v52-mobile-sticky button {
  transition: transform 160ms ease, box-shadow 200ms ease, filter 160ms ease;
}

.ql-primary:hover,
.ql-quick-strip button:hover,
.ql-v52-mobile-sticky button:hover { transform: translateY(-1px); }

.ql-primary:active,
.ql-quick-strip button:active,
.ql-v52-mobile-sticky button:active { transform: translateY(0) scale(0.985); }

.ql-theme-grid > button:hover,
.ql-mini-grid > button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(31, 41, 55, 0.12);
}

/* 行程列與快捷列的箭頭跟著滑動 */
.ql-itinerary-row,
.ql-quick-strip button { transition: transform 200ms ease, background-color 200ms ease; }
.ql-itinerary-row:hover { transform: translateX(3px); }

/* ==========================================================
   6. 減少動態時關掉互動回饋（進場動畫已由上方 media query 天然排除）
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .ql-place-card,
  .ql-venue-guide__card,
  .ql-mobile-venue-guide__card,
  .ql-v52-route-row,
  .v3-trip-card,
  .ql-nearby-grid > article,
  .ql-v52-more-guides article,
  .ql-v52-mobile-more article,
  .ql-place-card > img,
  .ql-nearby-grid > article img,
  .ql-v52-more-guides article img,
  .ql-primary,
  .ql-theme-grid > button,
  .ql-mini-grid > button,
  .ql-quick-strip button,
  .ql-itinerary-row,
  .ql-v52-mobile-sticky button {
    transition: none;
  }

  .ql-place-card:hover,
  .ql-venue-guide__card:hover,
  .ql-mobile-venue-guide__card:hover,
  .v3-trip-card:hover,
  .ql-nearby-grid > article:hover,
  .ql-v52-more-guides article:hover,
  .ql-v52-mobile-more article:hover,
  .ql-v52-route-row:hover,
  .ql-primary:hover,
  .ql-primary:active,
  .ql-theme-grid > button:hover,
  .ql-mini-grid > button:hover,
  .ql-quick-strip button:hover,
  .ql-itinerary-row:hover,
  .ql-v52-mobile-sticky button:hover {
    transform: none;
    box-shadow: none;
  }

  .ql-place-card:hover > img,
  .ql-nearby-grid > article:hover img,
  .ql-v52-more-guides article:hover img { transform: none; }
}

/* ==========================================================
   7. Keyframes
   ========================================================== */

@keyframes qg-m-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes qg-m-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes qg-m-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}

@keyframes qg-m-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}