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

@layer base {
  :root {
    --background: 10 10 10; /* #0A0A0A */
    --foreground: 255 255 255; /* #FFFFFF */
    --card: 10 10 10;
    --card-foreground: 255 255 255;
    --popover: 10 10 10;
    --popover-foreground: 255 255 255;
    --primary: 138 43 226; /* #8A2BE2 */
    --primary-foreground: 255 255 255;
    --secondary: 64 64 64;
    --secondary-foreground: 224 224 224;
    --muted: 64 64 64;
    --muted-foreground: 160 160 160;
    --accent: 138 43 226;
    --accent-foreground: 255 255 255;
    --destructive: 239 68 68;
    --destructive-foreground: 255 255 255;
    --border: 255 255 255 / 0.1;
    --input: 255 255 255 / 0.1;
    --ring: 138 43 226;
    --radius: 1rem;
  }

  .dark {
    --background: 10 10 10;
    --foreground: 255 255 255;
    --card: 10 10 10;
    --card-foreground: 255 255 255;
    --popover: 10 10 10;
    --popover-foreground: 255 255 255;
    --primary: 138 43 226;
    --primary-foreground: 255 255 255;
    --secondary: 64 64 64;
    --secondary-foreground: 224 224 224;
    --muted: 64 64 64;
    --muted-foreground: 160 160 160;
    --accent: 138 43 226;
    --accent-foreground: 255 255 255;
    --destructive: 239 68 68;
    --destructive-foreground: 255 255 255;
    --border: 255 255 255 / 0.1;
    --input: 255 255 255 / 0.1;
    --ring: 138 43 226;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: rgba(138, 43, 226, 0.4);
}

.font-sans {
  font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.font-display {
  font-family: var(--font-montserrat), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #8a2be2, #6a1b9a);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #9a4ae2, #7a2baa);
}

/* Perspective for 3D effects */
.perspective-1000 {
  perspective: 1000px;
}

/* Smooth animations */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

/* Glassmorphism effects */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text animation */
@keyframes gradient-x {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradient-x 6s ease infinite;
}

/* Magnetic button effects */
.magnetic-button {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

/* Floating animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

/* Glow effects */
.glow {
  filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.5));
}

.glow-intense {
  filter: drop-shadow(0 0 40px rgba(138, 43, 226, 0.8));
}

/* Text shadow effects */
.text-glow {
  text-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}

.text-glow-intense {
  text-shadow: 0 0 40px rgba(138, 43, 226, 0.8);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Mobile scroll improvements */
@media (max-width: 768px) {
  .custom-scrollbar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    max-height: 50vh !important;
  }
  
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }
  
  /* Prevent body scroll when modal is open */
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  /* Improve touch scrolling */
  .modal-content {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Prevent scroll propagation on mobile */
  .modal-content * {
    touch-action: pan-y;
  }
  
  /* Improve scroll performance */
  .custom-scrollbar {
    will-change: scroll-position;
    transform: translateZ(0);
  }
  
  /* Force scroll to work on mobile */
  .custom-scrollbar {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Alternative scroll solution for mobile */
  .mobile-scroll-container {
    position: relative;
    overflow: hidden;
  }
  
  .mobile-scroll-content {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: 60vh;
  }
}