/* ============================================================
   轻量动画 (2026-08-11 新增)
   - 全部使用 transform/opacity (GPU 合成层,不触发重排/重绘)
   - 尊重系统「减弱动态」设置:prefers-reduced-motion 时全部禁用
   - 零 JS 依赖,纯 CSS;滚入渐显由 js/main.js 的 IntersectionObserver 驱动
   ============================================================ */

/* ---------- 1. 区块滚动渐入(需要 js 加 .reveal 类) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 渐入方向变体 */
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-zoom  { transform: scale(0.94); }
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-zoom.is-visible {
    transform: translateX(0) scale(1);
}

/* 延迟阶梯(配合 data-delay 由 JS 注入) */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* ---------- 2. 常驻微动效(仅 transform,零重排) ---------- */
/* 按钮悬浮:轻微上浮 + 阴影加深 */
.btn, .btn-primary, .btn-outline, .phone-card, .product-card, .news-list-item {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover, .btn-primary:hover, .btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.phone-card:hover {
    transform: translateY(-2px);
}
.product-card:hover, .news-list-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
}

/* 首页标题下划线展开动画(需要 .section-header 有 h2 的场景) */
.section-header h2 {
    position: relative;
    display: inline-block;
}
.section-header h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.5;
    transform: translateX(-50%);
    transition: width 0.5s ease;
}
.section-header.is-visible h2::after {
    width: 60%;
}

/* ---------- 3. 首屏横幅文字轻微上浮(只做一次,不做循环) ---------- */
#banner .banner-content, .hero-content, .contact-hero-copy {
    animation: fadeUpOnce 0.9s ease-out both;
}
@keyframes fadeUpOnce {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 4. 尊重系统减弱动态:全部关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible,
    .reveal-left, .reveal-right, .reveal-zoom,
    .reveal-left.is-visible, .reveal-right.is-visible, .reveal-zoom.is-visible,
    .btn, .btn-primary, .btn-outline, .phone-card, .product-card, .news-list-item,
    .section-header h2::after,
    #banner .banner-content, .hero-content, .contact-hero-copy {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}