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

/* Gaming Theme Custom Styles */
@layer base {
  html {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-cod-darker text-gray-100;
  }
}

@layer components {
  .gaming-text-glow {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
  }
  
  .gaming-glow {
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.3);
  }
  
  .btn-gaming {
    @apply bg-cod-green hover:bg-cod-green-dark text-black font-bold py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .btn-gaming-outline {
    @apply border-2 border-cod-green text-cod-green hover:bg-cod-green hover:text-black font-bold py-2 px-4 rounded-lg transition-all duration-200;
  }
  
  .card-gaming {
    @apply bg-cod-gray border border-cod-light rounded-lg p-6 gaming-glow;
  }
  
  .input-gaming {
    @apply bg-cod-gray border border-cod-light text-gray-100 rounded-lg px-4 py-2 focus:border-cod-green focus:ring-2 focus:ring-cod-green/20 transition-all duration-200;
  }
  
  .bg-gaming-gradient {
    background: linear-gradient(135deg, #ff6600 0%, #e55a00 100%);
  }
  
  .bg-dark-gradient {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
  }
  
  .level-progress {
    @apply bg-gray-700 rounded-full h-2 overflow-hidden;
  }
  
  .level-progress-bar {
    @apply bg-cod-green h-full transition-all duration-500 ease-out;
  }

  /* New Gaming Components */
  .gaming-button {
    @apply bg-gradient-to-r from-cod-green to-cod-green-dark text-black font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-gaming-lg;
  }

  .gaming-card {
    @apply bg-cod-gray border border-cod-light rounded-xl p-6 backdrop-blur-sm transition-all duration-300 hover:border-cod-green hover:shadow-gaming;
  }

  .gaming-textarea {
    @apply bg-cod-gray border border-cod-light text-gray-100 rounded-lg px-4 py-3 focus:border-cod-green focus:ring-2 focus:ring-cod-green/20 transition-all duration-200 resize-none;
  }

  .advanced-menu-item {
    @apply text-gray-300 hover:text-cod-green px-4 py-2 text-sm font-medium transition-colors duration-200 block;
  }

  .advanced-menu-item.active {
    @apply text-cod-green bg-cod-green/10 rounded-lg;
  }

  .btn-secondary {
    @apply bg-cod-gray border border-cod-light text-gray-100 hover:bg-cod-light hover:text-cod-green transition-all duration-200 font-medium rounded-lg;
  }

  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium transition-all duration-200 rounded-lg;
  }

  /* New Homepage Animations */
  .hero-particle {
    @apply absolute w-2 h-2 bg-cod-green rounded-full animate-pulse;
  }

  .floating-card {
    animation: float 6s ease-in-out infinite;
  }

  .floating-card:nth-child(odd) {
    animation-delay: -3s;
  }

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

  .border-3 {
    border-width: 3px;
  }

  .parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .neon-text {
    text-shadow: 
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor,
      0 0 20px currentColor;
  }

  .gradient-text {
    background: linear-gradient(45deg, #ff6600, #ffcc00, #ff6600);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
  }

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

  .scroll-indicator {
    animation: scrollBounce 2s infinite;
  }

  @keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }
}

@layer utilities {
  .text-shadow-gaming {
    text-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
  }
  
  .animation-delay-75 {
    animation-delay: 75ms;
  }
  
  .animation-delay-150 {
    animation-delay: 150ms;
  }
  
  .animation-delay-300 {
    animation-delay: 300ms;
  }

  .animation-delay-500 {
    animation-delay: 500ms;
  }

  .animation-delay-700 {
    animation-delay: 700ms;
  }

  .animation-delay-1000 {
    animation-delay: 1000ms;
  }

  /* Custom scroll behavior */
  .smooth-scroll {
    scroll-behavior: smooth;
  }

  /* Custom backdrop blur */
  .backdrop-blur-xl {
    backdrop-filter: blur(24px);
  }

  /* Modern Form Components */
  .floating-label-group {
    @apply relative;
  }

  .floating-label-input {
    @apply w-full px-4 pt-6 pb-2 bg-cod-gray border border-cod-light rounded-lg text-gray-100 placeholder-transparent focus:border-cod-green focus:ring-2 focus:ring-cod-green/20 transition-all duration-200;
  }

  .floating-label {
    @apply absolute left-4 top-2 text-xs text-gray-400 transition-all duration-200 pointer-events-none;
  }

  .floating-label-input:placeholder-shown + .floating-label {
    @apply top-4 text-sm text-gray-500;
  }

  .floating-label-input:focus + .floating-label,
  .floating-label-input:not(:placeholder-shown) + .floating-label {
    @apply top-2 text-xs text-cod-green;
  }

  /* Enhanced Select Dropdown */
  .gaming-select {
    @apply w-full px-4 py-3 bg-cod-gray border border-cod-light rounded-lg text-gray-100 focus:border-cod-green focus:ring-2 focus:ring-cod-green/20 transition-all duration-200 appearance-none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ff6600' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  .gaming-select option {
    @apply bg-cod-dark text-gray-100 py-2;
    color: #f1f5f9 !important;
    background-color: #1a1a1a !important;
  }

  .gaming-select option:checked {
    @apply bg-cod-green text-black;
    background-color: #ff6600 !important;
    color: #000000 !important;
  }

  .gaming-select option:hover {
    @apply bg-cod-light text-cod-green;
    background-color: #2a2a2a !important;
    color: #ff6600 !important;
  }

  /* Fix dropdown readability across all browsers */
  .gaming-select {
    color: #f1f5f9;
    background-color: #1a1a1a;
  }

  .gaming-select:focus option {
    color: #f1f5f9 !important;
    background-color: #1a1a1a !important;
  }

  .gaming-select:focus option:checked {
    background-color: #ff6600 !important;
    color: #000000 !important;
  }

  /* Enhanced Button Styles */
  .btn-modern {
    @apply relative overflow-hidden px-6 py-3 font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary-modern {
    @apply btn-modern bg-gradient-to-r from-cod-green to-cod-green-dark text-black hover:shadow-gaming-lg focus:ring-cod-green;
  }

  .btn-secondary-modern {
    @apply btn-modern bg-cod-gray border border-cod-light text-gray-100 hover:bg-cod-light hover:text-cod-green focus:ring-cod-green/50;
  }

  /* Form Validation Styles */
  .form-error {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500/20;
  }

  .form-success {
    @apply border-green-500 focus:border-green-500 focus:ring-green-500/20;
  }

  .error-message {
    @apply text-red-400 text-sm mt-1 flex items-center space-x-1;
  }

  .success-message {
    @apply text-green-400 text-sm mt-1 flex items-center space-x-1;
  }

  /* Card Hover Effects */
  .card-hover {
    @apply transition-all duration-300 hover:transform hover:scale-105 hover:shadow-gaming;
  }

  /* Enhanced Gaming Input with Icon Support */
  .input-with-icon {
    @apply relative;
  }

  .input-with-icon input {
    @apply pl-12;
  }

  .input-icon {
    @apply absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400;
  }

  /* Loading States */
  .btn-loading {
    @apply opacity-75 cursor-not-allowed;
  }

  .btn-loading::after {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse;
  }

  /* Enhanced Responsive Grid */
  .responsive-grid {
    @apply grid gap-6;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  /* Better Focus States */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-cod-green/50 focus:border-cod-green;
  }

  /* Enhanced Floating Labels for Contact Forms */
  .floating-labels .floating-label {
    @apply absolute left-4 top-2 text-xs text-gray-400 transition-all duration-200 pointer-events-none;
  }
  
  .floating-labels input:placeholder-shown + label,
  .floating-labels textarea:placeholder-shown + label,
  .floating-labels select:not([value]):invalid + label {
    @apply top-4 text-sm text-gray-500;
  }
  
  .floating-labels input:focus + label,
  .floating-labels input:not(:placeholder-shown) + label,
  .floating-labels textarea:focus + label,
  .floating-labels textarea:not(:placeholder-shown) + label,
  .floating-labels select:focus + label,
  .floating-labels select:valid + label {
    @apply top-2 text-xs text-cod-green;
  }
  
  .floating-labels select {
    @apply gaming-select pt-6 pb-2;
  }
  
  .floating-labels textarea {
    @apply gaming-textarea pt-6 pb-2;
  }
}