/* 数据缝隙网站动画效果库 */

/* ========== 1. 关键帧动画定义 ========== */

/* 粒子运动动画 */
@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(50px) scale(0.5);
    opacity: 0;
  }
}

@keyframes particle-drift {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(30px, -30px);
  }
  66% {
    transform: translate(-20px, 20px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 数据流动动画 */
@keyframes data-flow {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.3;
  }
}

@keyframes pulse-data {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* 缝隙填充动画 */
@keyframes gap-fill {
  0% {
    r: 0;
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    r: 60;
    opacity: 0;
  }
}

@keyframes fill-ripple {
  0% {
    transform: scale(0);
    opacity: 1;
    background: var(--data-amber);
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: scale(3);
    opacity: 0;
    background: var(--data-cyan);
  }
}

/* 神经网络动画 */
@keyframes neural-pulse {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
}

@keyframes neural-connection {
  0% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 100 0;
    stroke-dashoffset: -100;
  }
}

/* 文字渐入动画 */
@keyframes text-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes char-appear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 加载动画 */
@keyframes loading-dots {
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* 悬停效果动画 */
@keyframes hover-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgb(0 212 255 / 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgb(0 212 255 / 0.6);
  }
}

@keyframes hover-lift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 滚动触发动画 */
@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-up {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-down {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 缩放动画 */
@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoom-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* 旋转动画 */
@keyframes rotate-360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 弹跳动画 */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-gentle {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
}

/* 呼吸动画 */
@keyframes breathe {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* 闪烁动画 */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  10%, 30%, 50%, 70%, 90% {
    opacity: 0.7;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.9;
  }
}

/* 波浪动画 */
@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(20px) translateY(-10px);
  }
  50% {
    transform: translateX(0) translateY(-20px);
  }
  75% {
    transform: translateX(-20px) translateY(-10px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

/* 网格动画 */
@keyframes grid-appear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes grid-cell-fill {
  0% {
    background: var(--gray-800);
    transform: scale(0);
  }
  50% {
    background: var(--data-amber);
    transform: scale(1.2);
  }
  100% {
    background: var(--data-cyan);
    transform: scale(1);
  }
}

/* 连接线动画 */
@keyframes connection-draw {
  0% {
    stroke-dasharray: 0 1000;
    stroke-dashoffset: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    stroke-dasharray: 1000 0;
    stroke-dashoffset: -1000;
    opacity: 0.3;
  }
}

/* 数据点动画 */
@keyframes data-point-emerge {
  0% {
    opacity: 0;
    transform: scale(0);
    background: var(--data-amber);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    background: var(--data-purple);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
    background: var(--data-cyan);
  }
}

@keyframes data-point-hover {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgb(0 212 255 / 0.3);
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 25px rgb(0 212 255 / 0.8);
  }
}

/* 文字打字机效果 */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes cursor-blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* 进度条动画 */
@keyframes progress-fill {
  0% {
    width: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0.8;
  }
}

@keyframes progress-glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--data-cyan);
  }
  50% {
    box-shadow: 0 0 20px var(--data-cyan), 0 0 40px var(--data-cyan);
  }
}

/* 错误/警告动画 */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

@keyframes error-pulse {
  0%, 100% {
    background: var(--error);
    transform: scale(1);
  }
  50% {
    background: var(--error);
    transform: scale(1.1);
  }
}

/* 成功动画 */
@keyframes success-checkmark {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes success-burst {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* ========== 2. 动画类 ========== */

/* 粒子动画类 */
.particle-float {
  animation: particle-float 6s infinite ease-in-out;
}

.particle-drift {
  animation: particle-drift 8s infinite ease-in-out;
}

.pulse-data {
  animation: pulse-data 2s infinite ease-in-out;
}

.data-flow {
  animation: data-flow 3s infinite ease-in-out;
}

/* 缝隙填充动画类 */
.gap-fill {
  animation: gap-fill 2s infinite ease-in-out;
}

.fill-ripple {
  animation: fill-ripple 3s infinite ease-in-out;
}

/* 神经网络动画类 */
.neural-pulse {
  animation: neural-pulse 3s infinite ease-in-out;
}

.neural-connection {
  animation: neural-connection 4s infinite linear;
}

/* 文字动画类 */
.text-gradient-shift {
  background-size: 200% 200%;
  animation: text-gradient-shift 4s infinite ease-in-out;
}

.char-appear {
  animation: char-appear 0.6s ease-out forwards;
}

/* 加载动画类 */
.loading-dots {
  animation: loading-dots 2s infinite ease-in-out;
}

.loading-rotate {
  animation: loading-rotate 2s infinite linear;
}

.loading-scale {
  animation: loading-scale 2s infinite ease-in-out;
}

/* 悬停动画类 */
.hover-glow {
  animation: hover-glow 2s infinite ease-in-out;
}

.hover-lift {
  animation: hover-lift 2s infinite ease-in-out;
}

/* 滚动动画类 */
.slide-in-left {
  animation: slide-in-left 0.8s ease-out forwards;
}

.slide-in-right {
  animation: slide-in-right 0.8s ease-out forwards;
}

.slide-in-up {
  animation: slide-in-up 0.8s ease-out forwards;
}

.slide-in-down {
  animation: slide-in-down 0.8s ease-out forwards;
}

/* 缩放动画类 */
.zoom-in {
  animation: zoom-in 0.6s ease-out forwards;
}

.zoom-out {
  animation: zoom-out 0.6s ease-in forwards;
}

/* 旋转动画类 */
.rotate-360 {
  animation: rotate-360 2s ease-in-out forwards;
}

.rotate-infinite {
  animation: rotate-infinite 8s infinite linear;
}

/* 弹跳动画类 */
.bounce-in {
  animation: bounce-in 1s ease-out forwards;
}

.bounce-gentle {
  animation: bounce-gentle 2s infinite ease-in-out;
}

/* 呼吸动画类 */
.breathe {
  animation: breathe 4s infinite ease-in-out;
}

/* 闪烁动画类 */
.blink {
  animation: blink 2s infinite ease-in-out;
}

.flicker {
  animation: flicker 3s infinite ease-in-out;
}

/* 波浪动画类 */
.wave {
  animation: wave 4s infinite ease-in-out;
}

/* 网格动画类 */
.grid-appear {
  animation: grid-appear 0.8s ease-out forwards;
}

.grid-cell-fill {
  animation: grid-cell-fill 1.5s ease-in-out forwards;
}

/* 连接动画类 */
.connection-draw {
  animation: connection-draw 3s infinite ease-in-out;
}

/* 数据点动画类 */
.data-point-emerge {
  animation: data-point-emerge 1s ease-out forwards;
}

.data-point-hover {
  animation: data-point-hover 2s infinite ease-in-out;
}

/* 打字机动画类 */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--data-cyan);
  white-space: nowrap;
  animation: typewriter 4s steps(40, end) forwards,
            cursor-blink 1s infinite step-end;
}

/* 进度条动画类 */
.progress-fill {
  animation: progress-fill 3s ease-out forwards;
}

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

/* 错误动画类 */
.shake {
  animation: shake 0.5s ease-in-out;
}

.error-pulse {
  animation: error-pulse 1s infinite ease-in-out;
}

/* 成功动画类 */
.success-checkmark {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: success-checkmark 2s ease-in-out forwards;
}

.success-burst {
  animation: success-burst 1s ease-out forwards;
}

/* ========== 3. 延迟动画类 ========== */
.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; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* ========== 4. 缓动函数类 ========== */
.ease-linear { animation-timing-function: linear; }
.ease-ease { animation-timing-function: ease; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
.ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* ========== 5. 循环类 ========== {
.loop-1 { animation-iteration-count: 1; }
.loop-2 { animation-iteration-count: 2; }
.loop-3 { animation-iteration-count: 3; }
.loop-5 { animation-iteration-count: 5; }
.loop-infinite { animation-iteration-count: infinite; }

/* ========== 6. 方向类 ========== */
.reverse { animation-direction: reverse; }
.alternate { animation-direction: alternate; }
.alternate-reverse { animation-direction: alternate-reverse; }

/* ========== 7. 填充模式类 ========== {
.forwards { animation-fill-mode: forwards; }
.backwards { animation-fill-mode: backwards; }
.both { animation-fill-mode: both; }

/* ========== 8. 暂停/播放类 ========== {
.paused { animation-play-state: paused !important; }
.running { animation-play-state: running !important; }

/* ========== 9. 视口动画 ========== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

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

.animate-on-scroll.slide-left {
  transform: translateX(30px);
}

.animate-on-scroll.slide-right {
  transform: translateX(-30px);
}

.animate-on-scroll.scale {
  transform: scale(0.8);
}

.animate-on-scroll.visible {
  transform: translateX(0) translateY(0) scale(1);
}

/* ========== 10. 交互状态动画 ========== */
.interactive-element {
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.interactive-element:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.interactive-element:active {
  transform: translateY(0);
  transition-duration: var(--duration-fast);
}

/* 焦点状态 */
.focusable:focus {
  outline: 2px solid var(--data-cyan);
  outline-offset: 2px;
}

/* 禁用状态 */
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== 11. 特殊效果动画 ========== */

/* 数据传输效果 */
@keyframes data-transmit {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.data-transmit {
  animation: data-transmit 2s infinite ease-in-out;
}

/* 雷达扫描效果 */
@keyframes radar-sweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.radar-sweep {
  animation: radar-sweep 4s infinite linear;
}

/* 心跳效果 */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
}

.heartbeat {
  animation: heartbeat 2s infinite ease-in-out;
}

/* 思考波纹效果 */
@keyframes thinking-ripple {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(4);
  }
}

.thinking-ripple {
  animation: thinking-ripple 3s infinite ease-in-out;
}

/* 数据流动效果 */
@keyframes data-stream {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.data-stream {
  animation: data-stream 8s infinite linear;
}

/* ========== 12. 性能优化 ========== */

/* GPU加速 */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 减少重绘 */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* 包含布局 */
.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

.contain-size {
  contain: size;
}