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

@layer base {
  body {
    @apply bg-[#050510] text-[#e0e7ff] overflow-x-hidden;
    font-family: 'Space Grotesk', sans-serif;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #0f172a; 
  }
  ::-webkit-scrollbar-thumb {
    background: #4f46e5; 
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #6366f1; 
  }
}

@layer utilities {
  .perspective-1000 {
    perspective: 1000px;
  }
  .preserve-3d {
    transform-style: preserve-3d;
  }
}

/* --- Space/Sci-Fi Animations --- */

/* Warp In */
@keyframes warpIn {
  0% {
    opacity: 0;
    transform: scale(1.2) translateZ(-50px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0);
  }
}

/* Warp Out */
@keyframes warpOut {
  0% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateZ(-50px);
    filter: blur(10px);
  }
}

/* Star Float */
@keyframes starFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Slide In Space */
@keyframes slideInSpace {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Hologram */
@keyframes hologram {
  0% { opacity: 0; transform: scaleY(0.1); }
  40% { opacity: 0.5; transform: scaleY(1.1); }
  60% { opacity: 0.3; transform: scaleY(0.95); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* Glow Pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.2); }
  50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 10px rgba(168, 85, 247, 0.3); }
}

.animate-warp-in {
  animation: warpIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-warp-out {
  animation: warpOut 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

.animate-star-float {
  animation: starFloat 6s ease-in-out infinite;
}

.animate-slide-in-space {
  animation: slideInSpace 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.animate-hologram {
  animation: hologram 0.5s ease-out forwards;
}

.animate-glow-pulse {
  animation: glowPulse 3s infinite;
}