/* ============================================================
   BuhayAhente — Phase 2.1 UI/UX Polish
   Component: Empty States
   ------------------------------------------------------------
   Extends the existing .ba-empty-state primitive (design-system.css)
   with a gentle icon animation and a standardized action-button
   slot, so every "no data yet" screen (vehicles, visitors,
   testimonials, notifications, leads, quotations...) looks
   intentional instead of just blank.

   Markup contract (matches existing .ba-empty-state structure,
   nothing new required to opt in):
     <div class="ba-empty-state">
       <div class="ba-empty-icon"><i class="fa-solid fa-car-side"></i></div>
       <h6>Your showroom is empty.</h6>
       <p>Add your first vehicle to start building your online showroom.</p>
       <a href="..." class="btn btn-primary btn-sm ba-empty-action">Add Your First Vehicle</a>
     </div>
   ============================================================ */

.ba-empty-state {
    animation: ba-fade-slide-in .3s var(--ba-ease-out, ease) both;
}

.ba-empty-state .ba-empty-icon {
    animation: ba-empty-icon-float 3.2s ease-in-out infinite;
}
@keyframes ba-empty-icon-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.ba-empty-action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

@media (prefers-reduced-motion: reduce) {
    .ba-empty-state .ba-empty-icon { animation: none; }
}