/* ========== 基本アニメーション（初期状態のみ定義） ========== */

/* フェード系 */
.anim-fade-in {
    opacity: 0;
}

.anim-fade-out {
    opacity: 1;
}

/* スライドイン系 */
.anim-slide-left {
    transform: translateX(-100px);
    opacity: 0;
}

.anim-slide-right {
    transform: translateX(100px);
    opacity: 0;
}

.anim-slide-up {
    transform: translateY(50px);
    opacity: 0;
}

.anim-slide-down {
    transform: translateY(-50px);
    opacity: 0;
}

/* スケール系 */
.anim-scale-in {
    transform: scale(0.8);
    opacity: 0;
}

.anim-scale-out {
    transform: scale(1.2);
    opacity: 0;
}

/* 回転系 */
.anim-rotate-in {
    transform: rotate(-10deg) scale(0.9);
    opacity: 0;
}

/* 複合アニメーション */
.anim-slide-scale {
    transform: translateX(50px) translateY(50px) scale(0.90);
    opacity: 0;
}

/* ========== JavaScript制御用クラス（空のまま） ========== */

/* 遅延制御用 - JavaScript側で使用 */
.anim-delay-100,
.anim-delay-200,
.anim-delay-300,
.anim-delay-400,
.anim-delay-500 {
    /* JavaScript制御のため空 */
}

/* スピード制御用 - JavaScript側で使用 */
.anim-fast,
.anim-slow {
    /* JavaScript制御のため空 */
}

/* イージング制御用 - JavaScript側で使用 */
.anim-ease-in,
.anim-ease-out,
.anim-ease-inout,
.anim-ease-bounce,
.anim-ease-elastic,
.anim-ease-back,
.anim-ease-smooth,
.anim-ease-sharp,
.anim-ease-circ,
.anim-ease-expo,
.anim-ease-expo-out {
    /* JavaScript制御用のため空 */
}



/* ========== 追加のアニメーションタイプ ========== */

/* 新しいアニメーションパターンを追加したい場合の例 */

/* 3D回転系 */
.anim-flip-x {
    transform: rotateX(-90deg);
    opacity: 0;
}

.anim-flip-y {
    transform: rotateY(-90deg);
    opacity: 0;
}

/* ブラー効果付き */
.anim-blur-in {
    filter: blur(10px);
    opacity: 0;
}

/* 組み合わせ例 */
.anim-zoom-rotate {
    transform: scale(0.5) rotate(180deg);
    opacity: 0;
}

/* ========== レスポンシブ対応 ========== */

/* モバイルでは控えめなアニメーション */
@media (max-width: 768px) {
    .anim-slide-left {
        transform: translateX(-50px);
        opacity: 0;
    }

    .anim-slide-right {
        transform: translateX(50px);
        opacity: 0;
    }

    .anim-slide-up {
        transform: translateY(30px);
        opacity: 0;
    }

    .anim-slide-down {
        transform: translateY(-30px);
        opacity: 0;
    }

    .anim-scale-in {
        transform: scale(0.9);
        opacity: 0;
    }

    .anim-rotate-in {
        transform: rotate(-5deg) scale(0.95);
        opacity: 0;
    }
}

/* 動きを減らす設定がONの場合 */
@media (prefers-reduced-motion: reduce) {

    .anim-slide-left,
    .anim-slide-right,
    .anim-slide-up,
    .anim-slide-down {
        transform: none;
        opacity: 0;
    }

    .anim-scale-in,
    .anim-scale-out {
        transform: none;
        opacity: 0;
    }

    .anim-rotate-in {
        transform: none;
        opacity: 0;
    }

    .anim-slide-scale {
        transform: none;
        opacity: 0;
    }
}

/* ========== ユーティリティクラス ========== */

/* アニメーション無効化 */
.anim-disabled {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* アニメーション表示完了状態 */
.anim-complete {
    opacity: 1;
    transform: none;
    filter: none;
}