/* Custom Base CSS - Primarily for scrollbar hiding and custom keyframes */
:root {
    /* Initial values for Theme 0 */
    --color-primary: #00A896;
    --color-light-bg: #FAFAFA;
    --color-white-surface: #FFFFFF;
    --color-dark-text: #1F2937;
    --color-muted-text: #6B7280;
}
/* Hide scrollbar for smooth horizontal scrolling (for all browsers) */
.horizontal-scroll-container {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.horizontal-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Custom Keyframes for a pulsing effect on playing track cover art */
@keyframes pulse-play {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(27, 255, 114, 0.5); /* Subtle green glow */
  }
  50% {
    box-shadow: 0 0 0 8px rgba(27, 255, 114, 0);
  }
}

.animate-pulse-play {
    animation: pulse-play 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}


#mini-player-fab{margin-bottom:50px;}
#app-content{margin-top:45px;}
#results-sections{margin-top:40px;}

/*
 * Ensure this CSS block is included in your main stylesheet (or a <style> block)
 * after the Tailwind configuration has been loaded.
 */
#eq-popupp{margin-bottom:150px;}
/* ----------------------------------------------------------------------------------
 * 1. KEYFRAMES FOR CHAOTIC MOTION
 * ---------------------------------------------------------------------------------- */
@keyframes wave-fast {
    0%, 100% { height: 15%; }
    50% { height: 100%; }
}

@keyframes wave-slow {
    0%, 100% { height: 15%; }
    50% { height: 85%; }
}

@keyframes wave-mid {
    0%, 100% { height: 15%; }
    50% { height: 95%; }
}

/* ----------------------------------------------------------------------------------
 * 2. CONTAINER STYLING (Centered & Full Width, responsive)
 * ---------------------------------------------------------------------------------- */
#full-waveform-simulation {
    height: 10vh;                    /* Taller, scales on mobile */
    min-height: 6rem;                /* Prevent too small on desktop */
    margin: 1rem auto;               /* Center horizontally */
    display: flex;
    justify-content: space-between;  /* Spread bars evenly */
    align-items: center;             /* Grow from center vertically */
    width: 100%;                     /* Cover full width */
    max-width: 100%;                 /* Prevent overflow */
    overflow: hidden;                /* Keep bars inside container */
}

/* ----------------------------------------------------------------------------------
 * 3. BAR STYLING (Thin, tall, all corners rounded)
 * ---------------------------------------------------------------------------------- */
#full-waveform-simulation > div {
    width: 3px;                      /* Slightly thicker for mobile */
    min-height: 15%;                  /* Ensure visibility */
    background-color: var(--color-primary, #007bff);
    border-radius: 4px;              /* Rounded corners */
    margin: 0 1px;

    flex-shrink: 0;
    flex-grow: 1;

    transform-origin: center;        /* Grow from center */

    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused;
}

/* ----------------------------------------------------------------------------------
 * 4. VARIED ANIMATIONS FOR NATURAL WAVEFORM
 * ---------------------------------------------------------------------------------- */
#full-waveform-simulation > div:nth-child(4n+1) {
    animation-name: wave-fast;
    animation-duration: 0.7s;
    animation-delay: 0s;
}

#full-waveform-simulation > div:nth-child(4n+2) {
    animation-name: wave-mid;
    animation-duration: 0.8s;
    animation-delay: 0.1s;
}

#full-waveform-simulation > div:nth-child(4n+3) {
    animation-name: wave-slow;
    animation-duration: 0.9s;
    animation-delay: 0.2s;
}

#full-waveform-simulation > div:nth-child(4n+4) {
    animation-name: wave-fast;
    animation-duration: 0.85s;
    animation-delay: 0.15s;
}

/* ----------------------------------------------------------------------------------
 * 5. ANIMATION CONTROL
 * ---------------------------------------------------------------------------------- */
#full-player-overlay.waveform-playing #full-waveform-simulation > div {
    animation-play-state: running;
}

#visualization-wrapper{height:20px;}

#actions{margin-bottom:10px;}

#full-cover{margin-top:85px;}
#full-title{margin-top:-20px;}