/* 动画效果 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(3deg);
  }
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.6);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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

.animate-rotate-slow {
  animation: rotate-slow 30s linear infinite;
}

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

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

.section-animate {
  animation: slideUp 0.8s ease forwards;
}

/* 3D变换 */
.preserve-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* 隐藏滚动条但保持滚动功能 */
::-webkit-scrollbar {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: none;
}

/* IE 和 Edge */
* {
  -ms-overflow-style: none;
}

/* 选择文本样式 */
::selection {
  background: rgba(99, 102, 241, 0.3);
  color: white;
}

/* 增强阅读体验 */
p {
  line-height: 1.7;
}

/* 统计信息样式 */
.stats-footer {
  font-family: "Inter", system-ui, sans-serif;
}

.stat-item {
  transition: all 0.3s ease;
  transform: translateY(0);
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.label {
  font-weight: 600;
  color: #6366f1;
  transition: color 0.3s ease;
}

.stat-item:hover .label {
  color: #8b5cf6;
}

/* 粒子背景容器 */
#particles-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .stats-footer {
    font-size: 12px;
  }

  .stat-item {
    display: inline-block;
    margin: 2px;
  }
}

/* 平滑过渡 */
* {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* 焦点样式 */
*:focus {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* 禁用文本选择动画 */
.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}