/* 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;
  }
  .social-links a,
  .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;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .remote-icon, .remote-symbol { animation: surfa-fade-in 280ms var(--motion-ease) both; }
  .social-links a:hover { transform: translateY(-2px); }
  .service-card:focus-within { border-color: var(--brand-ink, var(--brand)); box-shadow: 0 18px 42px -26px #087f8c65; }
}

/* Hairline surfaces: gentle idle edge and a finite border reveal on interaction. */
:root { --surface-edge: rgba(8, 127, 140, .14); --surface-edge-active: rgba(8, 127, 140, .48); }
:root[data-theme="dark"] { --surface-edge: rgba(153, 221, 222, .16); --surface-edge-active: rgba(93, 213, 208, .5); }
.service-grid .service-card, main .auth-page, .benefit-list article, .faq-list details, main .order-card {
  position: relative;
  border: 1px solid var(--surface-edge);
  box-shadow: 0 8px 28px -22px rgba(8, 127, 140, .3);
}
.service-grid .service-card::before, main .auth-page::before, .benefit-list article::before, .faq-list details::before, main .order-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--surface-edge-active);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.service-grid .service-card:focus-within::before, main .auth-page:focus-within::before,
.faq-list details:focus-within::before, main .order-card:focus-within::before {
  opacity: 1;
  clip-path: inset(0);
}
.service-card > .service-art, .service-card > .service-artwork { border-color: transparent; }
.service-grid .service-card:hover, .service-grid .service-card:focus-within { border-color: var(--surface-edge); box-shadow: 0 12px 32px -22px rgba(8, 127, 140, .35); }
.service-search:focus-within, .auth-card .phone-entry:focus-within { outline: 1px solid var(--brand-ink, var(--brand)); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(93, 213, 208, .12); }
main :focus-visible, footer :focus-visible { outline-width: 2px; }
main .auth-progress li, main .steps li { border-bottom-width: 1px; }
.process-grid > li::after { height: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .service-grid .service-card::before, main .auth-page::before, .benefit-list article::before, .faq-list details::before, main .order-card::before {
    transition: clip-path .55s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  }
  .social-links .social-icon { transition: transform .3s cubic-bezier(.16,1,.3,1); }
  .social-links a:focus-visible .social-icon { transform: translateY(-2px) rotate(-6deg); }
  .booking-step:not([hidden]) { animation: surfa-step-reveal .32s cubic-bezier(.16,1,.3,1); }
  .choices label { transition: background-color .25s, border-color .25s, box-shadow .25s; }
  .choices label:has(input:checked) { background: var(--raised); border-color: var(--brand); box-shadow: 0 4px 14px -10px var(--brand); }
  .auth-progress li, .steps li { transition: border-color .3s, color .3s; }
  .auth-progress li[aria-current="step"] > span, .steps li[aria-current="step"] > span { animation: surfa-step-marker .3s ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .service-grid .service-card:hover::before, .benefit-list article:hover::before,
    .faq-list details:hover::before, main .order-card:hover::before { opacity: 1; clip-path: inset(0); }
    .social-links a:hover .social-icon { transform: translateY(-2px) rotate(-6deg); }
  }
}
@keyframes surfa-step-reveal { from { opacity: .35; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes surfa-step-marker { from { scale: .88; } to { scale: 1; } }
@media (forced-colors: active) {
  .service-grid .service-card, main .auth-page, .benefit-list article, .faq-list details, main .order-card { border-color: CanvasText; }
  .service-grid .service-card::before, main .auth-page::before, .benefit-list article::before, .faq-list details::before, main .order-card::before { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .service-artwork img { transition: transform .4s cubic-bezier(.16,1,.3,1); }
  @media (hover: hover) and (pointer: fine) {
    .service-card:hover .service-artwork img { transform: translateY(-4px) scale(1.025); }
  }
}