/* ============================================================
   新三星 (New Sanhe) 全站滚动入场动效 reveal.css
   配合 base.js 的 IntersectionObserver：
   给任意元素加 data-reveal 即可在滚动进入视口时淡入上移。
   可选变体：
     data-reveal="up"    (默认) 上移淡入
     data-reveal="fade"  纯淡入
     data-reveal="left"  从左滑入
     data-reveal="right" 从右滑入
     data-reveal="zoom"  轻微放大淡入
   可选：data-reveal-delay="120" 自定义延迟(ms)，用于同组元素的 stagger
   ============================================================ */

[data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="up"]   { transform: translateY(36px); }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-44px); }
[data-reveal="right"]{ transform: translateX(44px); }
[data-reveal="zoom"] { transform: scale(.94); }

/* 进入视口后由 JS 添加 .is-visible */
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* 同组 stagger：容器上声明 data-reveal-stagger，子元素按序延迟 */
[data-reveal-stagger] > [data-reveal] {
    --reveal-delay: calc(var(--reveal-i, 0) * 90ms);
}

/* 兜底：浏览器不支持 IntersectionObserver 或 JS 未执行时，内容直接可见 */
.no-reveal [data-reveal],
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* 减少动态效果偏好：保留位移入场（上移/左滑/右滑/缩放），仅把过渡时长
   略缩短、缓动放轻，避免过长的滑动引起不适；不再用 !important 强制清位移，
   故全站 data-reveal 元素在 reduce-motion 下也保留上移动效（与 banner 文字一致）。 */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        transition: opacity .45s ease,
                    transform .45s ease;
    }
    /* 首屏 banner 文字/产品图用纯 CSS bannerTextIn 进场动画，
       保留上移入场。 */
    .banner__title,
    .banner__product {
        animation: bannerTextIn .9s cubic-bezier(.22, .61, .36, 1) both;
    }
    .banner__product {
        animation-delay: .18s;
    }
}

/* 修复：inner.css 里 .contact-card / .btn-submit 等自带 `transition: transform ...`
   会覆盖 reveal 的入场 transform 过渡，导致联系页元素只淡入、不上滑。
   用更高优先级规则把 contact 相关元素的 transition 交还给 reveal 系统，
   使其与全站其它内页的 up/right 入场位移一致。 */
.contact-header[data-reveal],
.contact-card[data-reveal],
.contact-cards[data-reveal-stagger],
.contact-form-card[data-reveal-stagger],
.contact-form-title[data-reveal],
.contact-form-sub[data-reveal],
.form-row[data-reveal],
.btn-submit[data-reveal] {
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1) !important;
    transition-delay: var(--reveal-delay, 0ms) !important;
}

/* 首页不整屏上移：仅 hero 内部文字用 data-reveal="up" 逐项上移即可。
   故不保留 .hero-wrapper 的整块 heroRise 入场动画。 */

/* 首屏 banner 文字/产品图：刷新即播放一次明显上移淡入（不依赖滚动）。
   因 data-reveal 初始 opacity:0 会让它在 JS 触发前不可见、且首屏一加载就播完 0.7s 容易错过，
   这里改用纯 CSS 关键帧进场：from 状态自带透明+下移，to 复位，加载即播、明显可见。
   同时解除 data-reveal 对这两个元素的初始隐藏（用本动画接管入场）。 */
@keyframes bannerTextIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
}
.banner__title,
.banner__product {
    opacity: 1 !important;          /* 覆盖 [data-reveal] 的 opacity:0，避免 JS 未触发前空白 */
    animation: bannerTextIn .9s cubic-bezier(.22, .61, .36, 1) both;
}
.banner__product {
    animation-delay: .18s;          /* 产品图稍晚入场，形成层次 */
}