/*
 * 輕量滾動動畫（不影響布局）
 * 原則：只改變 opacity/transform，不改變定位、尺寸與 display，避免破壞版型
 */

.sa-init {
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.sa-show {
	opacity: 1;
	transform: none;
}

/* 輕微延遲工具類，依需求在標記上加 .sa-d1/.sa-d2... */
.sa-d1 { transition-delay: 0.1s; }
.sa-d2 { transition-delay: 0.2s; }
.sa-d3 { transition-delay: 0.3s; }
.sa-d4 { transition-delay: 0.4s; }
.sa-d5 { transition-delay: 0.5s; }

/* 進階方向變化（可選，不會影響排版） */
.sa-up    { transform: translateY(20px); }
.sa-down  { transform: translateY(-20px); }
.sa-left  { transform: translateX(20px); }
.sa-right { transform: translateX(-20px); }

/* 行動裝置上維持相同過場，避免突兀 */
@media (prefers-reduced-motion: reduce) {
	.sa-init {
		transition: none;
		transform: none;
		opacity: 1;
	}
}