/* Music Learning Community - Minimal CSS for Tailwind Integration */

/* CSS Variables for custom colors used in Tailwind config */
:root {
  --primary-orange: #F37F37;
  --primary-blue: #0057A4;
  --accent-pink: #FF6DA9;
  --accent-purple: #9A4DFF;
  --neutral-gray-light: #F5F5F5;
  --neutral-gray-dark: #262626;
  --supporting-green: #3AA655;
  --supporting-red: #D93F3F;
  
  /* Font family variables */
  --font-heading: 'McLaren', cursive;
  --font-body: 'Nunito', sans-serif;
}

/* Custom animations and effects used in the site */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

.polaroid-shadow {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.1);
  transform: rotate(-2deg);
}

.polaroid-shadow:hover {
  transform: rotate(0deg) scale(1.05);
  transition: all 0.3s ease;
}

/* Enhanced card styling for McLaren's playful personality */
.card-enhanced {
  box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1.2);
}

.card-enhanced:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 8px 12px rgba(0,0,0,0.1);
}

/* Playful button effects for McLaren's personality */
.btn-playful {
  border-radius: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1.2);
  transform-origin: center;
}

.btn-playful:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.btn-playful:active {
  transform: scale(0.98);
}

/* Musical micro-interactions */
@keyframes musicalBounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(-1deg); }
  75% { transform: translateY(-2px) rotate(1deg); }
}

@keyframes noteFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.musical-hover:hover {
  animation: musicalBounce 0.6s ease-in-out;
}

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

/* Enhanced polaroid effects */
.polaroid-shadow {
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1);
  transform: rotate(-3deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1.2);
}

.polaroid-shadow:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2), 0 16px 32px rgba(0,0,0,0.15);
}

/* Override for specific sections that need white text */
#hero-section h1, #hero-section p {
  color: white !important;
}

.footer-section h4 {
  color: white !important;
}

/* Override Tailwind utility classes in gradient sections */
#visual-aural-kinesthetic .text-gray-300,
#visual-aural-kinesthetic .text-gray-600,
#visual-aural-kinesthetic .text-neutral-gray-dark {
  color: white !important;
}

/* Override Tailwind utility classes in footer */
.footer-section .text-gray-300,
.footer-section .text-gray-400,
.footer-section .text-gray-600,
.footer-section .text-neutral-gray-dark {
  color: white !important;
}

/* Ensure proper font loading */
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Force McLaren font for branded class */
.font-branded, .branded {
  font-family: 'McLaren', cursive !important;
}

/* Force Nunito font for proxima class */
.font-proxima, .proxima {
  font-family: 'Nunito', sans-serif !important;
}

/* Hide scrollbar for webkit browsers */
::-webkit-scrollbar {
  display: none;
}