/* ============================================
   DevStudio Pro - 动画关键帧与动画类 v2.0
   硬编码颜色已替换为 CSS 变量
   ============================================ */

/* ---- 基础动画类（默认隐藏，.is-visible 触发） ---- */

/* 淡入上移 */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 淡入左移 */
.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 淡入右移 */
.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 缩放淡入 */
.fade-in-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease,
                transform 0.5s ease;
}
.fade-in-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* 脉冲发光 */
.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0); }
    50% { box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.25), 0 0 40px rgba(var(--color-primary-rgb), 0.08); }
}

/* 光泽扫过 */
.shine-sweep {
    position: relative;
    overflow: hidden;
}
.shine-sweep::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,255,255,0.06) 45%,
        rgba(255,255,255,0.12) 55%,
        transparent 65%
    );
    pointer-events: none;
    transition: none;
}
.shine-sweep:hover::after {
    animation: shineSweep 0.8s ease forwards;
}
@keyframes shineSweep {
    to { left: 180%; }
}

/* 渐变流动 */
.gradient-flow {
    background-size: 200% 200%;
    animation: gradientFlow 8s ease infinite;
}
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 打字光标 */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--color-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 悬停效果 */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
    transform: translateY(-8px);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow-primary);
}

/* 计数器数字动画 */
.counter-animate {
    display: inline-block;
    min-width: 1ch;
}

/* 粒子画布容器 */
.particles-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* 慢速旋转装饰 */
.spin-slow {
    animation: spinSlow 20s linear infinite;
}
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 浮动动画 */
.float {
    animation: floatAnim 6s ease-in-out infinite;
}
@keyframes floatAnim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* 滑入 */
.slide-in {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease;
}
.slide-in.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Stagger 延迟工具类 ---- */
.stagger-1 { transition-delay: 0.05s !important; }
.stagger-2 { transition-delay: 0.10s !important; }
.stagger-3 { transition-delay: 0.15s !important; }
.stagger-4 { transition-delay: 0.20s !important; }
.stagger-5 { transition-delay: 0.25s !important; }
.stagger-6 { transition-delay: 0.30s !important; }
.stagger-7 { transition-delay: 0.35s !important; }
.stagger-8 { transition-delay: 0.40s !important; }

/* ---- 减少动画偏好处理 ---- */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .fade-in-scale,
    .slide-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pulse-glow,
    .gradient-flow,
    .spin-slow,
    .float {
        animation: none;
    }

    .shine-sweep::after {
        display: none;
    }

    .typing-cursor {
        animation: none;
        opacity: 1;
    }
}