/*
  reveal.css
  Hero起動時／スクロール出現アニメーション。

  ・[data-reveal] は常に「表示済み」がCSS上の既定値。JS(js/reveal.js)が動作した場合のみ
    .reveal-hidden を付与していったん隠し、要素がビューポートに入ったタイミングで取り除く。
    → JSが読み込まれない/エラーになっても要素は最初から見えるため、コンテンツが消えたままになることはない。
  ・prefers-reduced-motion: reduce のユーザーには一切アニメーションさせない（JS側でも動作させない）。
  ・opacity と transform のみを使用し、レイアウトに影響するプロパティは変更しない（CLSへの影響なし）。
*/

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transition: opacity var(--reveal-duration) var(--reveal-ease),
      transform var(--reveal-duration) var(--reveal-ease);
  }

  [data-reveal].reveal-hidden {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }

  [data-reveal-delay="1"] {
    transition-delay: calc(var(--reveal-stagger) * 1);
  }

  [data-reveal-delay="2"] {
    transition-delay: calc(var(--reveal-stagger) * 2);
  }

  [data-reveal-delay="3"] {
    transition-delay: calc(var(--reveal-stagger) * 3);
  }

  [data-reveal-delay="4"] {
    transition-delay: calc(var(--reveal-stagger) * 4);
  }
}