/* Home hero swiper section-specific stylesheet.
   Core hero/swiper styles are provided by /dist/master.css. */

#home-hero-swiper {
  position: relative;
}

/*
  Thumbnail strip (.thumbs-wrapper) is z-index:3 in the bundled hero styles, while
  Swiper’s .swiper-pagination defaults to z-index:10 — so bullets/progress can paint
  on top of thumbnails (“sometimes” after layout/hydration). Keep thumbs and controls
  above main-hero pagination; keep pagination above inactive slides only.
*/
.hero .main-swiper > .swiper-pagination {
  z-index: 4;
}

/* Bundled hero sets bottom:-0.2rem up to ~912px, pulling bullets up into the thumbnail row. */
@media (max-width: 912px) {
  .hero .main-swiper > .swiper-pagination {
    bottom: 0.75rem !important;
  }
}

.hero .thumbs-wrapper {
  z-index: 12;
}

.hero .thumbs-wrapper .prev-slide,
.hero .thumbs-wrapper .next-slide {
  z-index: 14;
}

.hero .thumbs-wrapper .play-pause {
  z-index: 13;
}

/* Clip the per-slide autoplay bar so its fill cannot spill into adjacent slides. */
.hero .thumbs-wrapper .hero-slide-progress-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Bundled hero uses invalid border shorthand (color before width); fix the track. */
  border-bottom: 0.5rem solid var(--slate-transparent);
}

/*
  Bundled styled-components CSS breaks the fill rule: `.hero-slide-progress-bar::after{"," animation-...`
  The stray `","` makes the declaration block invalid so the blue progress never paints.
*/
/* scaleX fills left → right; width animation on ::after is flaky in some browsers */
@keyframes home-hero-slide-progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hero .thumbs-wrapper .swiper-slide-active .hero-slide-progress-bar::after,
.hero .thumbs-wrapper .swiper-slide-thumb-active .hero-slide-progress-bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  z-index: 1;
  transform-origin: left center;
  transform: scaleX(0);
  background-color: var(--InfraNova-red, #007aff);
  animation: home-hero-slide-progress-fill 7s linear forwards;
}