/* Shared glass-surface modal/popover motion. */
.modal-surface-motion {
  --modal-surface-origin: top center;
  --modal-surface-x-start: 0px;
  --modal-surface-y-start: -6px;
  --modal-surface-x-early: 0px;
  --modal-surface-y-early: -3px;
  --modal-surface-x-mid: 0px;
  --modal-surface-y-mid: -1px;
  --modal-surface-x-close: 0px;
  --modal-surface-y-close: -4px;
  --modal-surface-item-delay: 0ms;
  transform-origin: var(--modal-surface-origin);
}

.modal-surface-motion.is-opening {
  animation: modal-surface-in 390ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.modal-surface-motion.is-closing {
  pointer-events: none !important;
  animation: modal-surface-out 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.modal-surface-motion[data-motion-detail="rich"].is-opening > * {
  animation: modal-surface-item-in 240ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
  animation-delay: calc(54ms + var(--modal-surface-item-delay));
  will-change: opacity, transform;
}

@keyframes modal-surface-in {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--modal-surface-x-start), var(--modal-surface-y-start), 0)
      scale(0.965);
  }
  34% {
    opacity: 0.92;
    transform:
      translate3d(var(--modal-surface-x-early), var(--modal-surface-y-early), 0)
      scale(0.986);
  }
  58% {
    opacity: 1;
    transform:
      translate3d(var(--modal-surface-x-mid), var(--modal-surface-y-mid), 0)
      scale(0.9965);
  }
  76% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      scale(0.9992);
  }
  90% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      scale(0.9998);
  }
  100% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}

@keyframes modal-surface-out {
  0% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--modal-surface-x-close), var(--modal-surface-y-close), 0)
      scale(0.985);
  }
}

@keyframes modal-surface-item-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 5px, 0) scale(0.992);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-surface-motion.is-opening,
  .modal-surface-motion.is-closing {
    animation-duration: 1ms;
  }

  .modal-surface-motion[data-motion-detail="rich"].is-opening > * {
    animation: none;
  }
}