/* =============================================================
   Bookstacks and Stories — hero slideshow
   -------------------------------------------------------------
   A cross-fading background carousel behind the hero copy.

   The final slide is the supplied Hero.png promotional banner,
   which already carries its own typography and QR codes. On that
   slide the hero's own text overlay and gradient are hidden so
   nothing sits on top of the artwork, and the image is contained
   rather than cropped so the whole banner stays readable.
   ============================================================= */

.hero__slides {
  position: absolute; inset: 0; z-index: -2;
}

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The promotional banner slide: show it whole, not cropped. */
.hero__slide--plain { background: var(--black); }
.hero__slide--plain img {
  object-fit: contain;
  object-position: center;
}

/* Per-slide copy ---------------------------------------------- */
/* Every text slide has its own overlay; they stack in the same
   place and only the active one is visible. */
.hero__inner {
  position: relative;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
}
.hero__inner.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Slides after the first are pulled back on top of the first so the
   hero keeps the height of its tallest slide without stacking. */
.hero__inner + .hero__inner {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
}

/* When the plain banner slide is showing, the darkening gradient
   steps out of the way too. */
.hero.is-plain::after { opacity: 0; }
.hero::after { transition: opacity .6s var(--ease); }

/* Dots --------------------------------------------------------- */
.hero__dots {
  position: absolute;
  left: 50%; bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(16, 12, 10, .45);
  backdrop-filter: blur(6px);
}
.hero__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, .75); }
.hero__dot.is-active { background: var(--gold); transform: scale(1.35); }

/* With motion reduced the slideshow holds on the first slide and
   the dots remain as manual controls. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero.is-plain .hero__inner { transition: none; }
}

/* Without JS the first slide and its copy are shown, and the dots hide. */
.no-js .hero__slide:first-child { opacity: 1; }
.no-js .hero__inner:first-of-type {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.no-js .hero__dots { display: none; }

@media (max-width: 640px) {
  .hero__dots { bottom: .75rem; }
}