/* Motion. Every animation here is disabled under prefers-reduced-motion. */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.intro { animation: rise var(--t-slow) var(--ease-out) both; }
.card { animation: settle 560ms var(--ease-out) 80ms both; }

/* Month grid slides in the direction of travel. The JS sets the direction class. */
.calendar__grid.is-entering-next { animation: slide-from-right var(--t-base) var(--ease-out) both; }
.calendar__grid.is-entering-prev { animation: slide-from-left var(--t-base) var(--ease-out) both; }

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

/* Time slots stagger in as a day is chosen. */
.slot { animation: rise var(--t-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }


.confirm { animation: settle var(--t-slow) var(--ease-out) both; }
.confirm__mark { animation: pop 480ms var(--ease-spring) 120ms both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}