/* ============================================================
   wit テーマ : 共通アニメーション
   ------------------------------------------------------------
   使い方:
     クラス名を要素に付けるだけで、ビューポートに入った瞬間に
     発火する。JS (common.js) が IntersectionObserver で
     監視し、対象に .is-in を付与する。
     一度発火したらリプレイしない。

   提供クラス:
     .wit-fade-up         下からふわっと出現 (デフォルト = スクロール発火)
     .wit-fade-left       右から左へふわっと出現
     .wit-fade-right      左から右へふわっと出現
     .wit-on-load         発火タイミングを「ページ読み込み直後」に変更
                          (FV 内の要素など、最初から画面内にあるものに付ける)
     .wit-delay-1 ... 5   遅延 (順次表示用、各アニメクラスと併用)

   使用例:
     <h2 class="wit-fade-up">スクロールで下から出現</h2>
     <p  class="wit-fade-left">スクロールで右から左へ出現</p>
     <h1 class="wit-fade-up wit-on-load">読み込み直後に出現 (FV用)</h1>
     <li class="wit-fade-left wit-delay-2">右からふわっと + 遅延 .2s</li>

   prefers-reduced-motion: reduce の環境では即時表示に切り替え。
   ============================================================ */

/* ── 下からふわっと出現 ── */
.wit-fade-up {
    opacity: 0;
    /* translate3d で確実に GPU レイヤー化（カクツキ防止）。
       translateY と見た目は同じだが、ブラウザにレイヤー昇格を明示できる。 */
    transform: translate3d(0, 40px, 0);
    transition:
        opacity 2.2s cubic-bezier(.2, .7, .2, 1),
        transform 1.8s cubic-bezier(.2, .7, .2, 1);
    /* will-change はあえて初期で指定しない。
       1ページに大量の対象があると、全要素が常時 GPU レイヤーを保持して
       スクロールがガタつく原因になる。
       → JS が「これから観察する直前」に .is-armed を付与、
         「アニメ完了後」に .is-done を付与して解放する。 */
}
.wit-fade-up.is-armed {
    will-change: opacity, transform;
}
.wit-fade-up.is-in {
    opacity: 1;
    transform: none;
}
.wit-fade-up.is-done {
    /* アニメ完了後は GPU レイヤー保持を解除（メモリ・スクロール負荷を下げる） */
    will-change: auto;
}

/* ── 右から左へふわっと出現 ── */
.wit-fade-left {
    opacity: 0;
    /* 初期位置: 右に 40px ずれている → 左へスライドしてくる */
    transform: translate3d(40px, 0, 0);
    transition:
        opacity 2.2s cubic-bezier(.2, .7, .2, 1),
        transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.wit-fade-left.is-armed {
    will-change: opacity, transform;
}
.wit-fade-left.is-in {
    opacity: 1;
    transform: none;
}
.wit-fade-left.is-done {
    will-change: auto;
}

/* ── 左から右へふわっと出現 ── */
.wit-fade-right {
    opacity: 0;
    /* 初期位置: 左に 40px ずれている → 右へスライドしてくる */
    transform: translate3d(-40px, 0, 0);
    transition:
        opacity 2.2s cubic-bezier(.2, .7, .2, 1),
        transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.wit-fade-right.is-armed {
    will-change: opacity, transform;
}
.wit-fade-right.is-in {
    opacity: 1;
    transform: none;
}
.wit-fade-right.is-done {
    will-change: auto;
}

/* ── 遅延 (連続要素を順に出すための補助) ──
   親要素に wit-fade-up + wit-delay-N を併記して使う。例:
     <div class="wit-fade-up">親</div>
     <div class="wit-fade-up wit-delay-1">子1</div>
     <div class="wit-fade-up wit-delay-2">子2</div> */
.wit-delay-1 { transition-delay: .1s; }
.wit-delay-2 { transition-delay: .2s; }
.wit-delay-3 { transition-delay: .3s; }
.wit-delay-4 { transition-delay: .4s; }
.wit-delay-5 { transition-delay: .5s; }

/* ── アクセシビリティ: モーション抑制を希望するユーザー向け ──
   OS 設定で「視差効果を減らす」等を有効にしている場合、
   アニメをスキップして即時表示にする (WCAG 2.3.3 推奨)。 */
@media (prefers-reduced-motion: reduce) {
    .wit-fade-up,
    .wit-fade-left,
    .wit-fade-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}