/* GUV 1 BIL motion layer, loaded after site.css.
   Local effects use transform and opacity; shared photos use native view transitions.
   Colors and radii come from tokens.css, nothing is hard-coded here. */
:root { --g-ease: cubic-bezier(0.16, 1, 0.3, 1); }

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

/* 2. Navigation: underline draws in from the left, current page keeps it */
.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 .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; } }

/* 3. Cards: the whole card is one link, focus ring moves to the card */
.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: .95em; color: var(--g-accent-ink); }
.car-price, .vehicle-price { font-variant-numeric: tabular-nums; }

/* Arrow nudge on links and buttons that end in an arrow icon */
.btn i.bi-arrow-right, .text-link i.bi-arrow-right, .car-card-link i {
  display: inline-block; transition: transform .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 preview dots (listing grid, mouse only) */
.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 .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 / .55); box-shadow: 0 0 0 1px rgb(0 0 0 / .3);
  transition: background-color .15s, transform .15s;
}
.car-card-dots span.is-on { background: #fff; transform: scale(1.25); }

/* 4. Detail page: price and booking button stay in view beside the gallery */
@media (min-width: 769px) {
  .vehicle-summary { position: sticky; top: 24px; align-self: start; }
  .vehicle-summary[data-summary-static] { position: static; }
}

/* 5. Page transitions: pages crossfade, the clicked car photo travels into the gallery */
@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: .5s; animation-timing-function: var(--g-ease); }
  ::view-transition-old(car-hero), ::view-transition-new(car-hero) { width: 100%; height: 100%; object-fit: cover; }

  /* Filtering: cars glide to their new places (class is set by site.js). */
  html.is-filtering::view-transition-group(*) { animation-duration: .34s; animation-timing-function: var(--g-ease); }
  html.is-filtering::view-transition-old(root),
  html.is-filtering::view-transition-new(root) { animation-duration: .18s; }
}
[data-gallery-main] { border-radius: var(--g-radius); }

@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; }
}