/* ============================================================
   ANIMATIONS — VEVARIA DESIGN SYSTEM (STRIPE-STYLE)
   ============================================================ */

/* ------------------------------------------------------------
   Fade In (used for modals, dropdowns, tooltips)
------------------------------------------------------------ */
.fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-default) forwards;
}

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


/* ------------------------------------------------------------
   Fade Out (clean exit transitions)
------------------------------------------------------------ */
.fade-out {
  animation: fadeOut var(--duration-normal) var(--ease-default) forwards;
}

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


/* ------------------------------------------------------------
   Scale In (used for popovers, cards, menus)
------------------------------------------------------------ */
.scale-in {
  animation: scaleIn var(--duration-fast) var(--ease-default) forwards;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}


/* ------------------------------------------------------------
   Button Press (subtle tactile feedback)
------------------------------------------------------------ */
.btn-press:active {
  animation: pressDown var(--duration-fast) var(--ease-out);
}

@keyframes pressDown {
  from { transform: scale(1); }
  to { transform: scale(0.97); }
}


/* ------------------------------------------------------------
   Card Hover Lift (premium dashboard feel)
------------------------------------------------------------ */
.card-lift:hover {
  animation: liftUp var(--duration-normal) var(--ease-default) forwards;
}

@keyframes liftUp {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}


/* ------------------------------------------------------------
   Pulse (used for loading indicators)
------------------------------------------------------------ */
.pulse {
  animation: pulseAnim 1.4s ease-in-out infinite;
}

@keyframes pulseAnim {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}