/**
 * Scroll Reveal Animations
 *
 * 兩套獨立動畫系統，互不影響：
 *
 * 【系統 A】data-reveal — 通用滾動進場（hero、section 等）
 *   html.js [data-reveal] 隱藏 → .revealed 顯示
 *   由 scroll-reveal.js 控制
 *
 * 【系統 B】flow-step — 步驟流程動畫
 *   .flow-step-hidden 隱藏 → .flow-step-visible 顯示
 *   由 flow-line.js 控制
 *
 * @package mytheme
 */

/* ==============================================
   系統 A：data-reveal 通用滾動進場
   ============================================== */

/* --- 初始隱藏（html.js 確保 JS 未載入時元素保持可見） --- */
html.js [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-reveal="fade-up"]:not([data-reveal-stagger]) {
  transform: translateY(30px);
}

html.js [data-reveal="fade-left"]:not([data-reveal-stagger]) {
  transform: translateX(-30px);
}

html.js [data-reveal="fade-right"]:not([data-reveal-stagger]) {
  transform: translateX(30px);
}

/* --- Stagger：父層不動畫，子元素交錯 --- */
html.js [data-reveal][data-reveal-stagger] {
  opacity: 1;
  transition: none;
}

html.js [data-reveal][data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

/* --- 觸發後狀態 --- */
html.js [data-reveal].revealed {
  opacity: 1;
  transform: none;
}

html.js [data-reveal][data-reveal-stagger] > .revealed {
  opacity: 1;
  transform: none;
}

/* ==============================================
   系統 B：flow-step 步驟流程動畫（flow-line.js）
   ============================================== */

.flow-step-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.flow-step-visible {
  opacity: 1;
  transform: none;
}

/* ==============================================
   Reduced Motion
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal][data-reveal-stagger] > *,
  .flow-step-hidden {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==============================================
   手機版 (480px)
   ============================================== */

@media (max-width: 480px) {
  html.js [data-reveal] {
    transition-duration: 0.4s;
  }

  html.js [data-reveal="fade-up"]:not([data-reveal-stagger]) {
    transform: none;
  }

  html.js [data-reveal="fade-left"]:not([data-reveal-stagger]) {
    transform: translateX(-20px);
  }

  html.js [data-reveal="fade-right"]:not([data-reveal-stagger]) {
    transform: translateX(20px);
  }

  html.js [data-reveal][data-reveal-stagger] > * {
    transform: translateY(20px);
  }

  .flow-step-hidden {
    transition-duration: 0.4s;
    transform: translateY(20px);
  }

  /*
   * 手機版限定：HERO 之後的第一個 section 跳過進場動畫
   * 避免一進頁面看到位移再回正，桌機版不受影響
   */
  html.js .page-hero + section[data-reveal],
  html.js .page-hero + .page-heading + section[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}