.hero-slides,
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slide {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 900ms ease, transform 7s ease;
}

.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-shade, .hero-copy, .hero-index, .hero-controls { z-index: 2; }
.hero-copy h1, .hero-copy > p { transition: opacity 220ms ease; }
.hero-copy.changing h1, .hero-copy.changing > p { opacity: 0; }

.hero-controls {
  position: absolute;
  right: max(5vw, 28px);
  bottom: 49px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-controls > button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(10,12,13,.32);
  color: #fff;
  font-size: 1rem;
  backdrop-filter: blur(8px);
}

[data-slide-dots] { display: flex; gap: 7px; }
[data-slide-dots] button { width: 28px; height: 4px; border: 0; padding: 0; background: rgba(255,255,255,.38); }
[data-slide-dots] button.active { background: var(--yellow); }

@media (max-width:700px) {
  .hero-slide { object-position: 62% center; }
  .hero-controls { right: 20px; bottom: 48px; }
  .hero-controls > button { width: 36px; height: 36px; }
  [data-slide-dots] button { width: 19px; }
  .hero-index { padding-right: 165px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-slide, .hero-copy h1, .hero-copy > p { transition: none; }
}