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

@layer base {
  html {
    font-family: 'Noto Sans', sans-serif;
    color: #212121; /* text-brand-text */
    background-color: #FAFAFA; /* bg-brand-bg */
  }
}

@layer utilities {
  /* Spezielle Klasse für alle H1, H2, H3 */
  .font-industrial {
    font-family: 'Noto Sans', sans-serif;
    font-variation-settings: 'wdth' 62.5, 'wght' 600; /* Extra Condensed + SemiBold */
  }

  /* Dual-fade container for Apple Music/Spotify style song lyrics scroll port */
  .dual-fade-container {
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    scrollbar-width: none; /* Hide scrollbar for standard Firefox */
  }

  .dual-fade-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
  }

  /* Nebula cloud transition effect (text emerging from fog) */
  .lyrics-cloud {
    animation: lyricsCloudFade 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes lyricsCloudFade {
    0% {
      opacity: 0;
      filter: blur(12px);
      transform: translateY(8px);
    }
    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
  }

  /* Subtle breathing glow animation for high Priority 1 confirm check button */
  .animate-subtle-glow {
    animation: subtleGlow 2.5s infinite ease-in-out;
  }

  @keyframes subtleGlow {
    0%, 100% {
      box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2), 0 0 0 4px rgba(16, 185, 129, 0.1);
      transform: scale(1);
    }
    50% {
      box-shadow: 0 15px 25px -3px rgba(16, 185, 129, 0.4), 0 0 0 8px rgba(16, 185, 129, 0.2);
      transform: scale(1.03);
    }
  }
}