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

@layer base {
  :root {
    /* Base */
    --background: 0 0% 4%; /* #0a0a0a */
    --foreground: 210 20% 96%; /* #f3f4f6 */
    
    /* Surfaces */
    --card: 0 0% 7%;
    --card-foreground: 210 20% 96%;
    --popover: 0 0% 7%;
    --popover-foreground: 210 20% 96%;
    
    /* Brand Tokens */
    --primary: 38 92% 50%; /* #f59e0b Gold */
    --primary-foreground: 0 0% 4%;
    
    --secondary: 188 95% 44%; /* #06b6d4 Cyan */
    --secondary-foreground: 0 0% 4%;
    
    --accent: 326 79% 60%; /* #ec4899 Magenta */
    --accent-foreground: 210 20% 96%;
    
    --destructive: 0 84% 60%; /* #ef4444 Red */
    --destructive-foreground: 210 20% 96%;

    --success: 142 71% 45%; /* #22c55e Green */
    --success-foreground: 0 0% 4%;
    
    /* Structural */
    --muted: 0 0% 12%;
    --muted-foreground: 215 14% 65%;
    
    --border: 0 0% 15%;
    --input: 0 0% 12%;
    --ring: 38 92% 50%;
    
    --radius: 0.75rem;

    /* Pain Section Tokens */
    --pain-bg: 350 80% 10%;
    --pain-accent: 350 100% 50%;

    /* Image Aspect Ratios */
    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
  }

  .dark {
    --background: 0 0% 4%;
    --foreground: 210 20% 96%;
    --card: 0 0% 7%;
    --card-foreground: 210 20% 96%;
    --popover: 0 0% 7%;
    --popover-foreground: 210 20% 96%;
    --primary: 38 92% 50%;
    --primary-foreground: 0 0% 4%;
    --secondary: 188 95% 44%;
    --secondary-foreground: 0 0% 4%;
    --accent: 326 79% 60%;
    --accent-foreground: 210 20% 96%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 20% 96%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 4%;
    --muted: 0 0% 12%;
    --muted-foreground: 215 14% 65%;
    --border: 0 0% 15%;
    --input: 0 0% 12%;
    --ring: 38 92% 50%;
    --pain-bg: 350 80% 10%;
    --pain-accent: 350 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
    color-scheme: dark;
  }
  
  body {
    @apply bg-background text-foreground;
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1 {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    text-wrap: balance;
  }

  h2, h3, h4, h5, h6 {
    font-family: 'Space Mono', monospace;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .glass {
    @apply bg-white/[0.03] backdrop-blur-xl border border-white/10;
  }
  
  .neon-border-gold {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: inset 0 0 15px -5px hsl(var(--primary) / 0.3), 0 0 15px -5px hsl(var(--primary) / 0.3);
  }
  
  .neon-border-cyan {
    border-color: hsl(var(--secondary) / 0.5);
    box-shadow: inset 0 0 15px -5px hsl(var(--secondary) / 0.3), 0 0 15px -5px hsl(var(--secondary) / 0.3);
  }
  
  .neon-border-magenta {
    border-color: hsl(var(--accent) / 0.5);
    box-shadow: inset 0 0 15px -5px hsl(var(--accent) / 0.3), 0 0 15px -5px hsl(var(--accent) / 0.3);
  }

  .neon-border-green {
    border-color: hsl(var(--success) / 0.5);
    box-shadow: inset 0 0 15px -5px hsl(var(--success) / 0.3), 0 0 15px -5px hsl(var(--success) / 0.3);
  }

  .neon-glow-primary {
    box-shadow: 0 0 20px -5px hsl(var(--primary) / 0.6), 0 0 40px -10px hsl(var(--primary) / 0.4);
  }
  
  .neon-glow-cyan {
    box-shadow: 0 0 20px -5px hsl(var(--secondary) / 0.6), 0 0 40px -10px hsl(var(--secondary) / 0.4);
  }
  
  .neon-text-gold {
    text-shadow: 0 0 20px hsl(var(--primary) / 0.5);
  }
  
  .neon-text-magenta {
    color: hsl(var(--accent));
    text-shadow: 0 0 20px hsl(var(--accent) / 0.5);
  }

  .neon-text-green {
    color: hsl(var(--success));
    text-shadow: 0 0 20px hsl(var(--success) / 0.5);
  }

  .pulse-fast {
    animation: pulse-fast 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .aspect-square-container {
    aspect-ratio: var(--aspect-square);
  }
  
  .aspect-video-container {
    aspect-ratio: var(--aspect-video);
  }

  @keyframes pulse-fast {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
  }

  /* Dynamic Musical Background Animations */
  .bg-gradient-shift {
    background: linear-gradient(
      -45deg, 
      hsl(var(--background)), 
      hsl(var(--primary) / 0.05), 
      hsl(var(--secondary) / 0.05), 
      hsl(var(--accent) / 0.05), 
      hsl(var(--background))
    );
    /* Make gradient layer oversized so translation stays bounded */
    background-size: 100% 100%;
    animation: gradient-shift 15s linear infinite alternate;
  }

  @keyframes gradient-shift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-25%, -25%); }
  }

  .audio-wave-bar {
    animation: audio-wave 1.2s ease-in-out infinite alternate;
    transform-origin: bottom;
  }

  @keyframes audio-wave {
    0% { transform: scaleY(0.1); opacity: 0.3; }
    50% { transform: scaleY(1); opacity: 0.8; }
    100% { transform: scaleY(0.1); opacity: 0.3; }
  }

  /* Pain Section Animations */
  .bg-pain-lines {
    background-image: repeating-linear-gradient(
      45deg,
      hsl(var(--pain-accent) / 0.03) 0px,
      hsl(var(--pain-accent) / 0.03) 1px,
      transparent 1px,
      transparent 20px
    );
    animation: slide-pain-lines 15s linear infinite;
  }

  @keyframes slide-pain-lines {
    0% { transform: translate(0, 0); }
    /* Pattern repeats consistently, translation loops visual properly */
    100% { transform: translate(100px, 100px); }
  }

  /* Custom Audio Player Styling */
  .custom-audio-player {
    width: 100%;
    height: 54px;
    border-radius: 12px;
    outline: none;
    filter: invert(1) hue-rotate(180deg) contrast(1.2);
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }
  
  .custom-audio-player:hover {
    opacity: 1;
  }
}