.penstock-hero-carousel {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
}

.home-hero:has(> .penstock-hero-carousel)::before {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--body-bg-color) 96%, transparent) 0%, color-mix(in oklab, var(--body-bg-color) 82%, transparent) 52%, color-mix(in oklab, var(--body-bg-color) 58%, transparent) 100%),
    linear-gradient(0deg, color-mix(in oklab, var(--body-bg-color) 20%, transparent), color-mix(in oklab, var(--body-bg-color) 20%, transparent));
}

.penstock-hero-carousel__slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: var(--phc-motion-transform, translate3d(0, 0, 0)) var(--phc-flip-transform, scaleX(1));
  object-fit: cover;
  transition:
    opacity 900ms ease,
    transform 900ms ease;
  will-change: opacity, transform;
}

.penstock-hero-carousel__slide.is-flipped {
  --phc-flip-transform: scaleX(-1);
}

.penstock-hero-carousel__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.penstock-hero-carousel__slide.is-next {
  opacity: 1;
  z-index: 2;
}

.penstock-hero-carousel__slide.is-exiting {
  opacity: 0;
  z-index: 1;
}

.penstock-hero-carousel[data-transition-type="zoom"] .penstock-hero-carousel__slide {
  --phc-motion-transform: scale(1.035);
}

.penstock-hero-carousel[data-transition-type="zoom"] .penstock-hero-carousel__slide.is-active,
.penstock-hero-carousel[data-transition-type="zoom"] .penstock-hero-carousel__slide.is-next {
  --phc-motion-transform: scale(1);
}

.penstock-hero-carousel[data-transition-type="drift"] .penstock-hero-carousel__slide {
  transition:
    opacity 1100ms ease,
    transform 2200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .penstock-hero-carousel__slide {
    transition: none;
  }
}