/* =========================================================
   animations.css — スクロール出現アニメ定義
   ========================================================= */

/* 初期状態 */
[data-animate] {
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
[data-animate="fade-up"] { transform: translateY(20px); }
[data-animate="fade-in"] { transform: none; }

/* 表示状態 */
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* stagger：親は即表示、子を順次表示 */
[data-animate="stagger"] {
  opacity: 1;
}
[data-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-animate="stagger"] > *.is-visible {
  opacity: 1;
  transform: none;
}

/* ライン装飾（タイトル下線などの描画） */
.u-line-draw {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.u-line-draw.is-visible { transform: scaleX(1); }

/* reduced-motion では即時表示 */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}