/* Finite, presentation-only motion. All content remains visible without this stylesheet or JavaScript. */
:root {
  --him-motion-ease: cubic-bezier(.2, .7, .2, 1);
}

.him-motion-ready .him-enter {
  animation: him-rise 520ms var(--him-motion-ease) var(--him-motion-delay, 0ms) both;
}
.him-motion-ready .him-modal-enter {
  animation: him-modal-enter 300ms var(--him-motion-ease) both;
}
.him-motion-ready .him-step-enter {
  animation: him-step-enter 300ms var(--him-motion-ease) both;
}
.him-motion-ready .him-toast-enter {
  animation: him-toast-enter 240ms var(--him-motion-ease) both;
}

.him-booking-progress > div {
  position: relative;
}
.him-booking-progress > .him-current-step {
  font-weight: 700;
}
.him-booking-progress > .him-current-step::before {
  content: "";
  position: absolute;
  inset: -3px 0 auto;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
  transform-origin: left;
  animation: him-progress 420ms var(--him-motion-ease) both;
  pointer-events: none;
}

.him-booking-received .success-mark {
  position: relative;
  isolation: isolate;
  background: var(--pale);
  box-shadow: 0 0 0 8px var(--bg);
}
.him-booking-received .success-mark.him-success-animate {
  animation: him-check-pop 1000ms var(--him-motion-ease) both;
}
.him-booking-received .him-success-animate::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: him-check-ring 850ms 100ms ease-out both;
  pointer-events: none;
}
.him-booking-received .him-success-animate .icon path {
  stroke-dasharray: 40;
  stroke-dashoffset: 0;
  animation: him-check-draw 450ms 180ms var(--him-motion-ease) both;
}

/* Only interactive surfaces move; input fields and focused controls keep their position. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .him-motion-ready .btn:not(:disabled) {
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }
  .him-motion-ready .btn:not(:disabled):active {
    transform: translateY(1px);
  }
}

@keyframes him-rise {
  from { opacity: .35; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes him-modal-enter {
  from { opacity: .55; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes him-step-enter {
  from { opacity: .55; transform: translateX(7px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes him-toast-enter {
  from { opacity: .4; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes him-progress {
  from { transform: scaleX(.15); }
  to { transform: scaleX(1); }
}
@keyframes him-check-pop {
  0% { transform: scale(.85); opacity: .5; }
  39% { transform: scale(1.05); opacity: 1; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes him-check-ring {
  0% { transform: scale(.88); opacity: .45; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes him-check-draw {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .him-motion-ready :is(.him-enter, .him-modal-enter, .him-step-enter, .him-toast-enter),
  .him-booking-progress > .him-current-step::before,
  .him-booking-received .him-success-animate,
  .him-booking-received .him-success-animate::after,
  .him-booking-received .him-success-animate .icon path {
    animation: none !important;
  }
}