/* 滚动进场（2026-10-25）
   机制：元素先藏起来 → 快进入屏幕时 JS 贴 .is-in → CSS 过渡把它放回原位，只播一次。
   只有 <html> 带 .reveal-ready 时才隐藏：脚本没跑、被禁用、或系统开了「减少动态」时，
   内容照常直接显示，不会白屏。 */

.reveal-ready [data-reveal] {
	opacity: 0;
	transform: translate3d(0, var(--reveal-rise, 24px), 0);
	transition:
		opacity .65s cubic-bezier(.22, .9, .35, 1) var(--reveal-delay, 0s),
		transform .65s cubic-bezier(.22, .9, .35, 1) var(--reveal-delay, 0s);
}
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* 首屏用「打开就演」，不等滚动：先看见再藏会闪一下。 */
@keyframes reveal-enter {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to   { opacity: 1; transform: none; }
}
[data-enter] { animation: reveal-enter .8s cubic-bezier(.22, .9, .35, 1) both; }
[data-enter="1"] { animation-delay: .07s; }
[data-enter="2"] { animation-delay: .14s; }
[data-enter="3"] { animation-delay: .21s; }
[data-enter="4"] { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
	.reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
	[data-enter] { animation: none; }
}