/* Deposit modal opening */
.modal-backdrop:has(.nl-deposit-modal) {
  animation: nlBackdropIn 220ms ease-out both;
}

.nl-deposit-modal {
  transform-origin: 50% 45%;
  animation: nlModalIn 380ms cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform, opacity;
}

/* Container changes smoothly between deposit steps */
.nl-deposit-motion-content {
  overflow: hidden;
  will-change: height;
}

/* Step entering */
.nl-deposit-step-enter {
  animation: nlDepositStepIn 340ms cubic-bezier(.16, 1, .3, 1) both;
}

/* Buttons and form controls */
.nl-deposit-modal button,
.nl-deposit-modal input,
.nl-deposit-modal select {
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms cubic-bezier(.16, 1, .3, 1),
    opacity 180ms ease;
}

.nl-deposit-modal button:active {
  transform: scale(.975);
}

/* Cryptocurrency cards */
.nl-deposit-modal [data-deposit-asset] {
  transition:
    transform 220ms cubic-bezier(.16, 1, .3, 1),
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
  will-change: transform;
}

.nl-deposit-modal [data-deposit-asset]:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .25) !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

.nl-deposit-modal [data-deposit-asset]:active {
  transform: translateY(-1px) scale(.985);
}

/* Payment information appears softly */
.nl-deposit-modal img,
.nl-deposit-modal canvas,
.nl-deposit-modal .qr-code,
.nl-deposit-modal [class*="payment-address"],
.nl-deposit-modal [class*="deposit-address"] {
  animation: nlPaymentDetailIn 420ms cubic-bezier(.16, 1, .3, 1) both;
}

/* Loading state */
.nl-deposit-modal button:disabled {
  opacity: .58;
  cursor: wait;
  transform: none;
}

@keyframes nlBackdropIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(5px);
  }
}

@keyframes nlModalIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nlDepositStepIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.995);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes nlPaymentDetailIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop:has(.nl-deposit-modal),
  .nl-deposit-modal,
  .nl-deposit-step-enter,
  .nl-deposit-modal img,
  .nl-deposit-modal canvas,
  .nl-deposit-modal .qr-code {
    animation: none !important;
  }

  .nl-deposit-motion-content,
  .nl-deposit-modal button,
  .nl-deposit-modal input,
  .nl-deposit-modal select,
  .nl-deposit-modal [data-deposit-asset] {
    transition: none !important;
  }
}