@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, #root {
  height: 100%;
  margin: 0;
  background-color: #020617; /* 匹配你的 gray-950 背景色 */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 科幻文字特效 */
@keyframes text-glow {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(16, 185, 129, 0.5),
      0 0 20px rgba(16, 185, 129, 0.3),
      0 0 30px rgba(16, 185, 129, 0.2),
      0 0 40px rgba(6, 182, 212, 0.1);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(16, 185, 129, 0.8),
      0 0 30px rgba(16, 185, 129, 0.6),
      0 0 40px rgba(16, 185, 129, 0.4),
      0 0 50px rgba(6, 182, 212, 0.3);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
  }
  50% {
    opacity: 0.9;
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(16, 185, 129, 0.8));
  }
}

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

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

.text-shimmer {
  background: linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.8) 0%,
    rgba(6, 182, 212, 1) 50%,
    rgba(16, 185, 129, 0.8) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

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

.gradient-animated {
  background: linear-gradient(
    -45deg,
    #10b981,
    #06b6d4,
    #10b981,
    #34d399
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}