/* ==========================================================================
   前台动效体系
   - 滚动入场 reveal（单元素 / 网格 stagger）
   - 轮播帧内文案 stagger 入场
   - Ken Burns 背景缓缩
   - 数字计数动画基线
   - prefers-reduced-motion 降级
   说明：初始隐藏只在 <html class="js-anim"> 下生效，禁用 JS 时内容默认可见。
   ========================================================================== */

:root{
    --anim-ease:cubic-bezier(.22,.61,.36,1);
    --anim-duration:.7s;
    --anim-shift:20px;
}

/* ---------- 滚动入场：单元素 ---------- */
.js-anim [data-reveal]{
    opacity:0;
    transform:translateY(var(--anim-shift));
    transition:opacity var(--anim-duration) var(--anim-ease),
               transform var(--anim-duration) var(--anim-ease);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity,transform;
}
.js-anim [data-reveal].revealed{
    opacity:1;
    transform:translateY(0);
}
.js-anim [data-reveal="fade-left"]{transform:translateX(calc(-1 * var(--anim-shift)));}
.js-anim [data-reveal="fade-right"]{transform:translateX(var(--anim-shift));}
.js-anim [data-reveal="fade-left"].revealed,
.js-anim [data-reveal="fade-right"].revealed{transform:translateX(0);}

/* ---------- 滚动入场：网格 stagger 容器 ---------- */
.js-anim [data-reveal-stagger] > *{
    opacity:0;
    transform:translateY(var(--anim-shift));
    transition:opacity var(--anim-duration) var(--anim-ease),
               transform var(--anim-duration) var(--anim-ease);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity,transform;
}
.js-anim [data-reveal-stagger].revealed > *{
    opacity:1;
    transform:translateY(0);
}

/* ---------- 轮播 Hero 帧内文案分镜入场（背景静态，动感由前景四层承担） ---------- */
.hero-copy > *{opacity:0;}
.carousel-item.active .hero-copy .hero-eyebrow{
    animation:hero-eyebrow-in .7s cubic-bezier(.16,1,.3,1) 0ms forwards;
}
.carousel-item.active .hero-copy .hero-title{
    animation:hero-title-in .78s cubic-bezier(.16,1,.3,1) 150ms forwards;
}
.carousel-item.active .hero-copy .hero-subtitle{
    animation:hero-sub-in .7s var(--anim-ease) 300ms forwards;
}
.carousel-item.active .hero-copy .hero-actions{
    animation:hero-actions-in .7s var(--anim-ease) 450ms forwards;
}

@keyframes hero-eyebrow-in{
    from{opacity:0;transform:translateX(-24px);}
    to{opacity:1;transform:translateX(0);}
}
@keyframes hero-title-in{
    from{opacity:0;transform:translateY(40px) scale(.97);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes hero-sub-in{
    from{opacity:0;transform:translateY(32px);}
    to{opacity:1;transform:translateY(0);}
}
@keyframes hero-actions-in{
    from{opacity:0;transform:translateY(28px);}
    to{opacity:1;transform:translateY(0);}
}

/* ---------- 背景层：静态 cover，不再做 Ken Burns 缩放 ---------- */
.hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background-size:cover;
    background-position:center;
}
.hero > .container{position:relative;z-index:1;}

/* ---------- hover 微交互：按钮箭头位移、图片缓缩 ---------- */
.btn .btn-arrow,
.text-link .btn-arrow{
    display:inline-block;
    transition:transform .25s var(--anim-ease);
}
.btn:hover .btn-arrow,
.text-link:hover .btn-arrow{
    transform:translateX(4px);
}
.product-card .card-img-top,
.card .card-img-top,
.card-img-zoom{
    transition:transform .5s var(--anim-ease);
}
.product-card:hover .card-img-top,
.card:hover .card-img-top{
    transform:scale(1.04);
}
.icon-tile-icon{
    transition:color .3s var(--anim-ease), background-color .3s var(--anim-ease);
}

/* ---------- 无障碍：减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .js-anim [data-reveal],
    .js-anim [data-reveal-stagger] > *,
    .hero-copy > *{
        opacity:1 !important;
        transform:none !important;
    }
}