/*
 * 滚动进场动画。
 *
 * 旧站用 wow.js + animate.min.css（53KB 全量）：wow.js 只负责「滚到才显示」，
 * 真正的动画来自 animate.css。新站只用到 4 个动画，其中 fadeInwidth 是旧站自有
 * 动画（已在 theme.css 里），这里只保留 animate.css 里真正被用到的三个。
 *
 * 定义与旧站那份 animate.min.css 逐字一致（同样 1s + fill-mode:both + translate3d 100%），
 * 只去掉 -webkit- 前缀重复项——那对现代浏览器是死重量。
 * fill-mode: both 是关键：配合 data-wow-delay 时，等待期间元素停在 0% 关键帧（透明），
 * 而不是先闪一下再动。
 */

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.fadeInUp {
	animation-name: fadeInUp;
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.fadeInLeft {
	animation-name: fadeInLeft;
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.fadeInRight {
	animation-name: fadeInRight;
}

/*
 * 系统要求「减少动态效果」时不做位移，只让内容直接可见。
 * 旧站没有这一条，但它会让前庭功能敏感的用户看到 100% 视口高度的元素飞过。
 */
@media (prefers-reduced-motion: reduce) {
	.animated {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}