/* ============================================================
   animation.css
   汎用スクロールアニメーション定義

   使い方：
     HTML要素に  class="wow <アニメクラス>"  を付与するだけ。
     WOW.jsがスクロールで .animated を追加し、アニメーションが発火する。

     タイミング調整：
       data-wow-delay="0.2s"     発火までの遅延
       data-wow-duration="0.8s"  アニメーション時間（デフォルト1s）
       data-wow-offset="100"     ビューポート下端からのpx（デフォルトは共通設定）

   例：
     <div class="wow anim-fade-up" data-wow-delay="0.1s">...</div>
     <p  class="wow anim-fade-in" data-wow-duration="1.2s">...</p>
   ============================================================ */


/* ============================================================
   共通：発火前はすべて不可視
   ============================================================ */
.wow {
    visibility: hidden;   /* WOW.js が .animated 付与時に visible に戻す */
}


/* ============================================================
   フェード系
   ============================================================ */

/* フェードアップ（下→上・フェードイン） */
.anim-fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.anim-fade-up.animated {
    opacity: 1;
    transform: translateY(0);
}

/* フェードダウン（上→下・フェードイン） */
.anim-fade-down {
    opacity: 0;
    transform: translateY(-32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.anim-fade-down.animated {
    opacity: 1;
    transform: translateY(0);
}

/* フェードイン（位置変化なし） */
.anim-fade-in {
    opacity: 0;
    transition: opacity 1s ease;
}
.anim-fade-in.animated {
    opacity: 1;
}

/* 左からフェード */
.anim-fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.anim-fade-left.animated {
    opacity: 1;
    transform: translateX(0);
}

/* 右からフェード */
.anim-fade-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.anim-fade-right.animated {
    opacity: 1;
    transform: translateX(0);
}


/* ============================================================
   スライド系（フェードなし・位置移動のみ）
   ============================================================ */

/* 下からスライドアップ */
.anim-slide-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-slide-up.animated {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   ズーム系
   ============================================================ */

/* ズームイン */
.anim-zoom-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.anim-zoom-in.animated {
    opacity: 1;
    transform: scale(1);
}


/* ============================================================
   スタガー（連続要素の順番ずらし）
   親に .anim-stagger を付け、子が順番にフェードアップ

   例：
     <ul class="anim-stagger">
       <li class="wow anim-fade-up">...</li>
       <li class="wow anim-fade-up">...</li>
     </ul>
   ============================================================ */
.anim-stagger .wow:nth-child(1) { transition-delay: 0s;    }
.anim-stagger .wow:nth-child(2) { transition-delay: 0.1s;  }
.anim-stagger .wow:nth-child(3) { transition-delay: 0.2s;  }
.anim-stagger .wow:nth-child(4) { transition-delay: 0.3s;  }
.anim-stagger .wow:nth-child(5) { transition-delay: 0.4s;  }
.anim-stagger .wow:nth-child(6) { transition-delay: 0.5s;  }


/* ============================================================
   タイプライター
   .typewriter-wow は common.js の initTypewriterWOW() が制御
   ============================================================ */
.typewriter-wow {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.typewriter-wow.animated {
    opacity: 1;
}


/* ============================================================
   タイプライター（縦書き専用）
   writing-mode: vertical-rl の要素では ::after が最終文字の
   「下」に来るため、横線でカーソルを表現する。
   .typewriter-wow と組み合わせて使用。common.js が制御。

   例：
     <span class="mv__title-ja wow typewriter-wow" data-wow-offset="0">テキスト</span>
   ============================================================ */
@keyframes typewriterCursorH {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
    .mv__title-ja.animated:not(.typewriter-done)::after,
    .mv__title-en.animated:not(.typewriter-done)::after {
        animation: none !important;
        opacity: 1 !important;
    }
}


/* ============================================================
   reduced-motion：モーション無効設定ユーザー向け
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .wow {
        visibility: visible !important;
    }
    [class*="anim-"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}