/**
 * Shared scroll reveal motion.
 *
 * The enabled class is added only when JavaScript and IntersectionObserver are
 * available, so content remains visible when either is unavailable.
 */
.scroll-reveal-enabled .scroll-reveal-item {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: none;
	will-change: opacity, transform;
}

.scroll-reveal-enabled .scroll-reveal-item.is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition-delay: var(--scroll-reveal-delay, 0ms);
	will-change: auto;
}

/*
 * 横スクロール領域は overflow-x に引きずられて overflow-y が auto になるため、
 * 30px の初期オフセットが切られてしまう。
 * 以前は padding-block と負の margin-block で逃がしていたが、margin-block が
 * コンポーネント側の margin-top（content-rail 72px / creator-rail 60px /
 * client-logos 120px）を丸ごと上書きし、見出しとカードが密着していた。
 * レイアウトに触れずに済むよう、この中だけ上下移動をやめてフェードだけにする。
 */
.scroll-reveal-enabled .content-rail .scroll-reveal-item,
.scroll-reveal-enabled .creator-rail .scroll-reveal-item,
.scroll-reveal-enabled .client-logos .scroll-reveal-item {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.scroll-reveal-enabled .scroll-reveal-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}