/* 全站动效 — 尊重 prefers-reduced-motion */

:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 180ms;
    --duration-normal: 260ms;
    --duration-slow: 400ms;
    --stagger-step: 80ms;
}

/* 入场动画（由 JS 添加 .is-visible） */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 { transition-delay: calc(var(--stagger-step) * 1); }
.reveal-delay-2 { transition-delay: calc(var(--stagger-step) * 2); }
.reveal-delay-3 { transition-delay: calc(var(--stagger-step) * 3); }
.reveal-delay-4 { transition-delay: calc(var(--stagger-step) * 4); }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Hero 背景微动 */
.home-hero__bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(15, 23, 42, 0.93) 0%, rgba(155, 26, 28, 0.82) 48%, rgba(200, 33, 36, 0.78) 100%),
        url('../images/hero-banner.jpg') center / cover no-repeat;
    z-index: 0;
}

.home-hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 20% 20%, rgba(201, 162, 39, 0.18), transparent 55%),
        radial-gradient(ellipse 50% 40% at 85% 70%, rgba(200, 33, 36, 0.25), transparent 50%);
    z-index: 1;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .home-hero__mesh {
        animation: heroMeshPulse 8s ease-in-out infinite alternate;
    }
}

@keyframes heroMeshPulse {
    from { opacity: 0.85; }
    to { opacity: 1; }
}

/* 数字等宽 + 计数动画容器 */
.stat-number,
.hero-mini-card strong,
.hero-value-card strong {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.02em;
}

/* 统计/价值图标圆 */
.icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.icon-badge--red {
    background: rgba(200, 33, 36, 0.1);
    color: var(--brand-red);
}

.icon-badge--gold {
    background: rgba(201, 162, 39, 0.15);
    color: #9A7209;
}

.icon-badge--navy {
    background: rgba(15, 23, 42, 0.08);
    color: var(--navy);
}

.icon-badge--light {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 按钮按压反馈 */
.btn-brand:active,
.btn-brand-outline:active,
.nav-buttons .btn:active {
    transform: scale(0.98);
}

/* 卡片 hover 微动 */
.advantage-card,
.feature-band,
.moment-card,
.case-detail-flex {
    transition:
        box-shadow var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

@media (hover: hover) {
    .advantage-card:hover {
        transform: translateY(-4px);
    }
}

/* 导航链接下划线动画 */
.nav-menu > ul > li > a {
    position: relative;
}

.nav-menu > ul > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 2px;
    background: var(--brand-red);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--duration-fast) var(--ease-out);
}

.nav-menu > ul > li > a:hover::after,
.nav-menu > ul > li > a.active::after {
    transform: scaleX(1);
}

/* 案例 Tab 切换 */
.case-detail.active {
    animation: caseFadeIn var(--duration-normal) var(--ease-out);
}

@keyframes caseFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Logo 链接 */
.logo a,
.logo img {
    transition: opacity var(--duration-fast) var(--ease-out);
}

.logo a:hover img {
    opacity: 0.88;
}