/**
 * 动画关键帧和特效样式
 * 包含所有 @keyframes 定义和动画相关类
 */

/* ============================================
   Logo 动画
   ============================================ */
@keyframes logo-morph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes logo-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

/* ============================================
   引擎动画
   ============================================ */
@keyframes float-random-engine {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes breathe-glow-engine {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(1.1); opacity: 1; }
}
@keyframes flash-row-engine {
    0% { background: rgba(255,255,255,0.4); }
    50% { background: #D1FAE5; }
    100% { background: #fff; }
}

/* ============================================
   极光和光晕动画
   ============================================ */
@keyframes aura-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 50px) scale(1.1); }
}

/* 极光脉冲 */
@keyframes aurora-pulse {
    0% {
        box-shadow: 
            0 0 0 1px rgba(0, 0, 0, 0.03),
            0 20px 50px -12px rgba(22, 93, 255, 0.12),
            0 0 60px -10px rgba(0, 69, 230, 0.15);
    }
    33% {
        box-shadow: 
            0 0 0 1px rgba(0, 0, 0, 0.03),
            0 25px 70px -10px rgba(16, 185, 129, 0.15),
            0 0 80px -5px rgba(52, 211, 153, 0.2);
    }
    66% {
        box-shadow: 
            0 0 0 1px rgba(0, 0, 0, 0.03),
            0 20px 60px -12px rgba(22, 93, 255, 0.12),
            0 0 60px -10px rgba(232, 243, 255, 0.15);
    }
    100% {
        box-shadow: 
            0 0 0 1px rgba(0, 0, 0, 0.03),
            0 20px 50px -12px rgba(22, 93, 255, 0.12),
            0 0 60px -10px rgba(0, 69, 230, 0.15);
    }
}

/* ============================================
   滑块和扫描动画
   ============================================ */
@keyframes slider-scan {
    0% { top: -100px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ============================================
   弹出和揭示动画
   ============================================ */
@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.95) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px) scale(0.99); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* 建模扫描动画 */
@keyframes inst-crystal-scan {
    0% { width: 0%; }
    15% { width: 15%; }
    40% { width: 45%; }
    100% { width: 100%; }
}

/* 浮动上升 */
@keyframes inst-float-up {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-40px) rotate(10deg); opacity: 0; }
}

/* ============================================
   淡入动画
   ============================================ */
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-right {
    animation: fadeInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-left {
    animation: fadeInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================
   流动粒子动画
   ============================================ */
.flow-particle {
    offset-path: path('M 120,100 Q 250,100 300,180');
    animation: flow 4s infinite linear;
}
.flow-particle-2 {
    offset-path: path('M 120,100 Q 250,100 300,320');
    animation: flow 4s infinite linear 2s;
}

@keyframes flow {
    0% { offset-distance: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* ============================================
   AI 核心脉冲动画
   ============================================ */
@keyframes core-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(22, 93, 255, 0.4)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.6)); }
}
.animate-core {
    animation: core-pulse 4s ease-in-out infinite;
}

/* 碎片漂浮 */
@keyframes fragment-float {
    0% { transform: translate(-50px, 0) scale(0.8); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; transform: translate(150px, 0) scale(1); }
    100% { transform: translate(300px, 0) scale(0); opacity: 0; }
}
.semantic-fragment {
    animation: fragment-float 5s infinite linear;
}

/* 线条流动 */
@keyframes line-flow {
    0% { stroke-dashoffset: 100; opacity: 0.2; }
    50% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0.2; }
}
.flow-line {
    stroke-dasharray: 10, 10;
    animation: line-flow 3s infinite linear;
}

/* ============================================
   任务标签和思考动画
   ============================================ */
@keyframes label-slide {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(150px, 0); opacity: 0; }
}
.task-label {
    animation: label-slide 3s infinite linear;
    pointer-events: none;
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}
.thinking-ring {
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    position: absolute;
    inset: -20px;
    animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ============================================
   阶段揭示动画 - 累加序列
   ============================================ */
@keyframes phase-reveal-1 {
    0%, 5% { opacity: 0; transform: translateY(10px); }
    10%, 90% { opacity: 1; transform: translateY(0); }
    95%, 100% { opacity: 0; }
}
@keyframes phase-reveal-2 {
    0%, 35% { opacity: 0; transform: translateY(10px); }
    40%, 90% { opacity: 1; transform: translateY(0); }
    95%, 100% { opacity: 0; }
}
@keyframes phase-reveal-3 {
    0%, 65% { opacity: 0; transform: translateY(10px); }
    70%, 90% { opacity: 1; transform: translateY(0); }
    95%, 100% { opacity: 0; }
}

.phase-1 { animation: phase-reveal-1 12s infinite; }
.phase-2 { animation: phase-reveal-2 12s infinite; }
.phase-3 { animation: phase-reveal-3 12s infinite; }

/* ============================================
   导航条激活动画
   ============================================ */
@keyframes nav-activate {
    0%, 5% { background-color: #e2e8f0; color: #64748b; box-shadow: none; }
    10%, 90% { background-color: #165DFF; color: #ffffff; box-shadow: 0 0 15px rgba(22, 93, 255, 0.4); }
    95%, 100% { background-color: #e2e8f0; color: #64748b; }
}
@keyframes nav-activate-delayed-2 {
    0%, 35% { background-color: #e2e8f0; color: #64748b; }
    40%, 90% { background-color: #165DFF; color: #ffffff; box-shadow: 0 0 15px rgba(22, 93, 255, 0.4); }
    95%, 100% { background-color: #e2e8f0; color: #64748b; }
}
@keyframes nav-activate-delayed-3 {
    0%, 65% { background-color: #e2e8f0; color: #64748b; }
    70%, 90% { background-color: #165DFF; color: #ffffff; box-shadow: 0 0 15px rgba(22, 93, 255, 0.4); }
    95%, 100% { background-color: #e2e8f0; color: #64748b; }
}

.nav-dot-1 { animation: nav-activate 12s infinite; }
.nav-dot-2 { animation: nav-activate-delayed-2 12s infinite; }
.nav-dot-3 { animation: nav-activate-delayed-3 12s infinite; }

/* 连接线脉冲 */
@keyframes line-pulse {
    0%, 30% { stroke-dashoffset: 20; opacity: 0.2; }
    40%, 90% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { opacity: 0; }
}
.nav-line-1 { animation: line-pulse 12s infinite; }

@keyframes line-pulse-2 {
    0%, 60% { stroke-dashoffset: 20; opacity: 0.2; }
    70%, 90% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { opacity: 0; }
}
.nav-line-2 { animation: line-pulse-2 12s infinite; }

/* 导航线样式 */
.nav-connector {
    stroke: #cbd5e1;
    stroke-width: 2;
    stroke-dasharray: 4 4;
}
.nav-connector-active {
    stroke: #165DFF;
    stroke-dasharray: 0;
    transition: all 0.5s ease;
}

/* ============================================
   聊天和打字动画
   ============================================ */
@keyframes typing {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.typing-dot {
    animation: typing 1s infinite;
}

@keyframes ai-glow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(22, 93, 255, 0.5)); }
    50% { filter: drop-shadow(0 0 15px rgba(22, 93, 255, 0.8)); }
}
.ai-avatar-glow {
    animation: ai-glow 2s infinite ease-in-out;
}

@keyframes reveal-chat {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-out-thinking {
    0% { opacity: 0; transform: translateY(20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); height: 0; margin: 0; overflow: hidden; }
}
.chat-stagger-1 { animation: reveal-chat 0.5s ease-out forwards; opacity: 0; }
.chat-stagger-2 { animation: fade-out-thinking 2.5s ease-in-out 0.8s forwards; opacity: 0; }
.chat-stagger-3 { animation: reveal-chat 0.5s ease-out 3.3s forwards; opacity: 0; }

@keyframes fadeInOut {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}
.thinking-indicator {
    animation: fadeInOut 1.5s infinite;
}

/* ============================================
   节点和光束动画
   ============================================ */
@keyframes node-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(10px, -15px) scale(1.05); }
    66% { transform: translate(-8px, 12px) scale(0.95); }
}
.animate-node-float {
    animation: node-float 8s ease-in-out infinite;
}

@keyframes beam-glow {
    0%, 100% { opacity: 0.3; stroke-width: 1; }
    50% { opacity: 1; stroke-width: 3; filter: blur(2px); }
}
.beam-path {
    animation: beam-glow 3s ease-in-out infinite;
}

@keyframes data-pulse {
    0% { offset-distance: 0%; opacity: 0; scale: 0.5; }
    20% { opacity: 1; scale: 1; }
    80% { opacity: 1; scale: 1; }
    100% { offset-distance: 100%; opacity: 0; scale: 0.5; }
}
.data-packet {
    animation: data-pulse 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* 导航线揭示 */
@keyframes nav-line-reveal {
    0%, 5% { transform: scaleX(0); }
    15%, 90% { transform: scaleX(1); }
    95%, 100% { transform: scaleX(0); }
}
@keyframes nav-line-reveal-delayed {
    0%, 35% { transform: scaleX(0); }
    45%, 90% { transform: scaleX(1); }
    95%, 100% { transform: scaleX(0); }
}

/* 导航文字激活 */
@keyframes nav-text-activate {
    0%, 5% { color: #94a3b8; }
    10%, 90% { color: #1e293b; }
    95%, 100% { color: #94a3b8; }
}
@keyframes nav-text-activate-delayed-2 {
    0%, 35% { color: #94a3b8; }
    40%, 90% { color: #1e293b; }
    95%, 100% { color: #94a3b8; }
}
@keyframes nav-text-activate-delayed-3 {
    0%, 65% { color: #94a3b8; }
    70%, 90% { color: #1e293b; }
    95%, 100% { color: #94a3b8; }
}
.nav-text-1 { animation: nav-text-activate 12s infinite; }
.nav-text-2 { animation: nav-text-activate-delayed-2 12s infinite; }
.nav-text-3 { animation: nav-text-activate-delayed-3 12s infinite; }

/* ============================================
   顶级设计师风格：标题动画系统
   ============================================ */
@keyframes slide-up-custom {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-slide-up-custom {
    animation: slide-up-custom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes fade-in-custom {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-custom {
    animation: fade-in-custom 1s ease-out forwards;
}

/* 按钮扫光动画 */
@keyframes shimmer {
    0% { transform: translateX(-100%) skewX(-12deg); }
    100% { transform: translateX(200%) skewX(-12deg); }
}

/* 标题光晕呼吸 */
@keyframes title-glow {
    0%, 100% { filter: blur(80px) opacity(0.5); transform: scale(1); }
    50% { filter: blur(100px) opacity(0.8); transform: scale(1.1); }
}

/* badge 彩虹背景流动 */
@keyframes badge-rainbow-bg {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* badge 白色光晕扫过 */
@keyframes badge-shimmer {
    0%        { left: -75%; opacity: 0; }
    20%       { opacity: 1; }
    60%, 100% { left: 130%; opacity: 0; }
}

/* badge 微弹跳 */
@keyframes badge-bounce {
    0%, 100%  { transform: translateY(0) scale(1); }
    40%        { transform: translateY(-2px) scale(1.06); }
    60%        { transform: translateY(0) scale(0.97); }
    80%        { transform: translateY(-1px) scale(1.02); }
}

/* 彩虹流光（背景位移） */
@keyframes rainbow-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 彩虹流光（文字颜色循环） */
@keyframes rainbow-text-color {
    0%   { color: #ff0080; }
    17%  { color: #ff6600; }
    33%  { color: #cc9900; }
    50%  { color: #00a86b; }
    67%  { color: #0080cc; }
    83%  { color: #6600cc; }
    100% { color: #ff0080; }
}