/* ==========================================================================
   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 }

/* ── 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(20px) }
	to   { opacity: 1; transform: translateY(0) }
}
@keyframes onesta-slide-down {
	from { opacity: 0; transform: translateY(-20px) }
	to   { opacity: 1; transform: translateY(0) }
}
@keyframes onesta-slide-left {
	from { opacity: 0; transform: translateX(-30px) }
	to   { opacity: 1; transform: translateX(0) }
}
@keyframes onesta-slide-right {
	from { opacity: 0; transform: translateX(30px) }
	to   { opacity: 1; transform: translateX(0) }
}
@keyframes onesta-zoom-in {
	from { opacity: 0; transform: scale(0.95) }
	to   { opacity: 1; transform: scale(1) }
}
@keyframes onesta-zoom-out {
	from { opacity: 0; transform: 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(20px); filter: blur(8px) }
	to   { opacity: 1; transform: translateY(0); filter: blur(0px) }
}
@keyframes onesta-slide-down-blur {
	from { opacity: 0; transform: translateY(-20px); filter: blur(8px) }
	to   { opacity: 1; transform: translateY(0); filter: blur(0px) }
}
@keyframes onesta-slide-left-blur {
	from { opacity: 0; transform: translateX(-30px); filter: blur(8px) }
	to   { opacity: 1; transform: translateX(0); filter: blur(0px) }
}
@keyframes onesta-slide-right-blur {
	from { opacity: 0; transform: translateX(30px); filter: blur(8px) }
	to   { opacity: 1; transform: translateX(0); filter: blur(0px) }
}
@keyframes onesta-zoom-in-blur {
	from { opacity: 0; transform: 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(1.05); filter: blur(8px) }
	to   { opacity: 1; transform: scale(1); filter: blur(0px) }
}

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

@media (prefers-reduced-motion: reduce) {
	[data-onesta-anim] {
		animation: none;
	}
}