/* ---------- 預設參數：可在 :root 或任何區塊上覆寫 ---------- */
:root {
  --anim-duration: 800ms;
  --anim-stagger: 120ms;
  --anim-delay: 0ms;
  --anim-distance: 20px;
  --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 動畫前（隱藏狀態） ---------- */
.js [data-anim-item] {
  --anim-x: 0px;
  --anim-y: var(--anim-distance);
  --anim-scale: 1;

  opacity: 0;
  transform: translate3d(var(--anim-x), var(--anim-y), 0) scale(var(--anim-scale));
  transition: opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay);
  will-change: opacity, transform;
}

/* ---------- 動畫後（顯示狀態） ----------
   .is-inview 由 JS 加在 [data-anim] 容器上；
   若容器本身就是項目，也支援直接加在自己身上。 */
.js [data-anim].is-inview [data-anim-item],
.js [data-anim-item].is-inview {
  --anim-x: 0px;
  --anim-y: 0px;
  --anim-scale: 1;

  opacity: 1;
  transition-delay: calc(var(--anim-delay) + var(--i, 0) * var(--anim-stagger));
}

/* ============================================================
   變化型
   ============================================================ */
.js [data-anim-item="up"] {
  --anim-y: var(--anim-distance);
}

.js [data-anim-item="down"] {
  --anim-y: calc(var(--anim-distance) * -1);
}

.js [data-anim-item="left"] {
  --anim-x: calc(var(--anim-distance) * -1.4);
  --anim-y: 0px;
}

.js [data-anim-item="right"] {
  --anim-x: calc(var(--anim-distance) * 1.4);
  --anim-y: 0px;
}

.js [data-anim-item="fade"] {
  --anim-y: 0px;
}

.js [data-anim-item="zoom"] {
  --anim-y: 0px;
  --anim-scale: 0.94;
}

.js [data-anim-item="zoom-out"] {
  --anim-y: 0px;
  --anim-scale: 1.06;
}

/* 模糊淡入：filter 另外處理，避免所有元素都背 filter 成本 */
.js [data-anim-item="blur"] {
  --anim-y: 0px;
  filter: blur(10px);
  transition: opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease),
    filter var(--anim-duration) var(--anim-ease);
}

.js [data-anim].is-inview [data-anim-item="blur"],
.js [data-anim-item="blur"].is-inview {
  filter: blur(0);
}

/* 遮罩橫向展開：適合標題、圖片、線條 */
.js [data-anim-item="mask"] {
  --anim-y: 0px;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
}

.js [data-anim].is-inview [data-anim-item="mask"],
.js [data-anim-item="mask"].is-inview {
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   無障礙：使用者要求減少動態時，全部直接顯示
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim-item] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}