@layer utilities {
  .float { animation: float 6s ease-in-out infinite; }
  .twinkle { animation: twinkle 3s ease-in-out infinite; }
  .space-object { position: absolute; border-radius: 50%; }
  .tool-card {
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  .carousel-item {
    transition: transform 0.5s ease-in-out;
  }
  .text-glow {
    text-shadow: 0 0 15px rgba(126, 182, 255, 0.5);
  }
}

@keyframes float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes twinkle {
  0%,100% { opacity: 0.3; }
  50% { opacity: 1; }
}

body {
  background: linear-gradient(135deg, #021942, #0B3D91);
}

/* 自定义颜色变量 */
:root {
  --space-darkblue: #0A1F44;
  --space-blue: #0B3D91;
  --space-purple: #3C096C;
  --space-pink: #C77DFF;
  --space-teal: #2A9D8F;
  --space-amber: #F59E0B;
  --space-emerald: #10B981;
  --space-rose: #F43F5E;
  --space-cyan: #06B6D4;
  --space-indigo: #6366F1;
  --space-orange: #F97316;
  --space-yellow: #EAB308;
  --space-red: #EF4444;
  --space-green: #22C55E;
}

/* 性能优化样式 */
.carousel-dot {
  transition: background-color 0.3s ease;
}

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

/* 懒加载元素 */
.lazy-load {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lazy-load.loaded {
  opacity: 1;
}