/* 动画效果定义 */

/* 英雄区域入场动画 */
@keyframes hero-animation {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 淡入上升动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 滑入动画 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 缩放动画 */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 脉冲动画 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* 滚动触发动画类 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 加载动画 */
.loading {
    animation: pulse 2s infinite;
}

/* 悬停动画 */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

/* 渐变文字动画 */
.gradient-text {
    background: linear-gradient(45deg, var(--text-primary), var(--accent-color));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 1s ease;
}

/* 数字递增动画 */
.counter {
    font-weight: 700;
    font-size: 2rem;
    color: var(--accent-color);
}

/* 延迟动画类 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* 响应式动画优化 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 时间轴特定动画 */
@keyframes timelineAppear {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes markerGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 210, 255, 0.8);
    }
}

@keyframes progressGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(0, 210, 255, 0.6);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 210, 255, 0.9);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes techPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
}

@keyframes numberCountUp {
    from {
        transform: scale(1.2);
        opacity: 0.7;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 时间轴动画应用类 */
.timeline-milestone.animate {
    animation: timelineAppear 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.marker-core {
    animation: markerGlow 3s ease-in-out infinite;
}

.timeline-progress {
    animation: progressGlow 2s ease-in-out infinite;
}

.stat-number.animated {
    animation: numberCountUp 0.5s ease-out;
}

/* 未来规划特效 */
@keyframes futureGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(138, 43, 226, 0.6);
    }
}

.timeline-milestone.future .marker-core {
    animation: futureGlow 3s ease-in-out infinite;
}

/* 技术标签悬停效果 */
.tech-item {
    transition: all 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.3);
}

/* 成就徽章动画 */
.achievement-badge {
    transition: all 0.3s ease;
}

.achievement-badge:hover {
    transform: scale(1.1);
    background: rgba(0, 210, 255, 0.25);
}

/* 里程碑内容扫光效果 */
.milestone-content::before {
    animation: shimmer 3s ease-in-out infinite;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .timeline-milestone.animate {
        animation-duration: 0.6s;
    }
    
    .marker-core {
        animation-duration: 2s;
    }
}