/* Explain: App-specific component styles and micro-animations */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 9999px;
    font-weight: 700;
    font-family: var(--font-heading);
}

.track-card {
    transition: transform .3s ease, box-shadow .3s ease;
}
.track-card:hover {
    transform: translateY(-8px) rotate(-.6deg);
    box-shadow: 0 22px 45px -18px rgba(29, 78, 216, .45);
}

.theme-chip {
    transition: transform .25s ease;
}
.theme-chip:hover { transform: scale(1.05) rotate(1deg); }

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.animate-floaty { animation: floaty 4s ease-in-out infinite; }

@keyframes wiggle {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}
.animate-wiggle { animation: wiggle 2.5s ease-in-out infinite; }

@keyframes pop-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.in-view { animation: pop-in .6s ease forwards; }