/* ===== Page transitions ===== */

/* 全域文字連結 hover 加底線（信箱、各種藍字連結） */
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover { text-decoration: underline !important; }

/* 包在這個 class 裡的符號（如 ›、↗、→）不會繼承父層連結的底線 */
.sym { display: inline-block; text-decoration: none !important; }

/* Footer 連結：視覺上不顯眼，但 hover 顯示可點擊 */
.footer-link { color: inherit; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

/* 關閉瀏覽器原生 smooth scroll —— 我們用 JS 自訂更柔順的緩動曲線 */
html { scroll-behavior: auto; }

/* A. 進入頁面時整頁淡入（更柔順、更慢起步） */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0);   }
}
body {
  animation: page-fade-in .6s cubic-bezier(.16,.84,.44,1) both;
}

/* C. 點選離開頁面時的淡出狀態 */
body.is-leaving {
  animation: none;
  opacity: 0;
  transform: translateY(-4px);
  filter: blur(2px);
  transition: opacity .28s cubic-bezier(.4,0,.2,1),
              transform .28s cubic-bezier(.4,0,.2,1),
              filter .28s ease;
  pointer-events: none;
}

/* D. View Transitions API — Safari 18+/Chrome 111+ 自動套用 */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: vt-out .3s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root) {
  animation: vt-in .55s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes vt-out {
  to { opacity: 0; transform: translateY(-4px); filter: blur(2px); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0);   }
}

/* 尊重「減少動態效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  body, body.is-leaving {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}