/*
 * animations.css
 * サイト全体のアニメーション定義
 *
 * 原則：
 *   - transform / opacity のみを変化させる（left/top/width は再レイアウトが起きて重い）
 *   - CSSアニメーションを主体とし、JS制御（animations.js）は最小限
 *   - progressive enhancement：JS 未ロード時はコンテンツが常に見える状態を維持
 */


/* ════════════════════════════════════════════════════════════════
   @keyframes 定義
   ════════════════════════════════════════════════════════════════ */

/* ── フェードイン ── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── フェードイン＋上から流れ込む ── */
@keyframes fadeInUp {
    from {
        opacity:   0;
        transform: translateY(16px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* ── ポン（フィルターボタン選択時のスケールバウンス）── */
@keyframes pop {
    0%   { transform: scale(0.94); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1);    }
}

/* ── 提灯のゆれ ─────────────────────────────────────────────────
   ぶら下がりものは transform-origin: top center を要素側で指定して使う。
   alternate 指定で右→左→右…と往復させる */
@keyframes lanternSwing {
    from { transform: rotate(-6deg); }
    to   { transform: rotate(6deg);  }
}

/* ── ぴょこん（ナビアイコンのホバー跳ね）──────────────────────────
   一度跳ねて着地する。終点は layout.css のホバー scale(1.15) に合わせる */
@keyframes pyokon {
    0%   { transform: translateY(0)    scale(1);    }
    35%  { transform: translateY(-6px) scale(1.25); }
    70%  { transform: translateY(1px)  scale(1.1);  }
    100% { transform: translateY(0)    scale(1.15); }
}

/* ── 紙吹雪（ヒーロー演出）───────────────────────────────────────
   上から降りながら回転。320px はヒーロー最大高（PC: 280px）を覆う値 */
@keyframes confettiFall {
    0%   { opacity: 0; transform: translateY(-20px) rotate(0deg); }
    8%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(320px) rotate(540deg); }
}

/* ── 太鼓の衝撃波リング（ドン！で円が広がって消える）── */
@keyframes taikoRing {
    0%   { opacity: 0;   transform: scale(0.3); }
    10%  { opacity: 0.9; }
    100% { opacity: 0;   transform: scale(1.9); }
}

/* ── ドンの鼓動（ヒーロー画像全体がかすかに脈打つ）────────────────
   taikoRing と同じ 2.4s 周期にして「ドン」を同期させる */
@keyframes taikoPulse {
    0%, 12%, 100% { transform: scale(1); }
    6%            { transform: scale(1.015); }
}

/* ── ロゴくすぐり（ホバーで小さく首を振る）── */
@keyframes logoWiggle {
    0%, 100% { transform: rotate(0deg);    }
    25%      { transform: rotate(-2.5deg); }
    75%      { transform: rotate(2.5deg);  }
}


/* ════════════════════════════════════════════════════════════════
   常時適用アニメーション（JS不要）
   ════════════════════════════════════════════════════════════════ */

/* ── TOPページ ヒーローテキスト：初回ふわっと表示 ─────────────────
   animation-fill-mode: both = delay 中も from 状態を維持 */
.home-hero__body {
    animation: fadeIn 0.8s ease 0.3s both;
}

/* ── フィルターボタン：選択時ポン ──────────────────────────────────
   filter.js が is-active クラスを付け替えるたびに発火する */
.filter__btn.is-active {
    animation: pop 0.22s ease;
}


/* ════════════════════════════════════════════════════════════════
   スクロール連動フェードイン（animations.js と連携）

   animations.js が .anim-ready を付けて初期状態（非表示）を適用し、
   IntersectionObserver で要素がビューポートに入ったら .is-visible を追加する。
   JS 未ロード時は .anim-ready が付かないため、コンテンツは常に表示される。
   ════════════════════════════════════════════════════════════════ */

/* 初期状態：JS が .anim-ready を付けた後にのみ適用 */
.anim-ready {
    opacity:    0;
    transform:  translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* 表示状態：JS が .is-visible を追加したときに遷移 */
.anim-ready.is-visible {
    opacity:   1;
    transform: translateY(0);
}

/* ── シーン想起バナー：偶数番目は右からスライドイン ───────────────
   .scene-banner の初期 transform を上書き（JS が .anim-ready を付けた後のみ有効）*/
.scene-banner.anim-ready {
    transform: translateX(-20px);
}

.scene-banner.anim-ready:nth-child(even) {
    transform: translateX(20px);
}

.scene-banner.anim-ready.is-visible {
    transform: translateX(0);
}


/* ════════════════════════════════════════════════════════════════
   アクセシビリティ：動きを減らす設定を尊重
   （OS のシステム設定で「視差効果を減らす」が ON の場合に適用）
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }
}