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

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Exo:wght@300;400;500;600;700&display=swap');

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 180 100% 95%;

    --card: 240 10% 4%;
    --card-foreground: 180 100% 95%;

    --popover: 240 10% 4%;
    --popover-foreground: 180 100% 95%;

    --primary: 270 76% 52%;
    --primary-foreground: 0 0% 100%;

    --secondary: 328 100% 50%;
    --secondary-foreground: 0 0% 100%;

    --muted: 240 10% 10%;
    --muted-foreground: 180 20% 60%;

    --accent: 186 100% 50%;
    --accent-foreground: 0 0% 0%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 270 50% 30%;
    --input: 240 10% 10%;
    --ring: 270 76% 52%;

    --radius: 0.75rem;

    /* Custom CipherX Colors */
    --cyber-purple: 270 76% 52%;
    --cyber-pink: 328 100% 50%;
    --cyber-blue: 186 100% 50%;
    --cyber-green: 150 100% 50%;
    --cyber-dark: 240 10% 4%;
    --cyber-darker: 0 0% 0%;

    /* Glow colors */
    --glow-purple: 0 0 20px hsl(270 76% 52% / 0.5), 0 0 40px hsl(270 76% 52% / 0.3);
    --glow-pink: 0 0 20px hsl(328 100% 50% / 0.5), 0 0 40px hsl(328 100% 50% / 0.3);
    --glow-blue: 0 0 20px hsl(186 100% 50% / 0.5), 0 0 40px hsl(186 100% 50% / 0.3);

    --sidebar-background: 240 10% 4%;
    --sidebar-foreground: 180 100% 95%;
    --sidebar-primary: 270 76% 52%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 10% 10%;
    --sidebar-accent-foreground: 180 100% 95%;
    --sidebar-border: 270 50% 30%;
    --sidebar-ring: 270 76% 52%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
    background: linear-gradient(180deg, hsl(0 0% 0%) 0%, hsl(240 20% 3%) 100%);
    min-height: 100vh;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }
}

@layer components {
  /* Neon Glow Effects */
  .neon-glow-purple {
    box-shadow: 0 0 5px hsl(var(--cyber-purple)),
                0 0 20px hsl(var(--cyber-purple) / 0.5),
                0 0 40px hsl(var(--cyber-purple) / 0.3);
  }

  .neon-glow-pink {
    box-shadow: 0 0 5px hsl(var(--cyber-pink)),
                0 0 20px hsl(var(--cyber-pink) / 0.5),
                0 0 40px hsl(var(--cyber-pink) / 0.3);
  }

  .neon-glow-blue {
    box-shadow: 0 0 5px hsl(var(--cyber-blue)),
                0 0 20px hsl(var(--cyber-blue) / 0.5),
                0 0 40px hsl(var(--cyber-blue) / 0.3);
  }

  /* Glass Card */
  .glass-card {
    @apply bg-card/40 backdrop-blur-xl border border-border/50 rounded-xl;
    background: linear-gradient(
      135deg,
      hsl(var(--cyber-dark) / 0.8) 0%,
      hsl(var(--cyber-dark) / 0.4) 100%
    );
  }

  .glass-card-hover {
    @apply glass-card transition-all duration-300;
  }

  .glass-card-hover:hover {
    @apply border-primary/50;
    box-shadow: 0 0 30px hsl(var(--cyber-purple) / 0.3),
                inset 0 0 20px hsl(var(--cyber-purple) / 0.1);
    transform: translateY(-2px);
  }

  /* Neon Input */
  .neon-input {
    @apply bg-input/50 border border-border/50 rounded-lg px-4 py-3 text-foreground placeholder:text-muted-foreground focus:outline-none transition-all duration-300;
  }

  .neon-input:focus {
    @apply border-primary;
    box-shadow: 0 0 10px hsl(var(--cyber-purple) / 0.5),
                0 0 20px hsl(var(--cyber-purple) / 0.2);
  }

  /* Neon Button */
  .neon-button {
    @apply relative overflow-hidden px-6 py-3 rounded-lg font-display font-semibold text-primary-foreground transition-all duration-300;
    background: linear-gradient(135deg, hsl(var(--cyber-purple)) 0%, hsl(var(--cyber-pink)) 100%);
  }

  .neon-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px hsl(var(--cyber-purple) / 0.6),
                0 0 40px hsl(var(--cyber-pink) / 0.4);
  }

  .neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
  }

  .neon-button:hover::before {
    left: 100%;
  }

  /* Text Gradients */
  .text-gradient-primary {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(var(--cyber-purple)) 0%, hsl(var(--cyber-pink)) 100%);
  }

  .text-gradient-accent {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(var(--cyber-blue)) 0%, hsl(var(--cyber-purple)) 100%);
  }

  /* Hologram Effect */
  .hologram {
    position: relative;
  }

  .hologram::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      45deg,
      transparent 30%,
      hsl(var(--cyber-blue) / 0.1) 50%,
      transparent 70%
    );
    animation: hologram-shine 3s ease-in-out infinite;
  }

  /* Matrix Rain Background */
  .matrix-bg {
    background-image: 
      linear-gradient(0deg, hsl(0 0% 0%) 0%, transparent 50%),
      repeating-linear-gradient(
        0deg,
        transparent 0px,
        hsl(var(--cyber-green) / 0.03) 1px,
        transparent 2px
      );
    background-size: 100% 100%, 20px 20px;
  }

  /* Cyber Grid */
  .cyber-grid {
    background-image: 
      linear-gradient(hsl(var(--cyber-purple) / 0.1) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--cyber-purple) / 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
  }

  /* Pulse Animation for AI Icon */
  .pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }

  /* Terminal Style */
  .terminal {
    @apply bg-cyber-darker border border-cyber-green/30 rounded-lg font-mono text-sm;
    box-shadow: 0 0 20px hsl(var(--cyber-green) / 0.2);
  }

  .terminal-cursor {
    @apply inline-block w-2 h-4 bg-cyber-green ml-1;
    animation: blink 1s step-end infinite;
  }
}

@layer utilities {
  .font-display {
    font-family: 'Orbitron', sans-serif;
  }

  .font-body {
    font-family: 'Space Grotesk', sans-serif;
  }

  .font-exo {
    font-family: 'Exo', sans-serif;
  }

  .bg-cyber-darker {
    background-color: hsl(0 0% 0%);
  }

  .bg-cyber-dark {
    background-color: hsl(var(--cyber-dark));
  }

  .border-cyber-green {
    border-color: hsl(var(--cyber-green));
  }

  .text-cyber-green {
    color: hsl(var(--cyber-green));
  }

  .text-cyber-blue {
    color: hsl(var(--cyber-blue));
  }

  .text-cyber-pink {
    color: hsl(var(--cyber-pink));
  }

  .text-cyber-purple {
    color: hsl(var(--cyber-purple));
  }

  .scrollbar-cyber {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--cyber-purple)) transparent;
  }

  .scrollbar-cyber::-webkit-scrollbar {
    width: 6px;
  }

  .scrollbar-cyber::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-cyber::-webkit-scrollbar-thumb {
    background: hsl(var(--cyber-purple));
    border-radius: 3px;
  }
}

/* Keyframe Animations */
@keyframes hologram-shine {
  0%, 100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px hsl(var(--cyber-purple) / 0.5),
                0 0 40px hsl(var(--cyber-pink) / 0.3);
  }
  50% {
    box-shadow: 0 0 30px hsl(var(--cyber-purple) / 0.8),
                0 0 60px hsl(var(--cyber-pink) / 0.5);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

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

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes scan-line {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

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

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes matrix-rain {
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

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

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 0.6s ease-out forwards;
}
