/* ==========================================================================
   Berryblue Website
   ========================================================================== */

/* ==========================================================================
   1. IMPORTS & FONTS
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Notable&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* ==========================================================================
   2. DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ========================================================================== */

:root {
  /* Colors - Grays */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Colors - Purples */
  --color-purple-100: #f3e8ff;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;

  /* Colors - Pinks */
  --color-pink-100: #fce7f3;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;

  /* Colors - Blues */
  --color-blue-100: #dbeafe;
  --color-blue-300: #93c5fd;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* Colors - Greens */
  --color-green-100: #dcfce7;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;

  /* Colors - Reds */
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;

  /* Colors - Oranges */
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;

  /* Colors - Indigo */
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;

  /* Colors - Additional */
  --color-black: #000000;
  --color-dark-purple: #1a0a2e;
  --color-red-500: #ef4444;

  /* Brand Colors */
  --color-spotify: #1db954;
  --color-spotify-hover: #1ed760;
  --color-instagram: #e4405f;
  --color-instagram-hover: #d73657;
  --color-soundcloud: #ff5500;
  --color-soundcloud-hover: #e14b00;

  /* Spacing Scale (in rem) */
  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */

  /* Typography Scale */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-mobile: 540px;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 40;
  --z-fixed: 50;
  --z-modal: 60;

  /* Opacity & Alpha Values */
  --opacity-high: 0.95;
  --opacity-medium: 0.9;
  --opacity-low: 0.8;
  --opacity-minimal: 0.3;

  /* Pre-composed rgba values */
  --overlay-dark: rgba(0, 0, 0, 0.6);
  --overlay-light: rgba(0, 0, 0, 0.4);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --text-on-glass: rgba(255, 255, 255, 0.95);
  --text-on-glass-secondary: rgba(255, 255, 255, 0.8);
  --text-on-glass-tertiary: rgba(255, 255, 255, 0.9);
  --red-500-alpha-90: rgba(239, 68, 68, 0.9);
  --red-700-alpha-95: rgba(220, 38, 38, 0.95);
  --white-alpha-30: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   3. CSS RESET & BASE STYLES
   ========================================================================== */

* {
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  background: transparent;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   4. TYPOGRAPHY SYSTEM
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: "Notable", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

/* Special text elements - Only section-title uses Notable, rest use Poppins */
.section-title {
  font-family: "Notable", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hero-title,
.brand-name,
.project-title,
.quote-text,
.highlight-text {
  font-family: "Poppins", sans-serif;
}

/* Typography Utility Classes */
.text-xs {
  font-size: var(--font-size-xs);
}
.text-sm {
  font-size: var(--font-size-sm);
}
.text-base {
  font-size: var(--font-size-base);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-xl {
  font-size: var(--font-size-xl);
}
.text-2xl {
  font-size: var(--font-size-2xl);
}
.text-3xl {
  font-size: var(--font-size-3xl);
}
.text-4xl {
  font-size: var(--font-size-4xl);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}

.leading-tight {
  line-height: var(--line-height-tight);
}
.leading-normal {
  line-height: var(--line-height-normal);
}
.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   5. COLOR SYSTEM
   ========================================================================== */

.text-white {
  color: var(--color-white);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-gray-700 {
  color: var(--color-gray-700);
}
.text-gray-800 {
  color: var(--color-gray-800);
}
.text-gray-900 {
  color: var(--color-gray-900);
}
.text-purple-600 {
  color: var(--color-purple-600);
}
.text-purple-700 {
  color: var(--color-purple-700);
}
.text-pink-700 {
  color: var(--color-pink-700);
}
.text-blue-700 {
  color: var(--color-blue-700);
}
.text-green-700 {
  color: var(--color-green-700);
}

.bg-white {
  background-color: var(--color-white);
}
.bg-black {
  background-color: var(--color-black);
}
.bg-purple-100 {
  background-color: var(--color-purple-100);
}
.bg-pink-100 {
  background-color: var(--color-pink-100);
}
.bg-blue-100 {
  background-color: var(--color-blue-100);
}
.bg-green-100 {
  background-color: var(--color-green-100);
}
.bg-red-600 {
  background-color: var(--color-red-600);
}
.bg-pink-600 {
  background-color: var(--color-pink-600);
}
.bg-green-600 {
  background-color: var(--color-green-600);
}
.bg-orange-600 {
  background-color: var(--color-orange-600);
}
.bg-indigo-600 {
  background-color: var(--color-indigo-600);
}
.bg-blue-600 {
  background-color: var(--color-blue-600);
}

/* ==========================================================================
   6. SPACING SYSTEM
   ========================================================================== */

/* Margins */
.mb-2 {
  margin-bottom: var(--spacing-2);
}
.mb-3 {
  margin-bottom: var(--spacing-3);
}
.mb-4 {
  margin-bottom: var(--spacing-4);
}
.mb-6 {
  margin-bottom: var(--spacing-6);
}
.mb-8 {
  margin-bottom: var(--spacing-8);
}
.mb-12 {
  margin-bottom: var(--spacing-12);
}
.mb-20 {
  margin-bottom: var(--spacing-20);
}
.mt-0 {
  margin-top: 0;
}
.mr-2 {
  margin-right: var(--spacing-2);
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Padding */
.p-6 {
  padding: var(--spacing-6);
}
.p-8 {
  padding: var(--spacing-8);
}
.px-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}
.px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}
.px-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
.px-8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}
.py-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}
.py-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}
.py-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

/* ==========================================================================
   7. LAYOUT SYSTEM
   ========================================================================== */

/* Display */
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

/* Flexbox */
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}

/* Grid */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Gaps */
.gap-2 {
  gap: var(--spacing-2);
}
.gap-4 {
  gap: var(--spacing-4);
}
.gap-6 {
  gap: var(--spacing-6);
}
.gap-8 {
  gap: var(--spacing-8);
}

/* Spacing utilities */
.space-y-2 > * + * {
  margin-top: var(--spacing-2);
}
.space-y-3 > * + * {
  margin-top: var(--spacing-3);
}
.space-y-4 > * + * {
  margin-top: var(--spacing-4);
}

/* ==========================================================================
   8. SIZING SYSTEM
   ========================================================================== */

.w-full {
  width: 100%;
}
.w-6 {
  width: 1.5rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-32 {
  width: 8rem;
}
.w-48 {
  width: 12rem;
}
.h-6 {
  height: 1.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-32 {
  height: 8rem;
}
.h-64 {
  height: 16rem;
}
.min-h-screen {
  min-height: 100vh;
}
.max-w-80rem {
  max-width: 80rem;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   9. POSITIONING
   ========================================================================== */

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ==========================================================================
   10. BORDERS & RADIUS
   ========================================================================== */

.rounded {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-full {
  border-radius: var(--radius-full);
}

.border {
  border-width: 1px;
}
.border-blue-300 {
  border-color: var(--color-blue-300);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-blue-300);
  margin: 0;
}

/* ==========================================================================
   11. OBJECT FIT
   ========================================================================== */

.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}

/* ==========================================================================
   12. TEXT UTILITIES
   ========================================================================== */

.text-center {
  text-align: center;
}
.underline {
  text-decoration: underline;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   13. RESPONSIVE UTILITIES
   ========================================================================== */

@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ==========================================================================
   14. LAYOUT COMPONENTS
   ========================================================================== */

/* Sidenav Container */
#sidenav-container {
  display: grid;
  grid: [stack] 1fr / min-content [stack] 1fr;
  min-height: 100vh;
  gap: 0;
  position: relative;
  z-index: var(--z-base);
}

@media (max-width: 540px) {
  #sidenav-container > * {
    grid-area: stack;
  }
}

/* Main Content */
.main-content {
  padding: var(--spacing-8);
  max-width: 80rem;
  overflow-x: hidden;
  overflow-y: visible;
  color: var(--color-white);
  position: relative;
  z-index: var(--z-base);
}

@media (min-width: 1024px) {
  .main-content {
    padding: 4rem;
  }
}

.content-container {
  max-width: min(42rem, 100%);
  width: 100%;
  box-sizing: border-box;
}

.main-content > section {
  max-width: 100%;
  overflow-x: hidden;
}

.grid {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   15. NAVIGATION COMPONENTS
   ========================================================================== */

/* Hamburger Button */
.hamburger {
  position: fixed;
  bottom: var(--spacing-4);
  right: var(--spacing-4);
  z-index: var(--z-modal);
  padding: var(--spacing-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
  outline: 2px solid var(--white-alpha-30);
}

.hamburger::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white-alpha-30);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-md);
  pointer-events: none;
}

@media (max-width: 540px) {
  .hamburger {
    display: block;
  }

  .hamburger.hidden {
    display: none;
  }
}

.hamburger svg {
  position: relative;
  z-index: 1;
}

.hamburger:is(:hover, :focus) svg > line {
  stroke: var(--color-dark-purple);
}

.hamburger svg > line {
  stroke: var(--color-dark-purple);
}

/* Sidenav */
.sidenav {
  display: grid;
  grid-template-columns: [nav] 2fr [escape] 1fr;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--glass-border);
  padding: 0 var(--spacing-8) var(--spacing-8) var(--spacing-8);
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--z-sticky);
  --duration: 0.6s;
  --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .sidenav {
    --duration: 1ms;
  }
}

@media (max-width: 540px) {
  .sidenav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-fixed);
    visibility: hidden;
    transform: translateX(-100%);
    will-change: transform;
    transition:
      transform var(--duration) var(--easeOutExpo),
      visibility 0s linear var(--duration);
  }
}

@media (max-width: 540px) {
  .sidenav:target {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--duration) var(--easeOutExpo);
  }

  .sidenav:target ~ .main-content {
    visibility: hidden;
  }
}

/* Navigation Content */
.nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.keyring-container {
  position: fixed;
  top: 0;
}

#sidenav-close {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  padding: var(--spacing-2);
  display: none;
}

@media (max-width: 540px) {
  #sidenav-close {
    display: block;
  }
}

.escape {
  grid-area: escape;
  display: none;
}

@media (max-width: 540px) {
  .escape {
    display: block;
  }
}

.nav-link {
  transition: all var(--transition-base);
  color: var(--text-on-glass-tertiary);
  display: block;
  text-decoration: none;
}

.nav-link:hover {
  transform: translateX(4px);
  color: var(--color-white);
}

/* Sidenav text colors */
.sidenav .text-gray-600,
.sidenav .text-gray-700,
.sidenav .text-gray-900 {
  color: var(--text-on-glass-tertiary) !important;
}

.sidenav h1,
.sidenav .brand-name {
  color: var(--color-white);
}

.sidenav svg {
  color: var(--text-on-glass-tertiary);
}

.sidenav a:hover svg {
  color: var(--color-white);
}

/* ==========================================================================
   16. MAIN CONTENT STYLES
   ========================================================================== */

/* High contrast text in main content */
.main-content p,
.main-content .text-gray-600,
.main-content .text-gray-700,
.main-content .text-gray-500 {
  color: var(--text-on-glass) !important;
}

.main-content .text-gray-500 {
  color: var(--text-on-glass-secondary) !important;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  color: var(--color-white);
}

/* Main Content Links */
.main-content a {
  color: var(--text-on-glass);
  text-decoration: underline;
}

.main-content .play-button,
.main-content .play-button-large,
.main-content .cta-button,
.main-content .ticket-button,
.main-content .social-link {
  color: inherit;
  text-decoration: none;
}

.main-content .section-title {
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   17. GLASS CARD COMPONENT
   ========================================================================== */

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  color: var(--color-white);
  border-radius: var(--radius-lg);

  /* Semantic color variables for glass card context */
  --text-primary: var(--text-on-glass);
  --text-secondary: var(--text-on-glass-secondary);
  --text-tertiary: var(--text-on-glass-tertiary);
}

/* Glass Card Text Colors */
.glass-card p,
.glass-card .text-gray-600,
.glass-card .text-gray-700,
.glass-card .text-gray-500 {
  color: var(--text-primary) !important;
}

.glass-card .text-gray-500 {
  color: var(--text-secondary) !important;
}

.glass-card h3,
.glass-card h4 {
  color: var(--color-white);
}

/* Glass Card Badge Colors */
.glass-card .bg-purple-100,
.glass-card .bg-pink-100,
.glass-card .bg-blue-100,
.glass-card .bg-green-100 {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-card .text-purple-700,
.glass-card .text-pink-700,
.glass-card .text-blue-700,
.glass-card .text-green-700 {
  color: var(--color-white) !important;
}

/* Glass Card Links */
.glass-card
  a:not(.play-button):not(.play-button-large):not(.cta-button):not(
    .ticket-button
  ):not(.social-link) {
  color: var(--text-primary) !important;
  text-decoration: underline;
}

.glass-card
  a:hover:not(.play-button):not(.play-button-large):not(.cta-button):not(
    .ticket-button
  ):not(.social-link) {
  color: var(--color-white) !important;
  text-decoration: underline;
}

.glass-card .text-purple-600 {
  color: var(--text-primary) !important;
}

.glass-card .text-purple-600:hover {
  color: var(--color-white) !important;
}

/* White cards inside glass cards should use dark text */
.glass-card .bg-white {
  color: var(--color-gray-800);
}

.glass-card .bg-white * {
  color: inherit;
}

.glass-card .bg-white .text-gray-800,
.glass-card .bg-white .text-gray-900 {
  color: var(--color-gray-800) !important;
}

.glass-card .bg-white .text-gray-700 {
  color: var(--color-gray-700) !important;
}

.glass-card .bg-white h3,
.glass-card .bg-white h4 {
  color: var(--color-gray-900) !important;
}

.glass-card .bg-white a {
  color: var(--color-purple-600) !important;
}

.glass-card .bg-white a:hover {
  color: var(--color-purple-700) !important;
}

/* ==========================================================================
   18. BUTTON COMPONENTS
   ========================================================================== */

.cta-button,
.ticket-button {
  display: inline-block;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-base);
  cursor: pointer;
  color: var(--color-white);
  border: none;
}

.cta-button-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.ticket-button {
  background-color: #e64144;
}

.ticket-button:hover {
  background-color: #c93538;
  text-decoration: none;
}

/* Social Button Base - Data Attribute System */
[data-social-button] {
  background-color: var(--social-bg, var(--color-gray-600));
}

[data-social-button]:hover {
  background-color: var(--social-bg-hover, var(--color-gray-700));
  text-decoration: none;
}

/* Social Button Variants */
[data-social-button="spotify"] {
  --social-bg: var(--color-spotify);
  --social-bg-hover: var(--color-spotify-hover);
}

[data-social-button="instagram"] {
  --social-bg: var(--color-instagram);
  --social-bg-hover: var(--color-instagram-hover);
}

[data-social-button="soundcloud"] {
  --social-bg: var(--color-soundcloud);
  --social-bg-hover: var(--color-soundcloud-hover);
}

[data-social-button="tiktok"] {
  --social-bg: var(--color-black);
  --social-bg-hover: var(--color-gray-800);
}

[data-social-button="youtube"] {
  --social-bg: var(--color-red-600);
  --social-bg-hover: var(--color-red-700);
}

[data-social-button="apple"] {
  --social-bg: var(--color-pink-600);
  --social-bg-hover: var(--color-pink-700);
}

[data-social-button="songkick"] {
  --social-bg: var(--color-green-600);
  --social-bg-hover: var(--color-green-700);
}

[data-social-button="bandsintown"] {
  --social-bg: var(--color-orange-600);
  --social-bg-hover: var(--color-orange-700);
}

[data-social-button="discord"] {
  --social-bg: var(--color-indigo-600);
  --social-bg-hover: var(--color-indigo-700);
}

[data-social-button="linktree"] {
  --social-bg: var(--color-blue-600);
  --social-bg-hover: var(--color-blue-700);
}

/* Social Links */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.social-link:hover {
  text-decoration: none;
}

/* ==========================================================================
   19. BADGE COMPONENTS
   ========================================================================== */

.badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background-color: var(--badge-bg);
  color: var(--badge-text);
}

.badge-purple {
  --badge-bg: var(--color-purple-100);
  --badge-text: var(--color-purple-700);
}

.badge-pink {
  --badge-bg: var(--color-pink-100);
  --badge-text: var(--color-pink-700);
}

.badge-blue {
  --badge-bg: var(--color-blue-100);
  --badge-text: var(--color-blue-700);
}

.badge-green {
  --badge-bg: var(--color-green-100);
  --badge-text: var(--color-green-700);
}

/* ==========================================================================
   20. SECTION COMPONENTS
   ========================================================================== */

.about-section,
.music-section,
.shows-section,
.vinyl-section,
.discography-section,
.projects-section,
.contact-section {
  margin-bottom: var(--spacing-20);
}

/* Hero Section Layout */
.hero-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  min-height: 400px;
}

.hero-content {
  flex: 1;
  max-width: 42rem;
}

.hero-image-right {
  position: absolute;
  right: 0;
  top: 0;
  height: auto;
  max-width: 400px;
  width: auto;
  z-index: 2;
  opacity: 0;
  transform: translateY(60px);
  animation: hero-fade-in-up 1.2s ease-out 0.6s forwards;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .hero-image-right {
    max-width: 300px;
  }
}

@media (max-width: 768px) {
  .hero-container {
    flex-direction: column;
    min-height: auto;
  }

  .hero-image-right {
    position: relative;
    right: auto;
    top: auto;
    max-width: 250px;
    margin-top: var(--spacing-8);
    align-self: center;
  }
}

/* ==========================================================================
   21. CARD COMPONENTS
   ========================================================================== */

.show-details-card {
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-4);
}

.show-details-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.show-details-card li {
  margin: 0;
  padding: 0;
}

/* .latest-release-card, .vinyl-card, .project-card inherit from .glass-card */

.project-card {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
  overflow: hidden;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   22. GRID LAYOUTS
   ========================================================================== */

.discography-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}

@media (min-width: 768px) {
  .discography-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .discography-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

/* ==========================================================================
   23. DISCOGRAPHY ITEMS
   ========================================================================== */

.discography-item {
  max-width: 100%;
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.discography-item:hover {
  transform: translateY(-2px);
}

.image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.discography-item img {
  transition: transform var(--transition-base);
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
}

.discography-item:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   24. PLAY BUTTON COMPONENTS
   ========================================================================== */

.play-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: var(--radius-md);
  z-index: 1;
}

.discography-item:hover .play-button-overlay,
.image-wrapper:hover .play-button-overlay {
  opacity: 1;
}

/* Play Button Component */
.play-button {
  width: var(--play-button-size, 60px);
  height: var(--play-button-size, 60px);
  background: var(--play-button-bg, var(--color-spotify));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.play-button:hover {
  transform: scale(1.1);
  background: var(--play-button-bg-hover, var(--color-spotify-hover));
}

.play-button svg {
  width: 24px;
  height: 24px;
  fill: var(--color-white);
  margin-left: 2px;
}

.play-button-large {
  --play-button-size: 80px;
  --play-button-bg: var(--red-500-alpha-90);
  --play-button-bg-hover: var(--red-700-alpha-95);
  transition: all var(--transition-base);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.play-button-large:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.play-button-large svg {
  width: 32px;
  height: 32px;
  margin-left: 3px;
}

/* ==========================================================================
   25. TEXT CONTRAST ENHANCEMENT
   ========================================================================== */

.text-with-contrast {
  position: relative;
  padding: var(--spacing-4) 1.25rem;
  border-radius: var(--radius-md);
  background-color: var(--overlay-light);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.3);
  color: var(--text-on-glass) !important;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .text-with-contrast {
    padding: 0.875rem var(--spacing-4);
  }
}

/* ==========================================================================
   26. ANIMATIONS
   ========================================================================== */

@keyframes animate-fade-up {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hue-rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.animate {
  animation-duration: 0.8s;
  animation-delay: 0.3s;
  animation-name: animate-fade-up;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: backwards;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.delay-1 {
  animation-delay: 0.4s;
}
.delay-2 {
  animation-delay: 0.5s;
}
.delay-3 {
  animation-delay: 0.6s;
}
.delay-4 {
  animation-delay: 0.7s;
}
.delay-5 {
  animation-delay: 0.8s;
}
.delay-6 {
  animation-delay: 0.9s;
}
.delay-7 {
  animation-delay: 1.0s;
}
.delay-8 {
  animation-delay: 1.1s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}

/* ==========================================================================
   27. THANK YOU IMAGE
   ========================================================================== */

.thank-you-image {
  transition: filter 1s ease;
  max-width: min(20rem, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  .thank-you-image {
    max-width: min(16rem, 100%);
  }
}

@media (max-width: 480px) {
  .thank-you-image {
    max-width: min(12rem, 100%);
  }
}

.thank-you-image:hover {
  animation: hue-rotate 5s linear infinite;
}

.thank-you-image:not(:hover) {
  filter: hue-rotate(0deg);
  transition: filter 1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .thank-you-image:hover {
    animation: none;
  }

  .thank-you-image:not(:hover) {
    transition: none;
  }
}

/* ==========================================================================
   28. BACKGROUND & GRAINY EFFECTS
   ========================================================================== */

.grainy-background {
  position: relative;
  background: transparent;
}

.background-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  filter: url(#grain);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Optimize grain effect for mobile devices */
@media (max-width: 768px) {
  .background-gradient {
    /* Use lighter grain filter on mobile for better performance */
    filter: url(#grain-mobile);
  }
}

/* Disable grain entirely on very small/low-power devices */
@media (max-width: 480px) {
  .background-gradient {
    /* Remove filter on small screens to prevent lag */
    filter: none;
  }
}

.background-gradient ellipse,
.background-gradient circle {
  mix-blend-mode: screen;
}

.background-gradient circle {
  transform: rotate(-45deg);
  transform-origin: center;
}

.background-gradient circle:nth-of-type(2) {
  transform: rotate(-60deg);
  transform-origin: center;
}

.grainy-gradient {
  filter: url(#grain);
}

/* Optimize grainy-gradient for mobile */
@media (max-width: 768px) {
  .grainy-gradient {
    filter: url(#grain-mobile);
  }
}

@media (max-width: 480px) {
  .grainy-gradient {
    filter: none;
  }
}

svg[height="0"][aria-hidden="true"] {
  position: fixed;
}

/* ==========================================================================
   29. HOVER STATES
   ========================================================================== */

.hover\:text-gray-900:hover {
  color: var(--color-gray-900);
}
.hover\:text-purple-700:hover {
  color: var(--color-purple-700);
}
.hover\:bg-red-700:hover {
  background-color: var(--color-red-700);
}
.hover\:bg-gray-800:hover {
  background-color: var(--color-gray-800);
}
.hover\:bg-pink-700:hover {
  background-color: var(--color-pink-700);
}
.hover\:bg-green-700:hover {
  background-color: var(--color-green-700);
}
.hover\:bg-orange-700:hover {
  background-color: var(--color-orange-700);
}
.hover\:bg-indigo-700:hover {
  background-color: var(--color-indigo-700);
}
.hover\:bg-blue-700:hover {
  background-color: var(--color-blue-700);
}

/* ==========================================================================
   30. UTILITY CLASSES
   ========================================================================== */

.shadow-md {
  box-shadow: var(--shadow-md);
}
.overflow-hidden {
  overflow: hidden;
}