/*
 * style.css
 * Custom styles for Tap The DJ, ensuring CSS precedence for dynamic effects.
 */

/* =======================================
   GENERAL STYLES & BACKGROUND FIXES
   ======================================= */

body {
    min-height: 100vh;
    /* CRITICAL FIX: Force the dark background color (#111827) with high precedence */
    background-color: #111827 !important; 
    /* Font and colors are inherited or set by Tailwind, but min-height is crucial */
}


/* =======================================
   DYNAMIC GLOW EFFECT (Applied to #app)
   ======================================= */

/* CRITICAL: Define the animation keyframes outside of Tailwind config */
@keyframes bgPulse {
    /* Uses the dynamically set --hue variable */
    0% { box-shadow: inset 0 0 15px hsl(var(--hue, 120), 70%, 50%, 0.5); }
    50% { box-shadow: inset 0 0 50px hsl(var(--hue, 120), 80%, 60%, 0.8); }
    100% { box-shadow: inset 0 0 15px hsl(var(--hue, 120), 70%, 50%, 0.5); }
}

/* The class applied to the #app container */
.dynamic-glow {
    /* Initial Hue variable set to 120 (Emerald/Green) */
    --hue: 120; 
    
    /* CRITICAL FIX: Ensure box-shadow is visible so the browser processes the property for updates */
    box-shadow: inset 0 0 15px hsl(var(--hue), 70%, 50%, 0.5); 
    transition: box-shadow 0.2s ease; /* Transition for smooth mouse movement changes */
}

/* Class applied by JS on tap to trigger the pulse animation */
.dynamic-glow.pulse-bg {
    /* CRITICAL: Assign the animation duration and keyframes */
    animation: bgPulse 0.3s ease-out;
}


/* =======================================
   BUTTON STYLES (Tap Flash)
   ======================================= */

/* Custom style for the tap button feedback (animation is defined in Tailwind config in index.html) */
#tapButton.flash {
    animation: tapFlash 0.15s ease-out;
}

/* Explicitly defined for reliability due to dynamic class switching in JS */
.hover\:bg-indigo-600:hover { background-color: #4338CA; } 
.hover\:bg-emerald-600:hover { background-color: #059669; }