/* ============================================================
   动画样式 - 原生 CSS+JS,等价 GSAP 效果
   柔和 expo 缓动 + GPU transform/opacity
   ============================================================ */

/* ------------------------------------------------------------
   1) 入场动画 (柔和 expo 曲线 + 平滑位移)
   ------------------------------------------------------------ */
.anim-on-load {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    transition:
        opacity   .9s cubic-bezier(.16, 1, .3, 1),
        transform .9s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.anim-on-load.is-visible {
    opacity: 1;
    transform: none;
}

/* 卡片入场变体: 自下而上 */
.anim-rise {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s ease-out, transform 1s cubic-bezier(.16, 1, .3, 1);
}
.anim-rise.is-visible { opacity: 1; transform: none; }

/* 自左侧滑入 */
.anim-slide-l {
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .7s ease-out, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.anim-slide-l.is-visible { opacity: 1; transform: none; }

/* 自右侧滑入 */
.anim-slide-r {
    opacity: 0;
    transform: translateX(22px);
    transition: opacity .7s ease-out, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.anim-slide-r.is-visible { opacity: 1; transform: none; }

/* 缩放淡入 (野兽派: 微缩, 不弹) */
.anim-pop {
    opacity: 0;
    transform: scale(.97);
    transition: opacity .5s ease-out, transform .55s cubic-bezier(.2, .7, .3, 1);
}
.anim-pop.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   2) 滚动显现
   ------------------------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .85s ease-out, transform 1s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   3) 3D 倾斜卡片(等效 rotateX/rotateY)
   ------------------------------------------------------------ */
.tilt-wrap {
    perspective: 1000px;
    transform-style: preserve-3d;
}
.tilt {
    transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
    transition: transform .12s ease-out;
    will-change: transform;
}

/* ------------------------------------------------------------
   4) 磁吸按钮 (野兽派: 干脆跟随, 不弹)
   ------------------------------------------------------------ */
.magnetic {
    transition: transform .15s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
}

/* ------------------------------------------------------------
   5) 果冻反馈 (已禁用: 野兽派不要 Q 弹, 保留类名防 JS 引用报错)
   ------------------------------------------------------------ */
@keyframes jelly {
    0%   { transform: scale(1); }
    100% { transform: scale(1); }
}
.jelly { animation: none; }

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(244, 114, 182, .4); }
    100% { box-shadow: 0 0 0 14px rgba(244, 114, 182, 0); }
}
.pulse-ring { animation: pulse-ring 1.6s ease-out infinite; }

/* ------------------------------------------------------------
   6) 数字滚动(等效 ScrambleText 简化版)
   ------------------------------------------------------------ */
.counter { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   7) 数字卡片进度条入场
   ------------------------------------------------------------ */
.progress-fill {
    width: var(--p, 100%);           /* 最终宽度 (每条百分比不同) */
    transform: scaleX(0);            /* GPU 友好: 用 scaleX 代替 width 动画, 避免 layout 重排 */
    transform-origin: left center;
    transition: transform 1.3s cubic-bezier(.22,.61,.36,1) .2s;
}
.stat.is-visible .progress-fill { transform: scaleX(1); }

/* ------------------------------------------------------------
   8) 浮动光点(背景装饰)
   ------------------------------------------------------------ */
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.float-y { animation: float-y 4.5s ease-in-out infinite; }

@keyframes float-y-alt {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(10px); }
}
.float-y-alt { animation: float-y-alt 5.5s ease-in-out infinite -1s; }

/* ------------------------------------------------------------
   9) 闪烁 / 高亮
   ------------------------------------------------------------ */
@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* ------------------------------------------------------------
   10) 闪烁光标 (输入提示)
   ------------------------------------------------------------ */
@keyframes blink {
    50% { opacity: 0; }
}
.blink { animation: blink 1s steps(2) infinite; }

/* ------------------------------------------------------------
   11) 鼠标光标
   ------------------------------------------------------------ */
.cursor {
    position: fixed; top: 0; left: 0;
    width: 18px; height: 18px;
    border: 2px solid var(--c-brand-2);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .18s ease, height .18s ease, background-color .18s ease, border-color .18s ease;
    z-index: 9999;
    mix-blend-mode: difference;
}
.cursor.dot {
    width: 6px; height: 6px;
    background: var(--c-brand-2);
}
.cursor.hover {
    width: 32px; height: 32px;
    background: rgba(244, 114, 182, .15);
    border-color: transparent;
}
@media (max-width: 720px) { .cursor { display: none; } }

/* ------------------------------------------------------------
   12) 装饰背景
   ------------------------------------------------------------ */
.grid-bg {
    position: fixed; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(244,114,182,.05), transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(168,85,247,.06), transparent 45%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------------------------------------------------
   13) 入场动效 stagger 修饰 (由 JS 设置 transitionDelay)
   ------------------------------------------------------------ */
.stagger > * { transition-delay: 0ms; }

/* ------------------------------------------------------------
   14) ripple 反馈(按钮点击)
   ------------------------------------------------------------ */
.ripple { position: relative; overflow: hidden; }
.ripple .wave {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.4);
    transform: scale(0);
    animation: ripple-wave .6s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
@keyframes ripple-wave {
    to { transform: scale(2.5); opacity: 0; }
}

/* ------------------------------------------------------------
   15) 渐变流光(适用于按钮 / Logo)
   ------------------------------------------------------------ */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer {
    background: linear-gradient(110deg, var(--c-brand-2) 0%, #8b5cf6 50%, var(--c-brand-2) 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------------
   16) SVG 路径描边
   ------------------------------------------------------------ */
.draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 1.6s ease-out forwards;
}
@keyframes draw {
    to { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------
   17) prefers-reduced-motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ------------------------------------------------------------
   无障碍: 用户系统开启"减少动态效果"时, 关闭/缩短全部动画
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}