#booking-dialog[data-motion-state="opening"]::backdrop {
  animation: booking-backdrop-in 360ms ease both;
}

#booking-dialog[data-motion-state="closing"]::backdrop {
  animation: booking-backdrop-out 230ms ease both;
}

#booking-dialog .form-progress > span {
  transition: opacity 260ms ease, border-color 260ms ease;
}

#booking-dialog .occasion-options span {
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

#booking-dialog .dialog-close {
  transition: background-color 180ms ease, transform 180ms ease;
}

@media (hover: hover) {
  #booking-dialog .occasion-options label:hover span {
    transform: translateY(-2px);
    border-color: var(--red);
  }

  #booking-dialog .dialog-close:hover {
    background: #20201e17;
    transform: rotate(8deg);
  }
}

@keyframes booking-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(8px); }
}

@keyframes booking-backdrop-out {
  from { opacity: 1; backdrop-filter: blur(8px); }
  to { opacity: 0; backdrop-filter: blur(0); }
}

#booking-dialog[data-motion="reduced"]::backdrop {
  animation: none;
}

#booking-dialog[data-motion="reduced"] .form-progress > span,
#booking-dialog[data-motion="reduced"] .occasion-options span,
#booking-dialog[data-motion="reduced"] .dialog-close {
  transition: none;
}

#booking-dialog[data-motion="reduced"] .occasion-options label:hover span,
#booking-dialog[data-motion="reduced"] .dialog-close:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #booking-dialog::backdrop { animation: none !important; }
  #booking-dialog .form-progress > span,
  #booking-dialog .occasion-options span,
  #booking-dialog .dialog-close { transition: none; }
  #booking-dialog .occasion-options label:hover span,
  #booking-dialog .dialog-close:hover { transform: none; }
}