/* A shared motion rhythm: quick feedback, softer arrivals, no hidden content. */
:root {
  --premium-ease: cubic-bezier(.22, 1, .36, 1);
  --premium-feedback: 180ms;
  --premium-arrival: 620ms;
}

@keyframes premium-arrive {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes premium-copy-arrive {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .supreme-enter {
    animation-name: premium-arrive;
    animation-duration: var(--premium-arrival);
    animation-timing-function: var(--premium-ease);
  }

  .premium-enter {
    animation: premium-arrive var(--premium-arrival) var(--premium-ease)
      var(--motion-delay, 0ms) backwards;
  }

  .premium-copy-enter {
    animation: premium-copy-arrive 820ms var(--premium-ease)
      var(--motion-delay, 0ms) backwards;
  }

  .button:not(:disabled):active,
  .cart-link:active,
  .garage-chip:active,
  .garage-card button:not(:disabled):active {
    scale: .98;
  }
}

/* Focused content never waits for its arrival animation. */
.premium-enter:focus-within,
.premium-copy-enter:focus-within {
  animation: none !important;
}

.product-card,
.category-card,
.garage-card,
.garage-chip,
.vehicle-make,
.service-grid > .panel,
.studio-stage,
.account-panel,
.garage-strip {
  transition: border-color 260ms ease, background-color 260ms ease,
    box-shadow 360ms var(--premium-ease), translate 360ms var(--premium-ease);
}

.button,
.cart-link,
.garage-chip,
.garage-card button,
.fitment-actions button,
.photo-expand,
.viewer-controls button,
.gallery-close,
.menu-button,
.menu-toggle {
  transition: background-color var(--premium-feedback),
    border-color var(--premium-feedback), color var(--premium-feedback),
    box-shadow 280ms var(--premium-ease), transform 280ms var(--premium-ease),
    scale var(--premium-feedback) var(--premium-ease);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: border-color 220ms ease, background-color 220ms ease,
    box-shadow 260ms var(--premium-ease);
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: #71899d;
  box-shadow: 0 0 0 3px #34566f0c;
}

.vehicle-step {
  transition: border-color 260ms ease, background-color 260ms ease,
    box-shadow 320ms var(--premium-ease);
}

.vehicle-step:focus-within {
  border-color: #c2d0dc;
}

.vehicle-family a,
.filters > a,
.section-heading > a,
.breadcrumb a,
.vehicle-browse-link,
.product-fitment-help,
.header-call,
.header-garage,
.header-account,
footer a {
  transition: color 200ms ease, border-color 240ms ease,
    background-color 240ms ease;
}

.garage-card[aria-current="true"],
.garage-chip[aria-pressed="true"],
.garage-chip[aria-current="true"] {
  border-color: #7f98ab;
}

.product-photo-thumbnails button,
.view-switch button,
.delivery-options label {
  transition: border-color 200ms ease, background-color 220ms ease,
    color 180ms ease, box-shadow 240ms var(--premium-ease);
}

.delivery-options label:has(input:checked) {
  border-color: #8499af;
  background-color: #f5f8fb;
  box-shadow: inset 0 0 0 1px #8499af20;
}

.site-header nav a:focus-visible::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-card:hover,
  .category-card:hover,
  .garage-card:hover,
  .service-grid > .panel:hover {
    border-color: #ccd8e2;
    box-shadow: 0 12px 30px #1b34420c;
    translate: 0 -3px;
  }

  .garage-chip:hover,
  .vehicle-family a:hover {
    box-shadow: 0 4px 14px #1b344208;
  }

  .photo-expand:hover,
  .viewer-controls button:hover,
  .gallery-close:hover {
    background-color: #e7eef4;
    scale: 1.045;
  }

}

/* Native navigation enhancement; unsupported browsers keep normal navigation. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: supreme-header; }
  #main { view-transition-name: supreme-page; }

  ::view-transition-group(supreme-header) {
    animation-duration: 280ms;
    animation-timing-function: var(--premium-ease);
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(supreme-header),
  ::view-transition-new(supreme-header) {
    animation: none;
  }

  ::view-transition-old(supreme-page) {
    animation: premium-page-out 180ms ease-out both;
  }

  ::view-transition-new(supreme-page) {
    animation: premium-page-in 360ms var(--premium-ease) both;
  }
}

@keyframes premium-page-out {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes premium-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  .premium-enter,
  .premium-copy-enter,
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .product-card,
  .category-card,
  .garage-card,
  .garage-chip,
  .service-grid > .panel,
  .photo-expand,
  .viewer-controls button,
  .gallery-close {
    translate: none !important;
    scale: none !important;
  }
}