/* Localsewa v32.8.62 — Motion Design System, Phase A
   Scope: interaction tokens, buttons, inputs, cards, chips and custom dropdowns.
   Route/page navigation remains intentionally motion-free. */

:root {
  --ls-motion-instant: 80ms;
  --ls-motion-fast: 140ms;
  --ls-motion-base: 180ms;
  --ls-motion-slow: 260ms;
  --ls-motion-carousel: 380ms;
  --ls-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ls-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ls-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ls-press-scale: .985;
  --ls-hover-lift: -2px;
}

/* Normalize Tailwind-style transition utilities to one premium motion language. */
#root .transition,
#root .transition-all,
#root .transition-colors,
#root .transition-opacity,
#root .transition-shadow,
#root .transition-transform {
  transition-duration: var(--ls-motion-base) !important;
  transition-timing-function: var(--ls-ease-standard) !important;
}

/* Color/focus responses should feel quick; transforms slightly more deliberate. */
#root .transition-colors,
#root .transition-opacity {
  transition-duration: var(--ls-motion-fast) !important;
}

#root .transition-transform {
  transition-duration: var(--ls-motion-base) !important;
  transition-timing-function: var(--ls-ease-enter) !important;
}

/* Inputs: never animate geometry; only visual focus feedback. */
#root input,
#root textarea,
#root select {
  transition-property: border-color, background-color, color, box-shadow, opacity;
  transition-duration: var(--ls-motion-fast);
  transition-timing-function: var(--ls-ease-standard);
}

/* Interactive controls keep their dimensions stable while giving immediate feedback. */
#root button,
#root [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

#root button[class*="transition"],
#root [role="button"][class*="transition"] {
  transition-timing-function: var(--ls-ease-standard) !important;
}

/* Prevent exaggerated press/hover transforms from older rules. */
#root button[class*="active:scale-"]:active,
#root [role="button"][class*="active:scale-"]:active,
#root a[class*="active:scale-"]:active {
  transform: scale(var(--ls-press-scale)) !important;
}

/* Desktop cards: subtle lift only; mobile stays spatially stable. */
@media (hover: hover) and (pointer: fine) {
  #root [data-service-category].transition:hover,
  #root .ui-promotional-card.transition:hover,
  #root article.transition:hover,
  #root .group.transition:hover {
    transform: translateY(var(--ls-hover-lift));
  }
}

/* Custom dropdown layer: short opacity/translate entrance, no bounce or zoom. */
.ui-dropdown-layer {
  transform-origin: top center;
  animation: ls-dropdown-enter var(--ls-motion-base) var(--ls-ease-enter) both;
  will-change: transform, opacity;
}

.ui-dropdown-layer [role="option"] {
  transition-property: background-color, color, box-shadow;
  transition-duration: var(--ls-motion-fast);
  transition-timing-function: var(--ls-ease-standard);
}

/* Dropdown triggers use the same response speed regardless of page. */
.ls-services-sort-control,
.ls-emergency-sort-control,
[aria-haspopup="listbox"],
[aria-haspopup="menu"] {
  transition-property: border-color, background-color, color, box-shadow, opacity;
  transition-duration: var(--ls-motion-base);
  transition-timing-function: var(--ls-ease-standard);
}

/* Chips and pills: visual response only, no layout motion. */
#root button.rounded-full,
#root a.rounded-full,
#root [role="button"].rounded-full {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
  transition-duration: var(--ls-motion-fast);
  transition-timing-function: var(--ls-ease-standard);
}

/* Keep disabled/loading controls calm and stable. */
#root button:disabled,
#root [aria-disabled="true"] {
  transform: none !important;
}

@keyframes ls-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility: remove non-essential motion while preserving functional spinners. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ls-motion-instant: 0ms;
    --ls-motion-fast: 0ms;
    --ls-motion-base: 0ms;
    --ls-motion-slow: 0ms;
    --ls-motion-carousel: 0ms;
  }

  #root .transition,
  #root .transition-all,
  #root .transition-colors,
  #root .transition-opacity,
  #root .transition-shadow,
  #root .transition-transform,
  #root input,
  #root textarea,
  #root select,
  .ui-dropdown-layer,
  .ui-dropdown-layer [role="option"],
  .ls-services-sort-control,
  .ls-emergency-sort-control,
  [aria-haspopup="listbox"],
  [aria-haspopup="menu"] {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}