/* motion.css — 直出檔（不經 Lightning CSS 打包，避免 @supports 被拆、語法被改寫） */

/* ── scroll-driven reveal：預設可見，僅在支援時啟用 ── */
.reveal {
  opacity: 1;
  transform: none;
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  .reveal {
    animation-name: reveal-up;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* ── 跑馬燈 ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: inline-flex;
  gap: 2.5rem;
  padding-right: 2.5rem;
  animation-name: marquee;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }
/* ── 檢視轉場 slide 時長回復 0.25s ──
   Astro 7 的 transition:animate="slide" 以 scoped 名稱 astro-7hygjbfc-1 套用 @layer astro，
   內建 90/220/210ms + 30ms delay；此處覆寫回舊站 slide({duration: 0.25s}) 的計時。
   未分層規則優先於 @layer astro（免 !important）；僅命中文章頁 slide，
   root 與 index 的 hero 轉場維持原預設。 */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(astro-7hygjbfc-1),
  ::view-transition-new(astro-7hygjbfc-1) {
    animation-duration: 0.25s;
    animation-delay: 0s;
  }
}

/* ── 低動作偏好：完整關閉（含 Astro ClientRouter 自帶的無效 query 之替代） ── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .zoom-img { transition: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  [data-astro-transition-scope] {
    animation-name: none !important;
  }
  html { scroll-behavior: auto !important; }
}

/* pause marquee when it (or a link inside) has focus */
.marquee-track:focus-within {
  animation-play-state: paused;
}