/* App-specific React Bits motion adaptation. Full notice: licenses/react-bits-LICENSE.md.
   Keep the original spacious layout, neutral surfaces and normal document scrolling. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1) }

.brand-product, .domestic-model {
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 240ms var(--motion-ease);
}
.brand-toolbar button, .domestic-toolbar button, .brand-more,
.brand-chips label, .domestic-close, .brand-close {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
    box-shadow 220ms var(--motion-ease), transform 220ms var(--motion-ease);
}
.brand-product:focus-visible, .domestic-model:focus-visible,
.brand-toolbar button:focus-visible, .brand-more:focus-visible,
.brand-chips label:has(input:focus-visible) {
  outline: 2px solid var(--ink, #292524);
  outline-offset: 3px;
}
.brand-product:focus-visible, .domestic-model:focus-visible {
  border-color: #a8a29e;
  box-shadow: 0 6px 20px -12px #2925242e;
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .brand-product:hover, .domestic-model:hover {
    border-color: #b8b3ae;
    box-shadow: 0 8px 24px -14px #29252438;
  }
  .brand-toolbar button:hover, .domestic-toolbar button:hover, .brand-more:hover {
    transform: translateY(-1px);
  }
  .brand-toolbar button:active, .domestic-toolbar button:active, .brand-more:active {
    transform: translateY(0) scale(.985);
    transition-duration: 100ms;
  }
  #brand-dialog[open]::backdrop, #domestic-dialog[open]::backdrop, #details[open]::backdrop {
    animation: sf-backdrop-in 220ms ease-out backwards;
  }
}

@keyframes sf-backdrop-in { from { opacity:0 } to { opacity:1 } }

/* CSS stays fully usable if this script, Web Animations, or matchMedia is unavailable.
   JS also listens to preference changes and cancels its active animations immediately. */
@media (prefers-reduced-motion:reduce) {
  .brand-product, .domestic-model, .brand-toolbar button, .domestic-toolbar button,
  .brand-more, .brand-chips label, .domestic-close, .brand-close,
  #brand-dialog, #domestic-dialog, #details, #brand-dialog::backdrop,
  #domestic-dialog::backdrop, #details::backdrop {
    animation: none !important;
    transition: none !important;
  }
  .brand-product img, .domestic-model img { transform:none !important }
}