/* =========================================================
   [w3] Blocks Animation 移動距離ユーティリティ
   ---------------------------------------------------------
   ■ 依存プラグイン（必須）
     「Blocks Animation: CSS Animations for Gutenberg Blocks」
     （ThemeIsle / ハンドル: otter-animation / クラス: .animated + fadeInUp 等）
     プラグイン未導入・無効時はこのCSSだけではアニメしません。

   ■ 読み込み順（重要）
     プラグインの index.css より後に読み込むこと。
     同名 @keyframes は後勝ちのため、先に読むと距離上書きが無効になる。
     子テーマでは functions.php から otter-animation 依存で enqueue する。

   ■ 他サイトへ流用
     1. このファイル（w3-blocks-animation-move.css）をコピー
     2. 子テーマ等で otter-animation の後に enqueue
        例: wp_enqueue_style( 'w3-blocks-animation-move', ..., array( 'otter-animation' ), ... );

   ■ 使い方（管理画面）
     1. ブロックで Animations →「上へフェードイン」等を設定
     2. 同じブロックの「追加CSSクラス」に距離クラスを付与
        例: w3-move-20px
        例: w3-move-pc-40px w3-move-sp-20px
     3. ブレイクポイントは SWELL 準拠（960px）

   ■ 距離クラス
     共通: w3-move-10px / 20px / … / 100px（10px刻み）
     PCのみ上書き: w3-move-pc-10px … 100px
     SPのみ上書き: w3-move-sp-10px … 100px
     （未指定時のデフォルト移動距離: 30px）
   ========================================================= */

/* デフォルト距離（クラス未指定時） */
.animated {
	--w3-move-y: 30px;
	--w3-move-x: 30px;
}

/*
  プラグイン標準の fadeIn* は translate が 100% 固定のため上書き。
  CSS変数を参照させ、下のユーティリティクラスで距離を切り替える。
*/
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, var(--w3-move-y, 30px), 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--w3-move-y, 30px)), 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--w3-move-x, 30px)), 0, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(var(--w3-move-x, 30px), 0, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- 共通距離 --- */
.w3-move-10px {
	--w3-move-y: 10px;
	--w3-move-x: 10px;
}

.w3-move-20px {
	--w3-move-y: 20px;
	--w3-move-x: 20px;
}

.w3-move-30px {
	--w3-move-y: 30px;
	--w3-move-x: 30px;
}

.w3-move-40px {
	--w3-move-y: 40px;
	--w3-move-x: 40px;
}

.w3-move-50px {
	--w3-move-y: 50px;
	--w3-move-x: 50px;
}

.w3-move-60px {
	--w3-move-y: 60px;
	--w3-move-x: 60px;
}

.w3-move-70px {
	--w3-move-y: 70px;
	--w3-move-x: 70px;
}

.w3-move-80px {
	--w3-move-y: 80px;
	--w3-move-x: 80px;
}

.w3-move-90px {
	--w3-move-y: 90px;
	--w3-move-x: 90px;
}

.w3-move-100px {
	--w3-move-y: 100px;
	--w3-move-x: 100px;
}

/* --- PC（960px以上） --- */
@media (min-width: 960px) {
	.w3-move-pc-10px {
		--w3-move-y: 10px;
		--w3-move-x: 10px;
	}

	.w3-move-pc-20px {
		--w3-move-y: 20px;
		--w3-move-x: 20px;
	}

	.w3-move-pc-30px {
		--w3-move-y: 30px;
		--w3-move-x: 30px;
	}

	.w3-move-pc-40px {
		--w3-move-y: 40px;
		--w3-move-x: 40px;
	}

	.w3-move-pc-50px {
		--w3-move-y: 50px;
		--w3-move-x: 50px;
	}

	.w3-move-pc-60px {
		--w3-move-y: 60px;
		--w3-move-x: 60px;
	}

	.w3-move-pc-70px {
		--w3-move-y: 70px;
		--w3-move-x: 70px;
	}

	.w3-move-pc-80px {
		--w3-move-y: 80px;
		--w3-move-x: 80px;
	}

	.w3-move-pc-90px {
		--w3-move-y: 90px;
		--w3-move-x: 90px;
	}

	.w3-move-pc-100px {
		--w3-move-y: 100px;
		--w3-move-x: 100px;
	}
}

/* --- SP（959px以下 / タブレット含む） --- */
@media (max-width: 959px) {
	.w3-move-sp-10px {
		--w3-move-y: 10px;
		--w3-move-x: 10px;
	}

	.w3-move-sp-20px {
		--w3-move-y: 20px;
		--w3-move-x: 20px;
	}

	.w3-move-sp-30px {
		--w3-move-y: 30px;
		--w3-move-x: 30px;
	}

	.w3-move-sp-40px {
		--w3-move-y: 40px;
		--w3-move-x: 40px;
	}

	.w3-move-sp-50px {
		--w3-move-y: 50px;
		--w3-move-x: 50px;
	}

	.w3-move-sp-60px {
		--w3-move-y: 60px;
		--w3-move-x: 60px;
	}

	.w3-move-sp-70px {
		--w3-move-y: 70px;
		--w3-move-x: 70px;
	}

	.w3-move-sp-80px {
		--w3-move-y: 80px;
		--w3-move-x: 80px;
	}

	.w3-move-sp-90px {
		--w3-move-y: 90px;
		--w3-move-x: 90px;
	}

	.w3-move-sp-100px {
		--w3-move-y: 100px;
		--w3-move-x: 100px;
	}
}

/* === [w3] Blocks Animation 移動距離ユーティリティ ここまで === */