/**
 * Global Bootstrap modal open / close motion (QuickSync)
 * “Rise + settle” — 3D tilt from below, spring easing, soft glass backdrop.
 * Transform + outer `.modal.fade` opacity share the same duration so Bootstrap’s
 * close sequence stays in sync with `transitionend`.
 */

.modal.fade {
  perspective: 1200px;
  transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal.fade .modal-dialog {
  transform-origin: 50% 92%;
  transition: transform 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translate3d(0, 2rem, 0) scale(0.9) rotateX(-10deg);
}

.modal.fade.show .modal-dialog {
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
}

/* Blur on `.fade` (not only `.show`) so it doesn’t snap off when Bootstrap removes `.show` during close */
.modal-backdrop.fade {
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(4px) saturate(104%);
  -webkit-backdrop-filter: blur(4px) saturate(104%);
}

/* Softer frosted scrim instead of default pure black backdrop */
.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.22) !important;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

body.dark-mode .modal-backdrop {
  background-color: rgba(2, 6, 23, 0.34) !important;
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade {
    perspective: none;
    transition: opacity 0.01ms linear;
  }

  .modal.fade .modal-dialog {
    transition: transform 0.01ms linear;
    transform: none;
    transform-origin: 50% 50%;
  }

  .modal.fade.show .modal-dialog {
    transform: none;
  }

  .modal-backdrop.fade {
    transition: opacity 0.01ms linear;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}