/**
 * スクロール連動アニメーション（プラグイン非依存・テーマ内蔵）
 *
 * ブロックエディタの「追加CSSクラス」に以下のクラスを付けるだけで動作します。
 *   animated + 効果クラス（fadeIn / fadeInUp / fadeInDown / fadeInLeft / fadeInRight）
 *   必要なら遅延クラス（delay-100ms / delay-200ms / delay-300ms / delay-500ms）を追加
 * 例: animated fadeInDown delay-200ms
 *
 * 発火の判定は js/scroll-animation.js（IntersectionObserver）が行い、
 * 要素が画面内に入ると is-inview クラスを付与する。
 */

.animated {
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

/* JS発火前は非表示。JS無効時はfunctions.phpのnoscriptで強制的に表示する */
.animated:not(.is-inview) {
    opacity: 0;
}

.animated.is-inview.fadeIn {
    animation-name: tf-fadeIn;
}

.animated.is-inview.fadeInUp {
    animation-name: tf-fadeInUp;
}

.animated.is-inview.fadeInDown {
    animation-name: tf-fadeInDown;
}

.animated.is-inview.fadeInLeft {
    animation-name: tf-fadeInLeft;
}

.animated.is-inview.fadeInRight {
    animation-name: tf-fadeInRight;
}

.animated.delay-100ms { animation-delay: 0.1s; }
.animated.delay-200ms { animation-delay: 0.2s; }
.animated.delay-300ms { animation-delay: 0.3s; }
.animated.delay-500ms { animation-delay: 0.5s; }

/*
 * OSの「アニメーション効果」設定(prefers-reduced-motion)に関わらず、
 * ここで使っているのは明滅・回転・急な拡大縮小のない単純なフェードのみのため、
 * 意図的に無効化せず常時再生する。
 */

@keyframes tf-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tf-fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tf-fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tf-fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes tf-fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}