veza/apps/web/desy/legacy/css/6-modules/audio.css

/* PLAYER & WAVEFORM */
.waveform-bar {
    width: 6px;
    background: var(--color-cyan-500);
    border-radius: 4px;
    animation: wave 1.2s ease-in-out infinite;
    height: 100%;
    box-shadow: 0 0 10px var(--color-cyan-glow);
}

.waveform-bar:nth-child(1) {
    animation-duration: 0.8s;
    animation-delay: -0.2s;
    height: 40%;
}

.waveform-bar:nth-child(2) {
    animation-duration: 1.1s;
    animation-delay: -0.4s;
    height: 70%;
    background: var(--color-magenta-500);
    box-shadow: 0 0 10px var(--color-magenta-glow);
}

.waveform-bar:nth-child(3) {
    animation-duration: 1.3s;
    animation-delay: -0.6s;
    height: 100%;
}

.waveform-bar:nth-child(4) {
    animation-duration: 0.9s;
    animation-delay: -0.8s;
    height: 60%;
    background: var(--color-lime-500);
    box-shadow: 0 0 10px var(--color-lime-glow);
}

.waveform-bar:nth-child(5) {
    animation-duration: 1.0s;
    animation-delay: -1.0s;
    height: 80%;
}

.waveform-bar:nth-child(6) {
    animation-duration: 1.4s;
    animation-delay: -1.2s;
    height: 50%;
    background: var(--color-magenta-500);
    box-shadow: 0 0 10px var(--color-magenta-glow);
}

.player-bar {
    background: rgba(5, 5, 8, 0.65);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.player-bar:hover {
    background: rgba(5, 5, 8, 0.85);
    border-top-color: var(--color-cyan-500);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
}

.track-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 300px;
}

.track-art {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.player-controls {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    max-width: 600px;
}

.control-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.btn-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.btn-play:hover {
    transform: scale(1.1);
    background: var(--color-cyan-500);
    box-shadow: 0 0 20px var(--color-cyan-500);
}

.progress-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-void-500);
}

.progress-bar {
    flex-grow: 1;
    height: 4px;
    background: var(--color-void-300);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 35%;
    background: linear-gradient(90deg, var(--color-cyan-500), var(--color-magenta-500));
    box-shadow: 0 0 10px var(--color-magenta-glow);
}

.progress-bar:hover .progress-fill {
    filter: brightness(1.2);
}

/* EQ & Volume (v4 gems) */
.eq-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}

.eq-bar {
    width: 2px;
    background: var(--color-cyan-500);
    animation: wave 0.8s infinite ease-in-out;
}

.eq-bar:nth-child(odd) {
    animation-direction: reverse;
    background: var(--color-magenta-500);
}