/* Motion tokens shared by all website routes. */
:root {
  --motion-fast: 160ms;
  --motion-medium: 280ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .button,
  button,
  .icon-button,
  .text-link,
  .hub-links a,
  .account-link,
  .main-nav a,
  .app-header nav a,
  .mobile-nav a {
    transition:
      transform var(--motion-fast) var(--motion-ease),
      background-color var(--motion-fast),
      border-color var(--motion-fast),
      color var(--motion-fast),
      box-shadow var(--motion-fast);
  }
  .service-card,
  .order-card,
  .benefit-list article,
  .account-links a {
    transition:
      transform var(--motion-medium) var(--motion-ease),
      border-color var(--motion-medium),
      box-shadow var(--motion-medium);
  }
  .button:active,
  button:active:not(:disabled),
  .hub-links a:active {
    transform: scale(0.98);
  }
  .main-nav.is-open {
    animation: surfa-panel-in 220ms var(--motion-ease);
  }
  dialog[open],
  .web-notice {
    animation: surfa-panel-in 260ms var(--motion-ease);
  }
  dialog[open]::backdrop {
    animation: surfa-fade-in 200ms ease-out;
  }
  details[open] > p {
    animation: surfa-panel-in 220ms var(--motion-ease);
  }
  .steps li,
  input,
  textarea,
  select {
    transition:
      border-color var(--motion-fast),
      background-color var(--motion-fast);
  }
  .order-success-mark circle {
    animation: surfa-fade-in 240ms ease-out both;
  }
  .order-success-mark path {
    stroke-dasharray: 32;
    stroke-dashoffset: 0;
    animation: surfa-check-in 500ms var(--motion-ease) 120ms backwards;
  }
  @media (hover: hover) and (pointer: fine) {
    .button:hover,
    button:hover:not(:disabled),
    .hub-links a:hover {
      transform: translateY(-2px);
    }
    .service-card:hover,
    .order-card:hover,
    .account-links a:hover {
      transform: translateY(-4px);
      border-color: var(--brand-ink, var(--brand));
      box-shadow: 0 18px 42px -26px #087f8c65;
    }
    .text-link:hover {
      transform: translateX(-3px);
    }
  }
}
@keyframes surfa-panel-in {
  from {
    opacity: 0.4;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes surfa-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes surfa-check-in {
  from {
    stroke-dashoffset: 32;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}