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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    background-color: #0a0a1a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  ::selection {
    background-color: rgba(139, 92, 246, 0.4);
    color: white;
  }
}

@layer components {
  .gradient-text {
    @apply bg-gradient-to-r from-web4-blue via-web4-purple to-web4-cyan bg-clip-text text-transparent;
  }

  .shimmer-text {
    background: linear-gradient(90deg, #0a0a1a 0%, #3b82f6 50%, #8b5cf6 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
    position: relative;
  }

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

  .card {
    @apply bg-web4-card/80 backdrop-blur-sm border border-white/5 rounded-2xl p-8 
           hover:border-web4-purple/30 transition-all duration-500;
  }

  .card-hover {
    @apply card hover:-translate-y-1 hover:shadow-lg hover:shadow-web4-purple/10;
  }

  .btn-primary {
    @apply bg-gradient-to-r from-web4-blue to-web4-purple text-white px-8 py-4 rounded-xl 
           font-semibold transition-all duration-300 shadow-lg shadow-web4-purple/25
           hover:shadow-xl hover:shadow-web4-purple/40 hover:scale-[1.02];
  }

  .btn-secondary {
    @apply border border-white/20 text-gray-300 px-8 py-4 rounded-xl font-semibold 
           transition-all duration-300 hover:border-web4-purple/50 hover:bg-white/5;
  }

  .section-title {
    @apply text-3xl md:text-4xl font-bold text-center mb-4;
  }

  .section-subtitle {
    @apply text-gray-400 text-center max-w-2xl mx-auto mb-12 text-lg;
  }

  .hero-glow {
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, 0.15), transparent);
  }
}

/* Animated gradient orbs for background */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  pointer-events: none;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: #8b5cf6;
  top: -200px;
  right: -200px;
  animation: float 8s ease-in-out infinite;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: #3b82f6;
  bottom: -100px;
  left: -100px;
  animation: float 10s ease-in-out infinite reverse;
}

.orb-3 {
  width: 300px;
  height: 300px;
  background: #06b6d4;
  top: 50%;
  left: 50%;
  animation: float 12s ease-in-out infinite;
}

/* Grid pattern overlay */
.grid-pattern {
  background-image: 
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Prose styles for articles */
.article-content h2 {
  @apply text-2xl md:text-3xl font-bold mt-16 mb-6 text-white;
}

.article-content h3 {
  @apply text-xl md:text-2xl font-semibold mt-10 mb-4 text-gray-100;
}

.article-content p {
  @apply text-gray-300 leading-relaxed mb-6 text-lg;
}

.article-content ul, .article-content ol {
  @apply text-gray-300 mb-6 space-y-3 pl-6;
}

.article-content ul li {
  @apply list-disc;
}

.article-content ol li {
  @apply list-decimal;
}

.article-content blockquote {
  @apply border-l-4 border-web4-purple pl-6 py-2 my-8 italic text-gray-400 bg-web4-purple/5 rounded-r-lg;
}

.article-content strong {
  @apply text-white font-semibold;
}

.article-content a {
  @apply text-web4-blue hover:text-web4-purple transition-colors underline decoration-web4-blue/30 hover:decoration-web4-purple/50;
}

/* FAQ details animation */
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: '+';
  @apply text-web4-purple font-bold text-xl mr-3 inline-block transition-transform duration-300;
}

details[open] summary::before {
  content: '−';
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
@keyframes rainbowFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(99,102,241,0.7)) drop-shadow(0 0 44px rgba(139,92,246,0.4)) drop-shadow(0 0 88px rgba(236,72,153,0.2)); }
  25% { filter: drop-shadow(0 0 28px rgba(236,72,153,0.7)) drop-shadow(0 0 55px rgba(244,63,94,0.4)) drop-shadow(0 0 88px rgba(251,146,60,0.2)); }
  50% { filter: drop-shadow(0 0 28px rgba(34,211,238,0.7)) drop-shadow(0 0 55px rgba(52,211,153,0.4)) drop-shadow(0 0 88px rgba(99,102,241,0.2)); }
  75% { filter: drop-shadow(0 0 28px rgba(251,146,60,0.7)) drop-shadow(0 0 55px rgba(250,204,21,0.4)) drop-shadow(0 0 88px rgba(34,211,238,0.2)); }
}
.rainbow-flow-glow {
  background: linear-gradient(
    90deg,
    #6366f1, #8b5cf6, #ec4899, #f43f5e, #fb923c, #facc15,
    #34d399, #22d3ee, #6366f1, #8b5cf6, #ec4899
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowFlow 4s linear infinite, glowPulse 4s ease-in-out infinite;
}