.bg-mesh-gradient {
    background-color: #fdf2f2;
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,0) 0, hsla(253,16%,7%,0) 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,30%,0) 0, hsla(225,39%,30%,0) 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,0) 0, hsla(339,49%,30%,0) 50%), 
        radial-gradient(at 0% 50%, rgba(226, 169, 190, 0.2) 0, transparent 50%), 
        radial-gradient(at 50% 50%, rgba(243, 166, 131, 0.1) 0, transparent 50%), 
        radial-gradient(at 100% 50%, rgba(120, 150, 130, 0.1) 0, transparent 50%);
}
.glass-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 25px 50px -12px rgba(226, 169, 190, 0.25);
}
.waveform-bar {
    height: 100%;
    width: 3px;
    background: #e2a9be;
    border-radius: 4px;
    margin: 0 1px;
}

/* ensure grid clears the fixed player */
#mix-grid {
    padding-bottom: 220px; /* ensure cards not hidden by player */
}

/* .mix-card {
    z-index: 20;
} */
.pulse-wave {
    animation: pulse-wave-height 1.5s ease-in-out infinite;
}
@keyframes pulse-wave-height {
    0%, 100% { height: 20%; }
    50% { height: 80%; }
}
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* New processing animations */
.processing-card {
    position: relative;
    overflow: hidden;
}

.processing-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
    pointer-events: none;
}

.heart-pulse {
    animation: heart-beat 1s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes heart-beat {
    0% { transform: scale(1); }
    15% { transform: scale(1.25); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}

.processing-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.processing-status::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #e2a9be;
    border-radius: 50%;
    animation: heart-beat 1s infinite;
}

#status-text {
    transition: opacity 0.3s ease;
    animation: fade-in 0.5s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

#progress-fill {
    position: relative;
    overflow: hidden;
}

#progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1s infinite;
}

/* Modal and Advanced Animations */
#processing-modal.active {
    opacity: 1;
    pointer-events: auto;
}

#processing-modal.active #modal-content {
    transform: scale(1);
}

.heart-pulse-heavy {
    animation: heart-beat-heavy 1.2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heart-beat-heavy {
    0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(226,169,190,0)); }
    15% { transform: scale(1.3) rotate(-5deg); filter: drop-shadow(0 0 20px rgba(226,169,190,0.6)); }
    30% { transform: scale(1) rotate(0deg); }
    45% { transform: scale(1.15) rotate(3deg); filter: drop-shadow(0 0 10px rgba(226,169,190,0.4)); }
    60% { transform: scale(1) rotate(0deg); }
}

.particle {
    position: absolute;
    border-radius: 50%;
    animation: float 6s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(10px, -15px); }
    66% { transform: translate(-5px, 10px); }
}

.animate-shimmer-fast {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Button-Centered Progress & Animations */
/* Advanced Mix Button Animations */
.mix-btn-active {
    position: relative;
    box-shadow: 0 0 20px rgba(226, 169, 190, 0.4), 0 0 40px rgba(243, 166, 131, 0.2);
    animation: aura-pulse 3s infinite ease-in-out;
    pointer-events: none; /* Extra safety */
}

@keyframes aura-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(226, 169, 190, 0.4), 0 0 40px rgba(243, 166, 131, 0.1); }
    50% { box-shadow: 0 0 40px rgba(226, 169, 190, 0.6), 0 0 60px rgba(243, 166, 131, 0.3); }
}

.scanning-beam {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%
    );
    animation: scan-move 2.5s infinite linear;
    z-index: 5;
}

@keyframes scan-move {
    0% { left: -100%; }
    100% { left: 100%; }
}

.liquid-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, rgba(243, 166, 131, 0.3) 0%, rgba(226, 169, 190, 0.6) 100%);
    transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.liquid-wave {
    position: absolute;
    top: -15px;
    left: 0;
    width: 200%;
    height: 30px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 120 28" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 15C30 15 30 0 60 0C90 0 90 15 120 15V28H0V15Z" fill="rgba(243, 166, 131, 0.3)"/></svg>');
    background-size: 50% 100%;
    animation: wave-move 2s linear infinite;
}

.floating-particle {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    animation: particle-fly 2s forwards ease-out;
}

@keyframes particle-fly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) scale(0); opacity: 0; }
}