/* ============================================================
   滚动进入动画(配合 js/ocean-reveal.js 使用)
   类名均由 JS 添加:无 JS 或浏览器过旧时,页面保持原有静态展示
   ============================================================ */
.ocean-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--ocean-delay, 0s);
}

/* 自身已带 transform 定位的元素仅做淡入,避免覆盖原有布局 */
.ocean-reveal.ocean-reveal-fade {
    transform: none;
}

.ocean-reveal.ocean-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: var(--ocean-delay, 0s);
}

/* 尊重用户"减少动态效果"的系统偏好 */
@media (prefers-reduced-motion: reduce) {
    .ocean-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}