/*
 * @file        animation.css
 * @description 动效样式 - 入场动画（fade-up/fade-right）、悬浮抬升、文字逐字、Banner 切换
 * @author      zhuowebuqun
 * @date        2026-05-01
 * @notes       通过 data-anim 属性触发；JS 在元素进入视口时添加 .is-in 类
 */

/* ================ 入场动画基类 ================ */
[data-anim] {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity, transform;
}

/* fade-up：从下方 30px 渐入 */
[data-anim="fade-up"]    { transform: translateY(30px); }
/* fade-down */
[data-anim="fade-down"]  { transform: translateY(-30px); }
/* fade-left：从右侧 40px 渐入 */
[data-anim="fade-left"]  { transform: translateX(40px); }
/* fade-right：从左侧 40px 渐入 */
[data-anim="fade-right"] { transform: translateX(-40px); }
/* zoom-in */
[data-anim="zoom-in"]    { transform: scale(.92); }
/* fade */
[data-anim="fade"]       { transform: none; }

[data-anim].is-in {
    opacity: 1;
    transform: none;
}

/* 延迟级别 */
[data-delay="100"] { transition-delay: .1s; }
[data-delay="200"] { transition-delay: .2s; }
[data-delay="300"] { transition-delay: .3s; }
[data-delay="400"] { transition-delay: .4s; }
[data-delay="500"] { transition-delay: .5s; }
[data-delay="600"] { transition-delay: .6s; }
[data-delay="800"] { transition-delay: .8s; }

/* ================ 卡片悬浮抬升 ================ */
.lift {
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}
.lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(26, 35, 50, .12);
}

/* ================ 图片缩放 ================ */
.img-zoom {
    overflow: hidden;
}
.img-zoom img {
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.img-zoom:hover img {
    transform: scale(1.06);
}

/* ================ 蒙层揭示 ================ */
.reveal-mask {
    position: relative;
    overflow: hidden;
}
.reveal-mask::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-ink);
    transform: translateX(0);
    transition: transform 1s cubic-bezier(.7, 0, .3, 1);
    z-index: 1;
}
.reveal-mask.is-in::after {
    transform: translateX(101%);
}

/* ================ 数字滚动计数 ================ */
.counter-num {
    font-family: var(--font-serif);
    font-size: 48px;
    color: var(--c-gold);
    font-weight: 700;
    line-height: 1;
}

/* ================ 文字逐字入场 ================ */
.txt-stagger {
    display: inline-block;
}
.txt-stagger .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.4, 0, .2, 1);
}
.txt-stagger.is-in .char {
    opacity: 1;
    transform: none;
}

/* ================ Banner 文字进入 ================ */
@keyframes hero-in {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
}
.hero-text-in {
    animation: hero-in 1s cubic-bezier(.4, 0, .2, 1) both;
}

/* ================ 摇摆/呼吸 ================ */
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.float-anim { animation: float-y 4s ease-in-out infinite; }

/* ================ 鼠标向下提示 ================ */
@keyframes scroll-hint {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 12px;
    z-index: 5;
}
.scroll-hint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    background: #fff;
    border-radius: 2px;
    animation: scroll-hint 1.6s ease-in-out infinite;
}

/* 减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
    [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .float-anim, .scroll-hint::before { animation: none; }
}