/* One restrained motion vocabulary for the website and every demo. */
:root {
  --motion-press: 100ms;
  --motion-quick: 160ms;
  --motion-screen: 220ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  :is(button, summary, .btn, .contact-link, .text-link) {
    transition:
      color var(--motion-quick) var(--motion-ease),
      background-color var(--motion-quick) var(--motion-ease),
      border-color var(--motion-quick) var(--motion-ease),
      box-shadow var(--motion-quick) var(--motion-ease),
      opacity var(--motion-quick) var(--motion-ease),
      transform var(--motion-quick) var(--motion-ease),
      scale var(--motion-press) var(--motion-ease);
  }

  :is(button, summary, .btn, .contact-link):not(:disabled):not(
      [aria-disabled="true"]
    ):active {
    scale: 0.975;
  }

  :is(.app-tabs, .phone-nav) button :is(svg, span),
  :is(.date-choice, .task-field),
  .step-number {
    transition:
      color var(--motion-quick) var(--motion-ease),
      background-color var(--motion-quick) var(--motion-ease),
      border-color var(--motion-quick) var(--motion-ease),
      opacity var(--motion-quick) var(--motion-ease);
  }

  dialog[open],
  details[open] > :not(summary) {
    animation: interface-reveal var(--motion-screen) var(--motion-ease);
  }

  dialog[open]::backdrop {
    animation: interface-dim var(--motion-quick) var(--motion-ease);
  }
}

@keyframes interface-reveal {
  from {
    opacity: 0;
    translate: 0 5px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes interface-dim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The screen-texture export is deliberately still, regardless of system settings. */
.capture-mode *,
.capture-mode *::before,
.capture-mode *::after {
  animation: none !important;
  transition: none !important;
}