/* ============================================================
   DN — 動態效果（獨立檔，移除此檔即回到全靜態）
   原則：克制、只在進場發生一次、不干擾閱讀
   ============================================================ */

/* ---------- 1. 滾動進場：淡入 + 上移 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* 圖片類：淡入 + 由 1.06 收到 1（穩重的收斂感，不是彈跳） */
[data-reveal="zoom"] {
  transform: none;
  clip-path: inset(0);
}
[data-reveal="zoom"] img {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal="zoom"].is-in img { transform: scale(1); }

/* ---------- 2. Hero 文案分層進場（載入即播，不等滾動） ---------- */
.hero-title,
.hero-sub,
.hero .stat {
  opacity: 0;
  transform: translateY(24px);
  animation: dn-rise .95s cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero-title { animation-delay: .25s; }
.hero-sub   { animation-delay: .45s; }
.hero .stat:nth-child(1) { animation-delay: .70s; }
.hero .stat:nth-child(2) { animation-delay: .82s; }

@keyframes dn-rise {
  to { opacity: 1; transform: none; }
}

/* Hero 影片極緩慢推進，讓靜止畫面也有呼吸 */
.hero-video {
  animation: dn-drift 26s ease-in-out infinite alternate;
}
@keyframes dn-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* ---------- 3. 圖片 hover：緩慢放大（需外層裁切） ---------- */
.project-photo,
.news-photo,
.phil-figure {
  overflow: hidden;
}
.project-photo img,
.news-photo img,
.phil-figure img {
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.project-photo:hover img,
.news-photo:hover img,
.phil-figure:hover img {
  transform: scale(1.045);
}

/* ---------- 4. 最新消息列：hover 整列右移
   （箭頭前推已在 main.css 定義，這裡不重複）
   基準 padding-left 為 25px，右移到 35px 才不會壓到左側色塊 ---------- */
.news-item { transition: padding-left .35s ease; }
.news-item:hover { padding-left: 35px; }

/* ---------- 5. READ MORE：實心按鈕微上浮（不動 display，置中才不會壞） ---------- */
.btn-more {
  transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* ---------- 無障礙：使用者要求減少動態就全關 ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="zoom"] img { transition: none; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal="zoom"] img { transform: none; }
  .hero-title, .hero-sub, .hero .stat {
    opacity: 1; transform: none; animation: none;
  }
  .hero-video { animation: none; }
  .project-photo img, .news-photo img, .phil-figure img,
  .news-item, .btn-more { transition: none; }
  .news-item:hover { padding-left: 25px; }
  .btn-more:hover { transform: none; box-shadow: none; }
}