/* ============================================================
 * VIS-FX — VISKEM 动效库
 *
 * 纯 CSS + 原生 JS 动效集。GPU 加速，按需加载（data-fx 触发）。
 * 遵循 prefers-reduced-motion：动画降级为瞬时显现。
 * ============================================================ */

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    [data-fx],
    .fx-fade-up, .fx-fade-left, .fx-fade-scale,
    .fx-glitch, .fx-typewriter,
    .fx-magnetic, .fx-ripple, .fx-tilt,
    .fx-grid-bg, .fx-cursor-glow {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ================================================================
   1. 滚动触发：渐入变体
   ================================================================ */

/* fadeUp — 从下方淡入 */
.fx-fade-up {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fx-fade-up.fx-active {
    opacity: 1;
    transform: translateY(0);
}

/* fadeLeft — 从左侧滑入 */
.fx-fade-left {
    opacity: 0;
    transform: translateX(-2rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fx-fade-left.fx-active {
    opacity: 1;
    transform: translateX(0);
}

/* fadeScale — 缩放淡入 */
.fx-fade-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fx-fade-scale.fx-active {
    opacity: 1;
    transform: scale(1);
}

/* 延迟系列 */
.fx-delay-1 { transition-delay: 0.1s; }
.fx-delay-2 { transition-delay: 0.2s; }
.fx-delay-3 { transition-delay: 0.3s; }
.fx-delay-4 { transition-delay: 0.4s; }

/* ================================================================
   2. 数字递增（counter）— JS 驱动
   ================================================================ */
.fx-counter {
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   3. 文字效果：逐字显现
   ================================================================ */
.fx-char-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.fx-char-reveal.fx-active span {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================
   4. Glitch 闪烁 — 终端风故障效果
   ================================================================ */
.fx-glitch {
    position: relative;
}
.fx-glitch::before,
.fx-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.fx-glitch.fx-active::before {
    animation: fx-glitch-1 3s infinite linear alternate-reverse;
    color: #0ff;
    z-index: -1;
}
.fx-glitch.fx-active::after {
    animation: fx-glitch-2 2s infinite linear alternate-reverse;
    color: #f0f;
    z-index: -2;
}
@keyframes fx-glitch-1 {
    0%, 90%, 100% { opacity: 0; transform: none; }
    91% { opacity: 0.8; transform: translate(2px, -1px); clip-path: inset(20% 0 30% 0); }
    93% { opacity: 0; }
    95% { opacity: 0.6; transform: translate(-2px, 1px); clip-path: inset(50% 0 10% 0); }
    97% { opacity: 0; }
}
@keyframes fx-glitch-2 {
    0%, 88%, 100% { opacity: 0; transform: none; }
    89% { opacity: 0.6; transform: translate(-2px, 2px); clip-path: inset(40% 0 20% 0); }
    92% { opacity: 0; }
    94% { opacity: 0.5; transform: translate(1px, -2px); clip-path: inset(10% 0 60% 0); }
    96% { opacity: 0; }
}

/* ================================================================
   5. 交互：磁性按钮 — JS 控制 transform
   ================================================================ */
.fx-magnetic {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

/* ================================================================
   6. 交互：涟漪点击
   ================================================================ */
.fx-ripple {
    position: relative;
    overflow: hidden;
}
.fx-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0);
    animation: fx-ripple-expand 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes fx-ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ================================================================
   7. 交互：卡片 3D 倾斜 — JS 控制 transform
   ================================================================ */
.fx-tilt {
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
    will-change: transform;
}
.fx-tilt-inner {
    transform: translateZ(2rem);
}

/* ================================================================
   8. 装饰：网格线动画背景
   ================================================================ */
.fx-grid-bg {
    position: relative;
    overflow: hidden;
}
.fx-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 3rem 3rem;
    animation: fx-grid-scroll 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes fx-grid-scroll {
    to { transform: translateY(3rem); }
}
.fx-grid-bg > * { position: relative; z-index: 1; }

/* ================================================================
   9. 装饰：光标跟随光晕 — JS 设置 CSS 变量
   ================================================================ */
.fx-cursor-glow {
    position: relative;
    overflow: hidden;
}
.fx-cursor-glow::after {
    content: '';
    position: absolute;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 168, 85, 0.06) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    left: var(--cursor-x, 50%);
    top: var(--cursor-y, 50%);
    pointer-events: none;
    transition: left 0.3s ease, top 0.3s ease;
    z-index: 0;
}
.fx-cursor-glow > * { position: relative; z-index: 1; }

/* ================================================================
   10. 终端打字机（增强版）— JS 驱动
   ================================================================ */
.fx-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    animation: fx-cursor-blink 0.8s step-end infinite;
    width: 0;
}
.fx-typewriter.fx-active {
    animation: fx-type-expand var(--fx-type-duration, 2s) steps(var(--fx-type-steps, 30)) forwards,
               fx-cursor-blink 0.8s step-end infinite;
}
@keyframes fx-type-expand {
    to { width: 100%; }
}
@keyframes fx-cursor-blink {
    0%, 100% { border-color: currentColor; }
    50% { border-color: transparent; }
}