/**
 * ONEsta — Scroll & Interaction Animations
 *
 * CSS-only アニメーション。JS不要。
 * scroll-driven animations (Chrome 115+)
 * animation-timeline: view() を活用。
 *
 * 設計原則:
 *   - スクロールアニメは translate / scale 個別プロパティを使用
 *   - ホバーエフェクトは transform を使用
 *   → 両者が独立して合成され、衝突しない
 */

/* ── ベース: 滑らかスクロール + GPU合成ヒント ─────────────── */
html {
	scroll-behavior: smooth;
}

@supports (animation-timeline: view()) {
	.onesta-reveal,
	.onesta-stagger > *,
	.onesta-scale-in,
	.onesta-slide-left,
	.onesta-slide-right {
		will-change: translate, scale, opacity;
	}
}

/* ── Scroll-driven animations ─────────────────────────────── */
/* @supports で animation-timeline 対応ブラウザのみ初期状態を設定。
   非対応ブラウザ（Firefox/Safari）ではコンテンツが常時表示される。
   非対応ブラウザで opacity:0 のまま残る問題を根本的に防止。 */

@supports (animation-timeline: view()) {
	/* ── フェードインアップ ── */
	/* Apple流: 移動距離を控えめに（20px）、range を短く速やかに完了 */
	.onesta-reveal {
		opacity: 0;
		translate: 0 20px;
		animation: onesta-reveal-up 1s linear both;
		animation-timeline: view();
		animation-range: entry 15% entry 75%;
	}

	/* ── スタガー（子要素を順番に出す） ── */
	/* Apple流: 移動距離20px、range を詰めてテンポ良くカスケード */
	.onesta-stagger > * {
		opacity: 0;
		translate: 0 20px;
		animation: onesta-stagger-up 1s linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 35%;
	}
	.onesta-stagger > *:nth-child(2) { animation-range: entry 10% entry 40%; }
	.onesta-stagger > *:nth-child(3) { animation-range: entry 15% entry 45%; }
	.onesta-stagger > *:nth-child(4) { animation-range: entry 20% entry 50%; }
	.onesta-stagger > *:nth-child(5) { animation-range: entry 25% entry 55%; }
	.onesta-stagger > *:nth-child(6) { animation-range: entry 30% entry 60%; }

	/* ── スケールイン ── */
	/* Apple流: scale(0.95) — 微妙なズームで自然に出現 */
	.onesta-scale-in {
		opacity: 0;
		scale: 0.95;
		animation: onesta-scale-in 1s linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 70%;
	}

	/* ── 左からスライドイン ── */
	.onesta-slide-left {
		opacity: 0;
		translate: -20px 0;
		animation: onesta-slide-in-left 1s linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 70%;
	}

	/* ── 右からスライドイン ── */
	.onesta-slide-right {
		opacity: 0;
		translate: 20px 0;
		animation: onesta-slide-in-right 1s linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 70%;
	}

	/* ── ブラーリビール（Apple風: ボケから鮮明に出現） ── */
	.onesta-blur-reveal {
		opacity: 0;
		filter: blur(4px);
		translate: 0 12px;
		animation: onesta-blur-reveal 1s linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 60%;
	}

	/* ── クリップリビール（Apple風: 下から拡がるワイプ） ── */
	.onesta-clip-reveal {
		clip-path: inset(100% 0 0 0);
		animation: onesta-clip-reveal 1s linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 70%;
	}
}

/* ── ホバーリフト（カード等） ──────────────────────────────── */
/* Apple流: 控えめな浮き上がり（-4px）+ ソフトなシャドウ */
.onesta-hover-lift {
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.onesta-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* ── ホバースケール（Apple流: translateY の代わりに scale） ──── */
.onesta-hover-scale {
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.onesta-hover-scale:hover {
	transform: scale(1.03);
}

/* ── ホバーグロー（CTA等） ─────────────────────────────────── */
/* 周囲がカラーで発光 = Lift とは全く異なる視覚効果 */
.onesta-hover-glow {
	transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.onesta-hover-glow:hover {
	transform: translateY(-2px);
	box-shadow:
		0 0 12px var(--glow-color, rgba(200, 64, 30, 0.7)),
		0 0 36px var(--glow-color, rgba(200, 64, 30, 0.4)),
		0 0 80px var(--glow-color, rgba(200, 64, 30, 0.2)) !important;
}

/* ── Lift + Glow 組み合わせ ────────────────────────────────── */
.onesta-hover-lift.onesta-hover-glow:hover {
	transform: translateY(-8px);
	box-shadow:
		0 24px 48px rgba(0, 0, 0, 0.15),
		0 0 12px var(--glow-color, rgba(200, 64, 30, 0.7)),
		0 0 36px var(--glow-color, rgba(200, 64, 30, 0.4)),
		0 0 80px var(--glow-color, rgba(200, 64, 30, 0.2)) !important;
}

/* ── パルス（注目を引く） ──────────────────────────────────── */
.onesta-pulse {
	animation: onesta-pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── フロート（ゆるく上下） ────────────────────────────────── */
.onesta-float {
	animation: onesta-float 4s ease-in-out infinite;
}

/* ── テキストハイライト（スクロールで下線が伸びる） ─────────── */
/* inline span は view() の entry range が極小になるため、
   cover 範囲を広く取って十分なスクロール距離を確保する */
.onesta-underline-reveal {
	display: inline;
	background-image: linear-gradient(
		var(--wp--preset--color--primary, #2563EB),
		var(--wp--preset--color--primary, #2563EB)
	);
	background-position: left bottom;
	background-repeat: no-repeat;
	text-decoration: none;
}

@supports (animation-timeline: view()) {
	.onesta-underline-reveal {
		background-size: 0% 3px;
		animation: onesta-underline 1s linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 50%;
	}
}

/* 非対応ブラウザでは下線を常時表示 */
@supports not (animation-timeline: view()) {
	.onesta-underline-reveal {
		background-size: 100% 3px;
	}
}

/* ── Keyframes ─────────────────────────────────────────────── */

@keyframes onesta-reveal-up {
	from { opacity: 0; translate: 0 20px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes onesta-stagger-up {
	from { opacity: 0; translate: 0 20px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes onesta-scale-in {
	from { opacity: 0; scale: 0.95; }
	to   { opacity: 1; scale: 1; }
}

@keyframes onesta-slide-in-left {
	from { opacity: 0; translate: -20px 0; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes onesta-slide-in-right {
	from { opacity: 0; translate: 20px 0; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes onesta-blur-reveal {
	from { opacity: 0; filter: blur(4px); translate: 0 12px; }
	to   { opacity: 1; filter: blur(0px); translate: 0 0; }
}

@keyframes onesta-clip-reveal {
	from { clip-path: inset(100% 0 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes onesta-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.7; }
}

@keyframes onesta-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -8px; }
}

@keyframes onesta-underline {
	from { background-size: 0% 3px; }
	to   { background-size: 100% 3px; }
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	/* スクロール駆動アニメーション（対応ブラウザのみリセット必要） */
	.onesta-reveal,
	.onesta-stagger > *,
	.onesta-scale-in,
	.onesta-slide-left,
	.onesta-slide-right,
	.onesta-blur-reveal,
	.onesta-clip-reveal,
	.onesta-underline-reveal {
		animation: none !important;
		opacity: 1 !important;
		translate: 0 0 !important;
		scale: 1 !important;
		filter: none !important;
		clip-path: none !important;
		will-change: auto !important;
	}
	/* 常時アニメーション（パルス・フロート） */
	.onesta-pulse,
	.onesta-float {
		animation: none;
	}
	.onesta-underline-reveal {
		background-size: 100% 3px !important;
	}
}