/* One motion vocabulary for public pages and their portalled seller forms. */
[data-excar-motion] {
  --excar-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --excar-motion-press: 140ms;
  --excar-motion-hover: 280ms;
  --excar-motion-step: 380ms;
}

[data-excar-motion] :is(button, a, summary, label) { -webkit-tap-highlight-color: transparent; }
[data-excar-motion] :is(button, a, summary) { touch-action: manipulation; }

@media (prefers-reduced-motion: no-preference) {
  /* The browser owns navigation. No delayed clicks or routing interception. */
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: 260ms; }
  ::view-transition-old(root) { animation: excar-page-out 160ms ease-out both; }
  ::view-transition-new(root) { animation: excar-page-in 260ms cubic-bezier(.22, 1, .36, 1) both; }

  [data-excar-motion] :is(button, [data-slot="button"], [data-motion-button], [data-motion-card], label:has(> input[type="radio"])) {
    transition: translate var(--excar-motion-hover) var(--excar-motion-ease),
      scale var(--excar-motion-press) var(--excar-motion-ease),
      background-color 180ms ease, border-color 180ms ease, color 180ms ease,
      box-shadow var(--excar-motion-hover) ease;
  }
  [data-excar-motion] :is(button, [data-slot="button"], [data-motion-button]):active:not(:disabled):not([aria-disabled="true"]):not(:has(:disabled)) { scale: .97; translate: 0 0; }
  [data-excar-motion] :is([data-motion-card], label:has(> input[type="radio"])):active:not(:has(:disabled)):not([aria-disabled="true"]) { scale: .99; translate: 0 0; }
  [data-excar-motion] :is(a, button) :is(.lucide-arrow-right, .lucide-arrow-up-right, .lucide-arrow-left) {
    transition: translate var(--excar-motion-hover) var(--excar-motion-ease);
  }
  [data-excar-motion] :is(a, button):focus-visible .lucide-arrow-right { translate: 3px 0; }
  [data-excar-motion] :is(a, button):focus-visible .lucide-arrow-up-right { translate: 2px -2px; }
  [data-excar-motion] :is(a, button):focus-visible .lucide-arrow-left { translate: -3px 0; }

  [data-excar-motion] :is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"]) {
    transition: border-color 180ms ease, box-shadow 220ms ease, background-color 180ms ease;
  }
  [data-excar-motion] [data-motion-step] { animation: excar-step-in var(--excar-motion-step) var(--excar-motion-ease) both; }
  [data-excar-motion] [data-motion-step]:has([data-camera-active="true"]) { animation: none; }
  [data-excar-motion] [data-motion-direction="backward"] { --step-enter-x: -16px; }
  [data-excar-motion] [data-motion-success] { animation: excar-success-in 480ms var(--excar-motion-ease) both; }
  [data-excar-motion] [data-motion-success] > :first-child { animation: excar-seal-in 560ms var(--excar-motion-ease) both; }
  [data-excar-motion] summary > [aria-hidden="true"] { transition: transform 280ms var(--excar-motion-ease); }

  /* Native open/close semantics also work when these newer CSS features are absent. */
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    [data-excar-motion] details { interpolate-size: allow-keywords; }
    [data-excar-motion] details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 320ms var(--excar-motion-ease), content-visibility 320ms allow-discrete;
    }
    [data-excar-motion] details[open]::details-content { block-size: auto; }
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-excar-motion] :is(button, [data-slot="button"], [data-motion-button]):hover:not(:disabled):not([aria-disabled="true"]):not(:has(:disabled)):not(:active) { translate: 0 -2px; }
  [data-excar-motion] :is([data-motion-card], label:has(> input[type="radio"])):hover:not(:active):not(:has(:disabled)):not([aria-disabled="true"]) { translate: 0 -4px; }
  [data-excar-motion] :is(a, button):hover:not(:disabled):not([aria-disabled="true"]):not(:has(:disabled)) .lucide-arrow-right { translate: 4px 0; }
  [data-excar-motion] :is(a, button):hover:not(:disabled):not([aria-disabled="true"]):not(:has(:disabled)) .lucide-arrow-up-right { translate: 3px -3px; }
  [data-excar-motion] :is(a, button):hover:not(:disabled):not([aria-disabled="true"]):not(:has(:disabled)) .lucide-arrow-left { translate: -4px 0; }
}

@keyframes excar-step-in {
  from { opacity: .45; transform: translateX(var(--step-enter-x, 16px)); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes excar-success-in {
  from { opacity: .6; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes excar-seal-in {
  from { transform: scale(.85) rotate(-8deg); }
  to { transform: scale(1) rotate(0); }
}
@keyframes excar-page-out { to { opacity: 0; } }
@keyframes excar-page-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce), print {
  [data-excar-motion], [data-excar-motion] *, [data-excar-motion] *::before, [data-excar-motion] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-excar-motion] :is(button, a, label) { translate: none !important; scale: none !important; }
}