/* ==========================================================================
   Utilities - 유틸리티 클래스
   ========================================================================== */

@layer utilities {
  /* Background Patterns */
  .bg-grid-pattern {
    background-image:
      linear-gradient(to right, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .bg-circuit-grid {
    background-image:
      linear-gradient(to right, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  /* Text Gradient */
  .text-gradient {
    background: linear-gradient(to right, #3b82f6, #06b6d4, #3b82f6);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient 5s linear infinite;
  }

  .animate-gradient {
    background-size: 200% auto;
    animation: gradient 5s linear infinite;
  }

  /* Animations */
  .animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }

  .animate-float-slow {
    animation: float1 10s ease-in-out infinite;
  }

  .animate-float-slower {
    animation: float2 15s ease-in-out infinite;
  }

  .animate-bounce-slow {
    animation: bounce-slow 2s infinite;
  }
}

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

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

@keyframes float1 {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-30px) translateX(20px);
  }
}

@keyframes float2 {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(20px) translateX(-30px);
  }
}

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Marquee Animation */
.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}