/* * 卡片错峰入场 * * 区块整块的淡入交给 Elementor 自带的入场动画（业主在后台能逐个改）， * 这里只管一件 Elementor 做不到的事：**一排卡片逐个出现**。 * 卡片是自建组件内部的标记，不是独立的 Elementor 元素，后台碰不到。 * * 降级方式很重要：默认什么都不做，内容正常显示。 * 只有 JS 确认「支持 IntersectionObserver 且用户没要求减弱动效」时， * 才会在 上挂 .astra-reveal-on，这条选择器才开始生效。 * 所以脚本挂了、浏览器老、用户关了动效——内容都照常看得见，不会白屏。 */ html.astra-reveal-on [data-astra-reveal-item] { opacity: 0; transform: translateY(var(--reveal-rise, 18px)); transition: opacity var(--reveal-duration, 520ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms), transform var(--reveal-duration, 520ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms); will-change: opacity, transform; } html.astra-reveal-on [data-astra-reveal-item].is-revealed { opacity: 1; transform: none; } /* 动画放完就把 will-change 摘掉，别一直占着合成层 */ html.astra-reveal-on [data-astra-reveal-item].is-revealed-done { will-change: auto; transition: none; } /* * 系统设置里开了「减弱动效」就完全不参与。 * 这不是可选项：前庭功能障碍的用户会因为位移动画头晕。 * JS 里也判了一次，这里是双保险（比如用户在页面加载后才改的系统设置）。 */ @media (prefers-reduced-motion: reduce) { html.astra-reveal-on [data-astra-reveal-item] { opacity: 1; transform: none; transition: none; will-change: auto; } }