/*
 * koto-animation.css — KOTO WORKS 共通スクロールアニメーション
 *
 * 使い方:
 *   アニメーション対象要素に以下のクラスを付与する
 *   koto-fade-up / koto-fade-left / koto-fade-right / koto-fade-scale
 *
 * 速度:  koto-duration-fast / koto-duration-normal / koto-duration-slow
 * 遅延:  koto-delay-1 / koto-delay-2 / koto-delay-3 / koto-delay-4
 *
 * 依存: koto-animation.js が html 要素に .koto-js を付与している前提
 *       JS無効環境では .koto-js が存在しないため、要素は常時表示される
 */

/* ================================================================
   CSS カスタムプロパティ（既定値）
   要素ごとに上書き可能
   ================================================================ */
:root {
    --koto-anim-duration : 0.6s;
    --koto-anim-delay    : 0s;
    --koto-anim-easing   : cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --koto-anim-distance : 24px;
    --koto-anim-scale    : 0.97;
}

/* ================================================================
   速度クラス — 要素ごとに --koto-anim-duration を上書き
   ================================================================ */
.koto-duration-fast   { --koto-anim-duration: 0.4s; }
.koto-duration-normal { --koto-anim-duration: 0.6s; }
.koto-duration-slow   { --koto-anim-duration: 0.9s; }

/* ================================================================
   遅延クラス — 要素ごとに --koto-anim-delay を上書き
   ================================================================ */
.koto-delay-1 { --koto-anim-delay: 0.15s; }
.koto-delay-2 { --koto-anim-delay: 0.30s; }
.koto-delay-3 { --koto-anim-delay: 0.45s; }
.koto-delay-4 { --koto-anim-delay: 0.60s; }

/* ================================================================
   初期状態（.koto-js が html に存在する場合のみ非表示にする）
   FOUC対策: JS が koto-js を html に付与した後、この CSS で隠す
   JS無効時は .koto-js が存在しないため常時表示
   ================================================================ */
.koto-js .koto-fade-up,
.koto-js .koto-fade-left,
.koto-js .koto-fade-right,
.koto-js .koto-fade-scale {
    opacity: 0;
    transition:
        opacity   var(--koto-anim-duration) var(--koto-anim-easing) var(--koto-anim-delay),
        transform var(--koto-anim-duration) var(--koto-anim-easing) var(--koto-anim-delay);
}

/* ================================================================
   各アニメーションの初期 transform
   ================================================================ */
.koto-js .koto-fade-up {
    transform: translateY(var(--koto-anim-distance));
}
.koto-js .koto-fade-left {
    transform: translateX(calc(-1 * var(--koto-anim-distance)));
}
.koto-js .koto-fade-right {
    transform: translateX(var(--koto-anim-distance));
}
.koto-js .koto-fade-scale {
    transform: scale(var(--koto-anim-scale));
}

/* ================================================================
   表示状態 — Intersection Observer が付与するクラス
   ================================================================ */
.koto-js .koto-is-visible {
    opacity: 1;
    transform: none;
}

/* ================================================================
   横方向アニメーションによる横スクロール防止
   translateX による視覚的なはみ出しを含むページでは
   html または body に overflow-x: hidden が推奨されます。
   本ライブラリは小さい移動量（24px）を使用しているため、
   多くのテーマではデフォルトの overflow-x 制御で問題ありません。
   ================================================================ */

/* ================================================================
   prefers-reduced-motion 対応
   アニメーション無効設定時は即時表示・トランジションなし
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .koto-js .koto-fade-up,
    .koto-js .koto-fade-left,
    .koto-js .koto-fade-right,
    .koto-js .koto-fade-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}