:root {
  --motion-enter: cubic-bezier(.22, 1, .36, 1);
  --motion-exit: cubic-bezier(.4, 0, 1, 1);
  --modal-close-dur: 150ms;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--motion-enter), transform 600ms var(--motion-enter);
}

.js [data-reveal].is-shown {
  opacity: 1;
  transform: none;
}

.button,
.component-head,
.component-option {
  transition: transform 180ms var(--motion-enter), filter 180ms ease, border-color 180ms ease;
}

.button:hover,
.component-option:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.button:active,
.component-head:active,
.component-option:active {
  transform: scale(.985);
}

.component-panel {
  transition: grid-template-rows 300ms var(--motion-enter);
}

.t-text-swap {
  transition: opacity 150ms var(--motion-exit), transform 150ms var(--motion-exit);
}

.t-text-swap.is-exit {
  opacity: 0;
  transform: translateY(-4px);
}

.t-text-swap.is-enter-start {
  opacity: 0;
  transform: translateY(4px);
}

.modal-layer {
  opacity: 0;
  transition: opacity 200ms ease;
}

.modal-layer.is-visible {
  opacity: 1;
}

.t-modal {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity 280ms var(--motion-enter), transform 280ms var(--motion-enter);
}

.t-modal.is-open {
  opacity: 1;
  transform: none;
}

.t-modal.is-closing {
  opacity: 0;
  transform: translateY(8px) scale(.99);
  transition-duration: var(--modal-close-dur);
  transition-timing-function: var(--motion-exit);
}

.t-digit {
  display: inline-block;
}

.is-animating .t-digit {
  animation: number-pop 350ms var(--motion-enter) both;
}

.is-animating .t-digit[data-stagger="1"] { animation-delay: 35ms; }
.is-animating .t-digit[data-stagger="2"] { animation-delay: 70ms; }

.is-shaking {
  animation: error-shake 320ms ease-in-out;
}

.site-toast {
  transition: opacity 220ms ease, transform 220ms var(--motion-enter);
}

@keyframes number-pop {
  from { opacity: 0; transform: translateY(6px) scale(.9); }
}

@keyframes error-shake {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

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

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}