/* ==========================================================================
   ONEsta Block Animations — CSS Scroll-driven Animations

   animation-timeline: view() でスクロール連動アニメーションを実現。
   JS 不要。VT スナップショットとの衝突なし。

   非対応ブラウザ（Firefox 等）では要素がそのまま表示される（graceful degradation）。
   animation-fill-mode: both により、ビューポート未到達の要素は from 状態（非表示）、
   通過済みの要素は to 状態（表示）で静止する。
   ========================================================================== */

@supports (animation-timeline: view()) {
	/* ── Base ── */
	html:not(.onesta-gsap-animations) [data-onesta-anim] {
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-timing-function: linear;
		animation-timeline: view();
		animation-range-start: entry 0%;
		animation-range-end: entry 80%;
	}

	/* ── Duration（スクロール範囲の長さで表現） ── */
	html:not(.onesta-gsap-animations) [data-onesta-anim-duration="fast"] {
		animation-range-end: entry 45%;
	}
	/* normal = default (entry 80%) */
	html:not(.onesta-gsap-animations) [data-onesta-anim-duration="slow"] {
		animation-range-end: entry 100%;
	}

	/* ── Delay（スクロール範囲の開始位置オフセット） ── */
	html:not(.onesta-gsap-animations) [data-onesta-anim-delay="short"] {
		animation-range-start: entry 10%;
	}
	html:not(.onesta-gsap-animations) [data-onesta-anim-delay="medium"] {
		animation-range-start: entry 25%;
	}
	html:not(.onesta-gsap-animations) [data-onesta-anim-delay="long"] {
		animation-range-start: entry 40%;
	}
}

/* ── Animation names ── */
[data-onesta-anim="fade-in"]     { animation-name: onesta-fade-in }
[data-onesta-anim="slide-up"]    { animation-name: onesta-slide-up }
[data-onesta-anim="slide-down"]  { animation-name: onesta-slide-down }
[data-onesta-anim="slide-left"]  { animation-name: onesta-slide-left }
[data-onesta-anim="slide-right"] { animation-name: onesta-slide-right }
[data-onesta-anim="zoom-in"]     { animation-name: onesta-zoom-in }
[data-onesta-anim="zoom-out"]    { animation-name: onesta-zoom-out }

/* ── Distance overrides ── */
[data-onesta-anim="slide-up"][data-onesta-anim-distance="short"],
[data-onesta-anim="slide-down"][data-onesta-anim-distance="short"] {
	--onesta-animation-distance-y: 10px;
}
[data-onesta-anim="slide-left"][data-onesta-anim-distance="short"],
[data-onesta-anim="slide-right"][data-onesta-anim-distance="short"] {
	--onesta-animation-distance-x: 15px;
}
[data-onesta-anim="zoom-in"][data-onesta-anim-distance="short"] {
	--onesta-animation-zoom-in-scale: 0.975;
}
[data-onesta-anim="zoom-out"][data-onesta-anim-distance="short"] {
	--onesta-animation-zoom-out-scale: 1.025;
}
[data-onesta-anim="slide-up"][data-onesta-anim-distance="standard"],
[data-onesta-anim="slide-down"][data-onesta-anim-distance="standard"] {
	--onesta-animation-distance-y: 20px;
}
[data-onesta-anim="slide-left"][data-onesta-anim-distance="standard"],
[data-onesta-anim="slide-right"][data-onesta-anim-distance="standard"] {
	--onesta-animation-distance-x: 30px;
}
[data-onesta-anim="zoom-in"][data-onesta-anim-distance="standard"] {
	--onesta-animation-zoom-in-scale: 0.95;
}
[data-onesta-anim="zoom-out"][data-onesta-anim-distance="standard"] {
	--onesta-animation-zoom-out-scale: 1.05;
}
[data-onesta-anim="slide-up"][data-onesta-anim-distance="long"],
[data-onesta-anim="slide-down"][data-onesta-anim-distance="long"] {
	--onesta-animation-distance-y: 30px;
}
[data-onesta-anim="slide-left"][data-onesta-anim-distance="long"],
[data-onesta-anim="slide-right"][data-onesta-anim-distance="long"] {
	--onesta-animation-distance-x: 45px;
}
[data-onesta-anim="zoom-in"][data-onesta-anim-distance="long"] {
	--onesta-animation-zoom-in-scale: 0.925;
}
[data-onesta-anim="zoom-out"][data-onesta-anim-distance="long"] {
	--onesta-animation-zoom-out-scale: 1.075;
}

/* ── Blur variants ── */
[data-onesta-anim="fade-in"][data-onesta-anim-blur]     { animation-name: onesta-fade-in-blur }
[data-onesta-anim="slide-up"][data-onesta-anim-blur]    { animation-name: onesta-slide-up-blur }
[data-onesta-anim="slide-down"][data-onesta-anim-blur]  { animation-name: onesta-slide-down-blur }
[data-onesta-anim="slide-left"][data-onesta-anim-blur]  { animation-name: onesta-slide-left-blur }
[data-onesta-anim="slide-right"][data-onesta-anim-blur] { animation-name: onesta-slide-right-blur }
[data-onesta-anim="zoom-in"][data-onesta-anim-blur]     { animation-name: onesta-zoom-in-blur }
[data-onesta-anim="zoom-out"][data-onesta-anim-blur]    { animation-name: onesta-zoom-out-blur }

/* ==========================================================================
   Keyframes — Apple 風: 控えめな移動距離
   ========================================================================== */

@keyframes onesta-fade-in {
	from { opacity: 0 }
	to   { opacity: 1 }
}
@keyframes onesta-slide-up {
	from { opacity: 0; transform: translateY(var(--onesta-animation-distance-y, 20px)) }
	to   { opacity: 1; transform: translateY(0) }
}
@keyframes onesta-slide-down {
	from { opacity: 0; transform: translateY(calc(var(--onesta-animation-distance-y, 20px) * -1)) }
	to   { opacity: 1; transform: translateY(0) }
}
@keyframes onesta-slide-left {
	from { opacity: 0; transform: translateX(calc(var(--onesta-animation-distance-x, 30px) * -1)) }
	to   { opacity: 1; transform: translateX(0) }
}
@keyframes onesta-slide-right {
	from { opacity: 0; transform: translateX(var(--onesta-animation-distance-x, 30px)) }
	to   { opacity: 1; transform: translateX(0) }
}
@keyframes onesta-zoom-in {
	from { opacity: 0; transform: scale(var(--onesta-animation-zoom-in-scale, 0.95)) }
	to   { opacity: 1; transform: scale(1) }
}
@keyframes onesta-zoom-out {
	from { opacity: 0; transform: scale(var(--onesta-animation-zoom-out-scale, 1.05)) }
	to   { opacity: 1; transform: scale(1) }
}

/* ── Blur variants ── */

@keyframes onesta-fade-in-blur {
	from { opacity: 0; filter: blur(8px) }
	to   { opacity: 1; filter: blur(0px) }
}
@keyframes onesta-slide-up-blur {
	from { opacity: 0; transform: translateY(var(--onesta-animation-distance-y, 20px)); filter: blur(8px) }
	to   { opacity: 1; transform: translateY(0); filter: blur(0px) }
}
@keyframes onesta-slide-down-blur {
	from { opacity: 0; transform: translateY(calc(var(--onesta-animation-distance-y, 20px) * -1)); filter: blur(8px) }
	to   { opacity: 1; transform: translateY(0); filter: blur(0px) }
}
@keyframes onesta-slide-left-blur {
	from { opacity: 0; transform: translateX(calc(var(--onesta-animation-distance-x, 30px) * -1)); filter: blur(8px) }
	to   { opacity: 1; transform: translateX(0); filter: blur(0px) }
}
@keyframes onesta-slide-right-blur {
	from { opacity: 0; transform: translateX(var(--onesta-animation-distance-x, 30px)); filter: blur(8px) }
	to   { opacity: 1; transform: translateX(0); filter: blur(0px) }
}
@keyframes onesta-zoom-in-blur {
	from { opacity: 0; transform: scale(var(--onesta-animation-zoom-in-scale, 0.95)); filter: blur(8px) }
	to   { opacity: 1; transform: scale(1); filter: blur(0px) }
}
@keyframes onesta-zoom-out-blur {
	from { opacity: 0; transform: scale(var(--onesta-animation-zoom-out-scale, 1.05)); filter: blur(8px) }
	to   { opacity: 1; transform: scale(1); filter: blur(0px) }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-onesta-anim] {
		--onesta-animation-distance-x: 0px !important;
		--onesta-animation-distance-y: 0px !important;
		--onesta-animation-zoom-in-scale: 1 !important;
		--onesta-animation-zoom-out-scale: 1 !important;
		animation: none;
	}
}