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

:root {
  color-scheme: dark;
}

/* Optimize animations and transitions */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    @apply antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Reduce motion if user prefers it */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilities {
  .bg-grid-pattern {
    @apply [background-size:24px_24px] [background-image:linear-gradient(to_right,#6366f1_1px,transparent_1px),linear-gradient(to_bottom,#6366f1_1px,transparent_1px)];
  }

  .animate-fade-in {
    @apply motion-safe:animate-[fade-in_1s_ease-out_forwards];
  }

  .animate-gradient {
    @apply bg-[length:200%_auto] motion-safe:animate-[gradient_8s_linear_infinite];
  }

  .animate-wave {
    @apply motion-safe:animate-[wave_2s_ease-in-out_infinite];
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes wave {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.animate-floating {
  @apply motion-safe:animate-[floating_4s_ease-in-out_infinite];
}

/* Optimize mobile performance */
html, body {
  overflow-x: hidden;
  width: 100%;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* Optimize images and transitions */
img {
  @apply transform-gpu;
}

.transition-transform,
.transition-all {
  @apply transform-gpu;
}