/* ==========================================================================
   FOTON HDT — homepage hero carousel ("重卡合集")

   The rotation is CSS-animation driven (browsers throttle background JS timers,
   which froze the earlier JS version). Each caption lives INSIDE its slide, so
   the image and its model name share one animated element and can never fall
   out of sync or stack on top of each other.

   Keyframe percentages depend on the slide count and are generated by build.mjs
   into a <style> block on the homepage.
   ========================================================================== */

.hero--carousel { position: relative; }

/* ---------- slide stack ---------------------------------------------------- */
.hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: heroKB 9s ease-out both;
}
.hero-slide:nth-child(2) img { animation-delay: .1s; }
.hero-slide:nth-child(3) img { animation-delay: .2s; }
.hero-slide:nth-child(4) img { animation-delay: .3s; }
.hero-slide:nth-child(5) img { animation-delay: .4s; }
.hero-slide:nth-child(6) img { animation-delay: .5s; }
@keyframes heroKB {
  from { transform: scale(1.015); }
  to   { transform: scale(1.10); }
}

.hero--carousel::before { z-index: 1; }
.hero--carousel .hero-inner,
.hero--carousel .hero-dots-bar,
.hero--carousel .hero-stats { position: relative; z-index: 2; }

/* ---------- caption (lives inside the slide) ------------------------------- */
/* The dots bar and the stats band sit at the bottom of the hero in normal flow,
   so the caption is lifted clear of both. Kept as variables because the band
   grows taller when the stat cells wrap on narrow screens. */
.hero--carousel { --stats-h: 132px; --dots-h: 40px; }
.hero-caption {
  position: absolute;
  inset: auto 0 calc(var(--stats-h) + var(--dots-h) + 1.4rem) 0;
  padding-inline: max(24px, calc((100vw - var(--container, 1200px)) / 2 + 24px));
  pointer-events: none; /* the link below re-enables pointer events */
}
.hero-caption-inner { max-width: 620px; }
.hero-reel-kicker {
  display: block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7fb2f0;
  margin-bottom: .5rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.hero-caption-link {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .65);
  transition: color .2s ease;
}
.hero-caption-link:hover { color: #9dc2f5; }
.hero-caption-link strong { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.012em; }
.hero-caption-link em { font-style: normal; font-size: .83rem; color: #c3d2e6; }
.hero-caption-link i {
  margin-left: auto;
  font-style: normal;
  opacity: .75;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}
.hero-caption-link:hover i { transform: translateX(5px); opacity: 1; }

/* ---------- progress dots -------------------------------------------------- */
.hero-dots-bar { padding-block: .2rem .9rem; }
.hero-dots { display: flex; gap: 7px; }
.hero-dot {
  position: relative;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .26);
  overflow: hidden;
}
.hero-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent, #e63329);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero--carousel:not(.hero--auto) .hero-dot:first-child { background: rgba(255, 255, 255, .92); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide img { animation: none; transform: none; }
}

@media (max-width: 760px) {
  .hero--carousel { --stats-h: 226px; --dots-h: 34px; }
  .hero-caption-inner { max-width: none; }
  .hero-caption-link { flex-wrap: wrap; gap: .2rem .55rem; }
  .hero-caption-link strong { font-size: .97rem; }
  .hero-caption-link em { width: 100%; font-size: .78rem; }
  .hero-caption-link i { display: none; }
  .hero-dot { width: 28px; }
}