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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-security-darker text-gray-100 antialiased;
  }
}

@layer components {
  .gradient-text {
    @apply bg-gradient-to-r from-security-accent via-green-400 to-emerald-400 bg-clip-text text-transparent;
  }
  
  .gradient-bg {
    @apply bg-gradient-to-br from-security-darker via-security-dark to-security-darker;
  }
  
  .security-glow {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.3), 0 0 60px rgba(0, 255, 136, 0.1);
  }
  
  .card-hover {
    @apply transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-security-accent/20;
  }
  
  .section-padding {
    @apply py-24 px-4 sm:px-6 lg:px-8;
  }
  
  .glass-effect {
    @apply bg-security-card/80 backdrop-blur-lg border border-security-border/50;
  }
  
  .neon-border {
    @apply border-2 border-security-accent/40 shadow-lg shadow-security-accent/20;
  }
  
  .card-dark {
    @apply bg-security-card border border-security-border rounded-2xl;
  }

  /* Animations de fond */
  .animated-grid {
    background-image: 
      linear-gradient(to right, rgba(26, 26, 36, 0.3) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(26, 26, 36, 0.3) 1px, transparent 1px);
    background-size: 4rem 4rem;
    animation: gridMove 20s linear infinite;
  }

  .floating-blob {
    animation: float 20s ease-in-out infinite;
  }

  .pulse-glow {
    animation: pulseGlow 4s ease-in-out infinite;
  }

  .gradient-shift {
    animation: gradientShift 8s ease infinite;
    background-size: 200% 200%;
  }
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 4rem 4rem;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(-30px) translateX(20px);
  }
  66% {
    transform: translateY(20px) translateX(-20px);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

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