/* ══════════════════════════════════════════════════════════════════════════════
   animations.css — @keyframes definitions + clip stagger delays
   Animation properties live on component rules (components.css, clips.css)
   that reference these keyframes by name.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Card appear animation — subtle fade, no scale ───────────────────────────── */
@keyframes cardSlideUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.clip-item {
    animation: cardSlideUp .18s ease-out both;
    animation-delay: calc(var(--clip-idx, 0) * 18ms);
}

/* ── Dropdown fade-in ────────────────────────────────────────────────────────── */
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}