@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes checkmark {
  0% { stroke-dashoffset: 48; }
  100% { stroke-dashoffset: 0; }
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.4;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn 0.35s ease both;
}

.slide-up {
  animation: slideUp 0.4s ease both;
}

.scale-in {
  animation: scaleIn 0.28s ease both;
}

.page-enter {
  animation: slideUp 0.3s ease;
}

.spinner {
  animation: spin 0.9s linear infinite;
}

.success-check path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkmark 0.6s ease forwards 0.2s;
}

.ripple-target {
  position: relative;
  overflow: hidden;
}

.ripple-target span.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

.bottom-sheet-backdrop.show,
.modal-backdrop.show,
.loading-overlay.show {
  display: flex;
}

.bottom-sheet-backdrop.show .bottom-sheet,
.modal-backdrop.show .modal {
  animation: slideUp 0.28s ease;
}