/*
 * ScrollEffects.css
 * スクロールアニメーションシステム
 * ==============================
 * 
 * 目次:
 * 1. CSS変数 (アニメーション設定値)
 * 2. 基本アニメーション (上下左右・フェード・スケール)
 * 3. 拡張設定クラス (速度・遅延・原点)
 * 4. イージングパターン (基本5種類 + カスタム1種類)
 * 5. アニメーション制御 (停止・アクセシビリティ)
 */

/* ==============================
   1. CSS変数 - アニメーション設定値
   ============================== */

:root {
	/* イージング変数定義 */
	/* 基本イージング */
	--ease-linear: linear;
	--ease-in: ease-in;
	--ease-out: ease-out;
	--ease-in-out: ease-in-out;
	--ease-smooth: cubic-bezier(0.33, 0.01, 0.02, 0.98);

	/* linear()関数 バウンス ポンポンポンポン */
	--ease-bounce-out: linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1, 0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1);

	/* linear()関数 ぼよんぼよん */
	--ease-elastic-out: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);

	/* アニメーション制御変数 */
	--animation-duration: 1s;
	--animation-delay: 0s;
	--animation-disabled-duration: 0s;
	--animation-disabled-delay: 0s;

	/* アニメーション速度バリエーション */
	--animation-faster: 0.3s;
	--animation-fast: 0.5s;
	--animation-normal: 1s;
	--animation-slow: 1.5s;
	--animation-slower: 2s;
	--animation-very-slow: 3s;

	/* transform-origin バリエーション : デフォルトだとcenter center */
	--origin-center: center center;
	--origin-top: top center;
	--origin-bottom: bottom center;
	--origin-left: center left;
	--origin-right: center right;
	--origin-top-left: top left;
	--origin-top-right: top right;
	--origin-bottom-left: bottom left;
	--origin-bottom-right: bottom right;
}

/* ==============================
   2. 基本アニメーション - コアエフェクト
   ============================== */

/* 2.1 上下移動アニメーション */

/* mm-scroll_up 下から上へ出現 */
.mm-scroll_up  {
	opacity: 0;
	transform: translateY(100px);
	transition: var(--animation-duration) var(--ease-smooth);
}

.mm-scroll_up.active {
	opacity: 1.0;
	transform: translateY(0);
}

/* 2.2 左右移動アニメーション */

/* mm-slide_toLeft 右から左へ出現 */
.mm-slide_toLeft {
	opacity: 0;
	transform: translateX(100px);
	transition: var(--animation-duration) var(--ease-smooth);
}

.mm-slide_toLeft.active {
	opacity: 1.0;
	transform: translateX(0);
}

/* mm-slide_toRight 左から右へ出現 */
.mm-slide_toRight {
	opacity: 0;
	transform: translateX(-100px);
	transition: var(--animation-duration) var(--ease-smooth);
}

.mm-slide_toRight.active {
	opacity: 1.0;
	transform: translateX(0);
}

/* 2.3 特殊エフェクト */

/* mm-fade_in ブラーからクリアへ */
.mm-fade_in {
	filter: blur(10px);
	opacity: 0;
	transition: var(--animation-duration) var(--ease-smooth);
}

.mm-fade_in.active {
	filter: blur(0);
	opacity: 1.0;
}

/* 2.4 スケールアニメーション */

/* mm-scale_down 縮小から通常サイズ */
.mm-scale_down {
	scale: 1.3;
	opacity: 0;
	transform-origin: var(--origin-center);
	transition: var(--animation-duration) var(--ease-in-out);
}

.mm-scale_down.active {
	scale: 1.0;
	opacity: 1.0;
}

/* mm-scale_bounce バウンス付きスケール */
.mm-scale_bounce {
	scale: 1.3;
	opacity: 0;
	transform-origin: var(--origin-center);
	transition: var(--animation-duration) var(--ease-bounce-out);
}

.mm-scale_bounce.active {
	scale: 1.0;
	opacity: 1.0;
}

/* 2.5 傾きアニメーション */
/* mm-tilt 傾きながら出現 */
.mm-tilt_right {
	opacity: 0;
	transform: rotateZ(15deg);
	transition: var(--animation-duration) var(--ease-smooth);
}

.mm-tilt_right.active {
	opacity: 1.0;
	transform: rotateZ(0deg);
}

.mm-tilt_left {
	opacity: 0;
	transform: rotateZ(-15deg);
	transition: var(--animation-duration) var(--ease-smooth);
}

.mm-tilt_left.active {
	opacity: 1.0;
	transform: rotateZ(0deg);
}

/* ==============================
   3. 拡張設定クラス - カスタマイズオプション
   ============================== */

/* 3.1 transform-origin 設定 */
/* アニメーションの起点を指定 */
.mm-origin-center {
	transform-origin: var(--origin-center);
}

.mm-origin-top {
	transform-origin: var(--origin-top);
}

.mm-origin-bottom {
	transform-origin: var(--origin-bottom);
}

.mm-origin-left {
	transform-origin: var(--origin-left);
}

.mm-origin-right {
	transform-origin: var(--origin-right);
}

.mm-origin-top-left {
	transform-origin: var(--origin-top-left);
}

.mm-origin-top-right {
	transform-origin: var(--origin-top-right);
}

.mm-origin-bottom-left {
	transform-origin: var(--origin-bottom-left);
}

.mm-origin-bottom-right {
	transform-origin: var(--origin-bottom-right);
}

/* 3.2 アニメーション速度 - 4段階設定 */
/* 使用例: <div class="mm-scroll_up mm-anim-fast">高速アニメーション</div> */
.mm-anim-fast {
	transition-duration: var(--animation-fast);
}

.mm-anim-normal {
	transition-duration: var(--animation-normal);
}

.mm-anim-slow {
	transition-duration: var(--animation-slow);
}

.mm-anim-very-slow {
	transition-duration: var(--animation-very-slow);
}

/* 3.3 アニメーション遅延 - タイミング調整 */
/* 使用例: <div class="mm-scroll_up mm-delay03s">0.3秒後に開始</div> */
.mm-delay02s {
	transition-delay: 0.2s;
}

.mm-delay03s {
	transition-delay: 0.3s;
}

.mm-delay04s {
	transition-delay: 0.4s;
}

.mm-delay06s {
	transition-delay: 0.6s;
}

.mm-delay08s {
	transition-delay: 0.8s;
}

.mm-delay10s {
	transition-delay: 1.0s;
}

.mm-delay12s {
	transition-delay: 1.2s;
}

.mm-delay14s {
	transition-delay: 1.4s;
}

/* ==============================
   4. イージングパターン - 基本5種類 + カスタムビヨンビヨン
   ============================== */

/* 4.1 基本イージング - 基礎的な動き */
/* 使用例: <div class="mm-scroll_up mm-ease-smooth">スムーズな動き</div> */
.mm-ease-linear,
.mm-ease-linear * {
	transition-timing-function: var(--ease-linear);
}

.mm-ease-in,
.mm-ease-in * {
	transition-timing-function: var(--ease-in);
}

.mm-ease-out,
.mm-ease-out * {
	transition-timing-function: var(--ease-out);
}

.mm-ease-in-out,
.mm-ease-in-out * {
	transition-timing-function: var(--ease-in-out);
}

.mm-ease-smooth,
.mm-ease-smooth * {
	transition-timing-function: var(--ease-smooth);
}

/* 4.2 バウンス系 - 跳ねるような動き（終端のみ） */
.mm-ease-bounce-out,
.mm-ease-bounce-out * {
	transition-timing-function: var(--ease-bounce-out);
}

/*4.3 エラスティック系 - ゴムのような弾み（終端のみ） */
.mm-ease-elastic-out,
.mm-ease-elastic-out * {
	transition-timing-function: var(--ease-elastic-out);
}

/* ==============================
   5. アニメーション制御 - 停止とアクセシビリティ
   ============================== */

/* 5.1 アニメーション完全停止 */
/* デバッグやパフォーマンス最適化に使用 */
/* 全デバイス共通停止 */
/* 使用例: <body class="no-anim"> 全アニメーション停止 */
.mm-no-anim,
.mm-no-anim *,
.mm-no-anim *::before,
.mm-no-anim *::after {
	transition-delay: 0s !important;
	transition-duration: 0s !important;
	animation-delay: 0s !important;
	animation-duration: 0s !important;
}

/* PC専用停止（769px以上） */
/* 使用例: <body class="no-anim-pc"> PCのみアニメーション停止 */
@media screen and (min-width: 769px) {
	.mm-no-anim-pc,
	.mm-no-anim-pc *,
	.mm-no-anim-pc *::before,
	.mm-no-anim-pc *::after {
		transition-delay: 0s !important;
		transition-duration: 0s !important;
		animation-delay: 0s !important;
		animation-duration: 0s !important;
	}
}

/* スマホ専用停止（768px以下） */
/* 使用例: <body class="no-anim-sp"> スマホのみアニメーション停止 */
@media screen and (max-width: 768px) {
	.mm-no-anim-sp,
	.mm-no-anim-sp *,
	.mm-no-anim-sp *::before,
	.mm-no-anim-sp *::after {
		transition-delay: 0s !important;
		transition-duration: 0s !important;
		animation-delay: 0s !important;
		animation-duration: 0s !important;
	}
}

/* 5.2 アクセシビリティ対応 */
/*
 * 前庭運動を引き起こすのを避けるため、アニメーションを控えめにする
 * OSの「動きを減らす」設定に対応
 *
 * OS設定場所:
 * - Windows 11: 設定 > アクセシビリティ > 視覚効果 > アニメーション効果
 * - macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制
 * - iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす
 * - Android 9+: 設定 > ユーザー補助 > アニメーションの削除
 */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		transition-delay: var(--animation-disabled-delay);
		transition-duration: var(--animation-disabled-duration);
		animation-delay: var(--animation-disabled-delay);
		animation-duration: var(--animation-disabled-duration);
	}
}