/* motion.css — 捲動節奏相關過渡與動畫定義，Mobile First */

/* ════════════════════════════════════════════════════════════
 * 1. 進場前隱藏（需要 .zzl-js，由 motion-bootstrap.php 控制）
 * ════════════════════════════════════════════════════════════ */
.zzl-js [data-zzl-unit]:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
}

/* ════════════════════════════════════════════════════════════
 * 2. 進場過渡（transition: all 禁用，只宣告需要的屬性）
 * ════════════════════════════════════════════════════════════ */
[data-zzl-unit] {
  transition:
    opacity 600ms ease,
    transform 600ms ease;
}

/* ════════════════════════════════════════════════════════════
 * 3. Hero entry — CSS-only @keyframes（不依賴 IntersectionObserver）
 *    animation 優先級高於 transition，且覆蓋 :not(.is-visible) 規則
 * ════════════════════════════════════════════════════════════ */
@keyframes zzl-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.zzl-js .zzl-hero__content {
  animation: zzl-fade-up 800ms ease both;
}

/* ════════════════════════════════════════════════════════════
 * 4. Stagger delays（桌機橫排版型，手機版無錯開）
 * ════════════════════════════════════════════════════════════ */

/* Process steps：640px 以上橫排，第 2–4 步驟逐一錯開 */
@media (min-width: 640px) {
  .zzl-process__step[data-zzl-unit]:nth-child(2) { transition-delay: 100ms; }
  .zzl-process__step[data-zzl-unit]:nth-child(3) { transition-delay: 200ms; }
  .zzl-process__step[data-zzl-unit]:nth-child(4) { transition-delay: 300ms; }
}

/* Products：768px 以上橫排，第 2–3 個產品逐一錯開（<768px 為單欄不錯開） */
@media (min-width: 768px) {
  .zzl-product[data-zzl-unit]:nth-child(2) { transition-delay: 100ms; }
  .zzl-product[data-zzl-unit]:nth-child(3) { transition-delay: 200ms; }
}

/* ════════════════════════════════════════════════════════════
 * 5. Parallax（漸進增強，雙層保護）
 *    外層：prefers-reduced-motion: no-preference
 *    內層：@supports animation-timeline
 * ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes zzl-parallax-slow {
      from { transform: scale(1.12) translateY(-4%); }
      to   { transform: scale(1.12) translateY(4%);  }
    }

    /* Hero 背景 — sections.css 已有 overflow: hidden */
    .zzl-hero__img,
    .zzl-placeholder--hero {
      will-change: transform;
      animation: zzl-parallax-slow linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    /* Origin 圖片 */
    .zzl-origin__media {
      overflow: hidden;
    }

    .zzl-origin__media img,
    .zzl-origin__media .zzl-placeholder--origin {
      will-change: transform;
      animation: zzl-parallax-slow linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}