/* Home page: hero car showcase (index.ejs #heroCarousel, logic in /js/home.js)
   and the brand-logo marquee below it. Loaded after styles.css and overrides
   the older .hero-carousel / .brands-scroll rules there. */

/* ── Car showcase ─────────────────────────────────────────────────────── */
.hero-carousel { isolation: isolate; }
.hero-carousel-slide {
  transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .5s ease, filter .5s ease;
}
.hero-carousel-slide img { transition: transform .5s ease; }
/* Soft floor shadow under each car; strongest under the active one. */
.hero-carousel-slide::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 7%; height: 9%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); filter: blur(5px);
  opacity: .45; transition: opacity .5s ease; pointer-events: none;
}
.hero-carousel-slide.is-center { transform: translate(-50%, -50%) scale(1.07); filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)); }
.hero-carousel-slide.is-center::after { opacity: 1; }
.hero-carousel-slide.is-left, .hero-carousel-slide.is-right { filter: brightness(.78); }
.hero-carousel-slide.is-left:hover, .hero-carousel-slide.is-right:hover { filter: brightness(1); }
.hero-carousel-slide:focus-visible { outline: 2px solid var(--accent, #d4af37); outline-offset: -4px; border-radius: 12px; }

/* Prev / next */
.hero-carousel-nav {
  position: absolute; top: 42%; z-index: 3; translate: 0 -50%; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(10,14,19,.55); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.hero-carousel-nav--prev { left: 12px; }
.hero-carousel-nav--next { right: 12px; }
.hero-carousel-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-carousel-nav:hover { background: var(--accent, #d4af37); border-color: var(--accent, #d4af37); color: #0b1016; }
.hero-carousel-nav--prev:hover { transform: translateX(-2px); }
.hero-carousel-nav--next:hover { transform: translateX(2px); }
.hero-carousel-nav:focus-visible, .hero-carousel-dot:focus-visible { outline: 2px solid var(--accent, #d4af37); outline-offset: 3px; }

/* Indicators: dots, the active one is a pill that fills while autoplay runs. */
.hero-carousel-dots { position: absolute; top: 14px; left: 50%; z-index: 3; translate: -50% 0; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 999px; background: rgba(10,14,19,.45); backdrop-filter: blur(6px); }
.hero-carousel-dot {
  position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; overflow: hidden; cursor: pointer;
  background: rgba(255,255,255,.38); transition: width .35s cubic-bezier(.22,1,.36,1), background-color .2s ease;
}
.hero-carousel-dot::before { content: ""; position: absolute; inset: -9px -4px; } /* larger hit area */
.hero-carousel-dot:hover { background: rgba(255,255,255,.7); }
.hero-carousel-dot.is-active { width: 30px; background: rgba(255,255,255,.28); overflow: visible; }
.hero-carousel-dot.is-active::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent, #d4af37); transform-origin: left center; }
.hero-carousel.is-playing .hero-carousel-dot.is-active::after { animation: hero-carousel-progress var(--hc-autoplay, 4200ms) linear both; }
@keyframes hero-carousel-progress { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }

.hero-carousel-info { pointer-events: none; }
.hero-carousel-info a { pointer-events: auto; }

/* Phones: car fills the width, then title and CTA underneath (no text on top of the car). */
@media (max-width: 768px) {
  .hero-carousel { height: auto; display: flex; flex-direction: column; }
  .hero-carousel::before { inset: 24px 14% auto; height: 150px; opacity: .1; } /* logo watermark stays behind the car, not the title */
  .hero-carousel-track { height: 205px; flex: none; }
  .hero-carousel-slide { width: 86%; height: 82%; top: 54%; }
  .hero-carousel-slide.is-left { transform: translate(-128%, -50%) scale(.8); }
  .hero-carousel-slide.is-right { transform: translate(28%, -50%) scale(.8); }
  .hero-carousel-nav { top: 110px; width: 36px; height: 36px; }
  .hero-carousel-nav--prev { left: 8px; }
  .hero-carousel-nav--next { right: 8px; }
  .hero-carousel-dots { top: 10px; }
  .hero-carousel-info, .hero-carousel-info--cta {
    position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; height: auto;
    padding: 0 14px 14px; background: none; text-align: center;
  }
  .hero-carousel-copy { display: block; align-self: auto; }
  .hero-carousel-info h2 { margin: 0; font-size: 1.3rem; }
  .hero-find-car-btn { width: 100%; align-self: auto; padding: .8rem 1rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-dot.is-active::after { animation: none; }
  .hero-carousel-slide:hover img { transform: none; }
}

/* ── Brand-logo marquee ───────────────────────────────────────────────────
   The track holds 4 identical copies of the logo set. Spacing is a margin on
   every item (not a flex gap), so the track is exactly 4 x one copy wide and
   translateX(-25%) lands precisely on the start of the next copy - no jump. */
.brands-scroll-wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.brands-scroll-wrap::before, .brands-scroll-wrap::after { content: none; } /* old solid-colour fades showed as dark blocks over the photo background */
.brands-scroll-track { gap: 0; animation: brands-marquee-loop 24s linear infinite; }
.brands-scroll-item { margin-right: 2.5rem; }
.brands-scroll-item img { width: 56px; height: 56px; }
@keyframes brands-marquee-loop { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (hover: hover) {
  .brands-scroll-section:hover .brands-scroll-track { animation-play-state: paused; }
}
@media (max-width: 640px) {
  .brands-scroll-wrap { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .brands-scroll-track { gap: 0; animation-duration: 20s; }
  .brands-scroll-item { margin-right: 1.8rem; }
  .brands-scroll-item img { width: 44px; height: 44px; }
}
/* Reduced motion: one static, centred, wrapping row. */
@media (prefers-reduced-motion: reduce) {
  .brands-scroll-wrap { -webkit-mask-image: none; mask-image: none; }
  .brands-scroll-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1rem; padding: 0 1rem; }
  .brands-scroll-item { margin: 0 1rem; }
  .brands-scroll-item.is-clone { display: none; }
}

/* Benefit cards: a long word (e.g. RU headings) could push a grid column wider than the page. */
.benefits-grid > .benefit-card { min-width: 0; overflow-wrap: break-word; hyphens: auto; }