/* Keep the hero artwork unobstructed; the only control is the slim bar selector. */
.hero-rail,
.hero-controls {
  display: none;
}

.hero-indicators {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.25rem, 3vw, 3rem);
  display: flex;
  gap: 0.75rem;
  width: min(24vw, 360px);
  transform: translateX(-50%);
}

.hero-indicators button {
  flex: 1;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.24);
  transition: background-color 180ms ease, transform 180ms ease;
}

.hero-indicators button:hover,
.hero-indicators button:focus-visible,
.hero-indicators button.is-active {
  background: #fff;
}

.hero-indicators button:hover {
  transform: scaleY(1.55);
}

@media (max-width: 800px) {
  .hero-indicators {
    bottom: 1.1rem;
    width: min(48vw, 225px);
    gap: 0.45rem;
  }
}