/**
 * css/foundation/motion.css
 * ============================================================
 * A LEGEND 2：Motion Foundation
 * ============================================================
 *
 * 役割：
 * - JS reveal / split-text / hero演出の土台CSSを定義します。
 * - motion.reveal.* / motion.split_text.* の設定キーは廃止済みです。
 * - prefers-reduced-motion や motion OFF 時に、必要に応じて動きを止めます。
 * - Lenis有効時にブラウザ標準の scroll-behavior: smooth と競合しないよう制御します。
 */

/* ============================================================
 * Reveal Animation
 * ============================================================
 *
 * data-aleg2-reveal を付けた要素は、初期状態では少し下にずらして非表示にします。
 * JS側で .is-revealed が付与されたタイミングで、自然に表示されます。
 */
[data-aleg2-reveal] {
	opacity: 0;
	transform: translate3d(0, var(--aleg2-reveal-distance, 28px), 0);
	transition:
		opacity var(--aleg2-reveal-duration, var(--aleg2-duration-slow)) var(--aleg2-ease-emphasized),
		transform var(--aleg2-reveal-duration, var(--aleg2-duration-slow)) var(--aleg2-ease-emphasized);
	will-change: opacity, transform;
}

/*
 * Reveal完了状態です。
 * JS側の監視処理によって .is-revealed が付いたら、
 * 透明度と位置を通常状態へ戻します。
 */
[data-aleg2-reveal].is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}


/*
 * JS無効・motion OFF時の安全策です。
 * reveal対象は初期状態で opacity: 0 のため、JSが動かない環境や
 * motion.enabled OFF時にコンテンツが透明のまま残らないようにします。
 */
.no-js [data-aleg2-reveal],
html.no-js [data-aleg2-reveal],
html.is-motion-disabled [data-aleg2-reveal],
body.is-motion-disabled [data-aleg2-reveal],
.aleg2-motion-disabled [data-aleg2-reveal] {
	opacity: 1;
	transform: none;
}

/* ============================================================
 * Split Text
 * ============================================================
 *
 * split-text演出用の基本スタイルです。
 * 行・単語・文字ごとにJSで分割された要素を、
 * アニメーションしやすい表示形式へ整えます。
 */
[data-aleg2-split-text] {
	overflow: hidden;
}

/*
 * 分割された1行単位のラッパーです。
 * 行ごとのスライド演出で外側にはみ出した部分を隠します。
 */
[data-aleg2-split-text] .aleg2-split-line {
	display: block;
	overflow: hidden;
}

/*
 * 分割された単語・文字単位の要素です。
 * transform / opacity をJSで操作しやすいよう inline-block にします。
 */
[data-aleg2-split-text] .aleg2-split-word,
[data-aleg2-split-text] .aleg2-split-char {
	display: inline-block;
	will-change: transform, opacity;
}

/* ============================================================
 * Parallax
 * ============================================================
 *
 * data-aleg2-parallax を付けた要素は、
 * JS側で transform を更新する前提のため will-change を指定します。
 */
[data-aleg2-parallax] {
	will-change: transform;
}

/* ============================================================
 * Lenis Smooth Scroll
 * ============================================================
 *
 * Lenisが有効な場合、html要素へ .lenis / .lenis-smooth などのclassが付与されます。
 *
 * A LEGEND 2のreset側では通常時のページ内リンクをなめらかにするため、
 * html { scroll-behavior: smooth; } を持つ場合があります。
 *
 * ただしLenis有効中にCSSの scroll-behavior: smooth も同時に効くと、
 * ブラウザ標準のスムーススクロールとLenis制御が二重に働き、
 * スクロールが入力に遅れて追従するような違和感や、
 * アンカー移動時の位置ズレにつながる可能性があります。
 *
 * そのため、Lenis有効中だけ scroll-behavior を auto に戻します。
 */
html.lenis,
html.lenis.lenis-smooth,
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

/*
 * Lenis初期化時にhtmlへ付与される .lenis 用の補助です。
 * 旧A LEGEND側にも存在していた指定で、Lenis管理下の高さ計算を安定させます。
 */
html.lenis {
	height: auto;
}

/*
 * Lenisを一時停止している状態です。
 * モーダル表示やメニュー展開などでスクロールを止める場合に、
 * Lenis側の .lenis-stopped と連動してページ全体のスクロールを抑制します。
 */
.lenis.lenis-stopped {
	overflow: hidden;
}

/*
 * Lenisのスクロール制御を一部の要素で抑止したい場合の指定です。
 * data-lenis-prevent 系属性を付けた領域では、
 * スクロール連鎖を抑え、内部スクロールやUI操作を安定させます。
 */
.lenis.lenis-smooth [data-lenis-prevent],
.lenis.lenis-smooth [data-lenis-prevent-wheel],
.lenis.lenis-smooth [data-lenis-prevent-touch] {
	overscroll-behavior: contain;
}

/* ============================================================
 * Motion Pause
 * ============================================================
 *
 * JS側または設定側でモーションを一時停止したい場合の補助classです。
 * transition-duration を極小にし、animation-play-state を停止します。
 */
.aleg2-motion-paused *,
.aleg2-motion-paused *::before,
.aleg2-motion-paused *::after {
	animation-play-state: paused !important;
	transition-duration: 0.001ms !important;
}

/* ============================================================
 * Keyframes
 * ============================================================
 *
 * 各種コンポーネントや装飾演出で使う共通アニメーションです。
 */

/*
 * ゆっくり上下に浮遊する演出です。
 * Hero装飾や背景オブジェクトなどで使用します。
 */
@keyframes aleg2-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, -14px, 0);
	}
}

/*
 * 低速回転演出です。
 * 円形装飾やローディング風の背景演出などで使用します。
 */
@keyframes aleg2-spin-slow {
	to {
		transform: rotate(360deg);
	}
}

/*
 * グラデーション背景の位置をゆっくり動かす演出です。
 */
@keyframes aleg2-gradient-shift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/*
 * 横方向に流れるマーキー演出です。
 * コンテンツ幅の50%分だけ左へ移動させ、ループ表示に使います。
 */
@keyframes aleg2-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* ============================================================
 * prefers-reduced-motion
 * ============================================================
 *
 * OS側で「視差効果を減らす」が有効なユーザーに対して、
 * アニメーションやスムーススクロールを極力停止します。
 *
 * JS側でも reduced-motion を見る想定ですが、
 * CSS側でも保険として動きを止めます。
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}

	/*
	 * reduced-motion環境では、Reveal対象を最初から表示状態にします。
	 * JSの実行タイミングに関係なく、コンテンツが非表示のまま残らないようにします。
	 */
	[data-aleg2-reveal] {
		opacity: 1;
		transform: none;
	}
}