/* ============================================================================
   萌爪貓坊 · 全站低調進場動效  enter-motion.css
   2026-10-30 夜間巡檢 任務 6（新增檔，不改任何既有 CSS / HTML）
   ----------------------------------------------------------------------------
   原則
   1. 只做「淡入 + 12px 橫向滑入」，0.5s ease-out，需要時交錯 60ms。
   2. 首屏（hero、首屏大圖）一律不動：hero 圖、輪播、WHY US 旋轉木馬、
      header / tabbar / 頁尾、已是 .scroll-reveal* 的元素全部不碰。
   3. 文字（h1）走純 CSS animation：第一帧 opacity 就有 0.45，
      不延遲 LCP、不隱藏內容，也不需要 JS。
   4. 首屏外的卡片區塊由 enter-motion.js 用 IntersectionObserver 加 class
      （html.em-on 才生效）；沒有 JS 時 html 不會有 em-on，內容完整可見。
   5. prefers-reduced-motion: reduce 全部關閉；只用 opacity / transform，不改版面。
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* ── A. 文字主標（純 CSS，無 JS） ───────────────────────────────────── */
  .deals-title,
  .policy-title,
  .kitten-detail-title {
    animation: em-enter-text .5s ease-out both;
  }

  /* 第二行以後的元素慢 60ms 起跑，形成交錯 */
  .kitten-detail-title {
    animation-delay: 60ms;
  }
}

@keyframes em-enter-text {
  from { opacity: .45; transform: translateX(-12px); }
  to   { opacity: 1;   transform: translateX(0); }
}

/* ── B. 首屏外主要卡片區塊（enter-motion.js 加 class） ───────────────── */
html.em-on .em-arm {
  transition: opacity .5s ease-out, transform .5s ease-out;
  will-change: opacity, transform;
}

html.em-on .em-arm.em-out {
  opacity: 0;
  transform: translateX(-12px);
}

html.em-on .em-arm.em-out:nth-child(2n) {
  transform: translateX(12px);
}

html.em-on .em-arm.em-in {
  opacity: 1;
  transform: none;
}

/* ── C. 關閉動效的情形 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .deals-title,
  .policy-title,
  .kitten-detail-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html.em-on .em-arm,
  html.em-on .em-arm.em-out,
  html.em-on .em-arm.em-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

@media print {
  .deals-title,
  .policy-title,
  .kitten-detail-title { animation: none !important; }
  html.em-on .em-arm { opacity: 1 !important; transform: none !important; }
}