:root {
  --g-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Form status */
@media (prefers-reduced-motion: no-preference) {
  .form-status {
    animation: g-rise 0.4s var(--g-ease) both;
  }
}
@keyframes g-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Menu underline */
.primary-navigation a {
  position: relative;
}
.primary-navigation a[aria-current='page'] {
  text-decoration: none;
}
.primary-navigation a::after {
  content: '';
  position: absolute;
  inset: auto 0 7px;
  height: 2px;
  background: var(--g-accent-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--g-ease);
}
.primary-navigation a:hover::after,
.primary-navigation a:focus-visible::after,
.primary-navigation a[aria-current='page']::after {
  transform: scaleX(1);
}
@media (max-width: 768px) {
  .primary-navigation a::after {
    inset-inline: 12px;
  }
}

/* Car cards, the whole card is a link */
.car-card {
  position: relative;
}
.car-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.car-card-link {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
@supports selector(:has(*)) {
  .car-card h3 a:focus-visible {
    outline: none;
  }
  .car-card:has(h3 a:focus-visible) {
    outline: 3px solid var(--g-accent-ink);
    outline-offset: -3px;
  }
}
.car-card:hover h3 a {
  color: var(--g-accent-ink);
}
.car-card-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.car-card-facts li i {
  font-size: 0.95em;
  color: var(--g-accent-ink);
}
.car-price,
.vehicle-price {
  font-variant-numeric: tabular-nums;
}

/* Arrow icons move a little on hover */
.btn i.bi-arrow-right,
.text-link i.bi-arrow-right,
.car-card-link i {
  display: inline-block;
  transition: transform 0.3s var(--g-ease);
}
.btn:hover i.bi-arrow-right,
.text-link:hover i.bi-arrow-right,
.car-card:hover .car-card-link i {
  transform: translateX(4px);
}

/* Photo dots on the car list */
.car-card-photo {
  position: relative;
}
.car-card-dots {
  position: absolute;
  inset: auto 0 10px;
  display: flex;
  justify-content: center;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.car-card-photo.is-scrubbing .car-card-dots {
  opacity: 1;
}
.car-card-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
  transition:
    background-color 0.15s,
    transform 0.15s;
}
.car-card-dots span.is-on {
  background: #fff;
  transform: scale(1.25);
}

/* Car page: sticky price and booking button */
@media (min-width: 769px) {
  .vehicle-summary {
    position: sticky;
    top: 24px;
    align-self: start;
  }
  .vehicle-summary[data-summary-static] {
    position: static;
  }
}

/* Page transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  [data-gallery-main] {
    view-transition-name: car-hero;
  }
  ::view-transition-group(car-hero) {
    animation-duration: 0.5s;
    animation-timing-function: var(--g-ease);
  }
  ::view-transition-old(car-hero),
  ::view-transition-new(car-hero) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* is-filtering is set by site.js */
  html.is-filtering::view-transition-group(*) {
    animation-duration: 0.34s;
    animation-timing-function: var(--g-ease);
  }
  html.is-filtering::view-transition-old(root),
  html.is-filtering::view-transition-new(root) {
    animation-duration: 0.18s;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  [data-gallery-main] {
    view-transition-name: none !important;
  }
  .btn:hover i.bi-arrow-right,
  .text-link:hover i.bi-arrow-right,
  .car-card:hover .car-card-link i {
    transform: none;
  }
}