/**
 * Tailwind Custom Keyframes & Layers
 * Defines @tailwind directives and custom component layers
 */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@layer components {
  .glass-effect {
    @apply bg-white/10 backdrop-blur-lg border border-white/20 rounded-lg;
  }

  .gradient-primary {
    @apply bg-gradient-to-r from-blue-500 to-purple-600;
  }

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

  .glow-effect {
    @apply shadow-lg shadow-blue-500/50;
  }
}