/* Custom Styles & Producer Aesthetics for MONOKROMO Website */

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

/* Marquee Infinite Loop Animation (Flamingosis / NoQuantize style) */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  width: 200%;
  animation: marquee 24s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* Equalizer Bars Animation */
@keyframes soundwave {
  0% { height: 4px; }
  50% { height: 28px; }
  100% { height: 8px; }
}

.sound-bar {
  transition: height 0.2s ease;
}

.sound-bar.playing {
  animation: soundwave 1s infinite ease-in-out alternate;
}

.sound-bar.playing:nth-child(1) { animation-delay: 0.1s; animation-duration: 0.7s; }
.sound-bar.playing:nth-child(2) { animation-delay: 0.3s; animation-duration: 0.9s; }
.sound-bar.playing:nth-child(3) { animation-delay: 0.15s; animation-duration: 0.6s; }
.sound-bar.playing:nth-child(4) { animation-delay: 0.4s; animation-duration: 0.8s; }
.sound-bar.playing:nth-child(5) { animation-delay: 0.25s; animation-duration: 1.1s; }
.sound-bar.playing:nth-child(6) { animation-delay: 0.35s; animation-duration: 0.75s; }
.sound-bar.playing:nth-child(7) { animation-delay: 0.2s; animation-duration: 0.85s; }

/* SP-404 Drum Pads Styling (Dibiase / Gnarly style) */
.sp-pad {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #1C1C1E;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #71717A;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.1s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.sp-pad:hover {
  border-color: #FFE600;
  color: #FFE600;
  background: #242426;
}

.sp-pad:active,
.sp-pad.pad-pressed {
  background: #FFE600 !important;
  color: #000000 !important;
  border-color: #FFF338 !important;
  box-shadow: 0 0 20px rgba(255, 230, 0, 0.8), inset 0 0 8px rgba(0, 0, 0, 0.3) !important;
  transform: scale(0.96);
}

/* Vinyl & Disc Slow Rotation */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

/* Custom Dark Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #080808;
}

::-webkit-scrollbar-thumb {
  background: #27272A;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #FFE600;
}

/* Active Track Card Glow */
.track-card.active-track {
  border-color: #FFE600 !important;
  background: rgba(255, 230, 0, 0.04) !important;
  box-shadow: 0 0 30px rgba(255, 230, 0, 0.15);
}

.track-card {
  transform: translateY(0);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.track-card:hover {
  transform: translateY(-4px);
}

/* --- iOS & Mobile Performance Optimizations --- */

/* 1. Eliminate 300ms double-tap delay on tap targets for instant response */
a, 
button, 
.mix-card, 
.sp-pad, 
.brand-btn,
.track-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; /* Remove the default dark overlay on touch */
}

/* 2. Promote marquee to dedicated GPU layer for lag-free 60fps animation */
.marquee-track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 3. Smooth momentum scrolling for mobile overflow drawer */
#mobileMenu {
  -webkit-overflow-scrolling: touch;
}

/* 4. Defer layout of offscreen sections to improve LCP & INP */
.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 400px;
}

/* 5. Safari backdrop-filter compatibility safeguard */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .lg\:backdrop-blur-xl {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
}