/* One complete banner composition at every screen width. */
.hero-fullwidth.hero-banner-slider {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 9 / 4;
  overflow: hidden;
  background: #e9eee7;
  --box-depth: clamp(8px, 2.2vw, 34px);
}

.hero-banner-slider .hero-slides {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-fullwidth.hero-banner-slider .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: none;
  z-index: 0;
}

.hero-banner-slider .hero-slide.is-active,
.hero-banner-slider .hero-slide.is-leaving {
  opacity: 1;
  visibility: visible;
}

.hero-banner-slider .hero-slide.is-active { z-index: 2; }
.hero-banner-slider .hero-slide.is-leaving { z-index: 1; }
.hero-banner-slider .hero-slide::after { content: none; }

.hero-banner-link {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-banner-link:focus-visible { outline-offset: -5px; }

.hero-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transform: none;
  animation: none;
}

.hero-banner-slider .is-box-entering .hero-banner-image { opacity: 0; }

.slider-box-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  perspective: clamp(300px, 85vw, 1600px);
  perspective-origin: center;
}

.slider-box {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center;
  opacity: 0;
  animation: slider-box-enter 850ms cubic-bezier(.2, .65, .25, 1) both;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

.slider-box-front,
.slider-box-side,
.slider-box-bottom {
  position: absolute;
  display: block;
  backface-visibility: hidden;
}

.slider-box-front {
  inset: 0;
  background-repeat: no-repeat;
  transform: translateZ(var(--box-depth));
}

.slider-box-side {
  right: 0;
  top: 0;
  width: var(--box-depth);
  height: 100%;
  background: #174f49;
  transform-origin: right center;
  transform: rotateY(90deg);
}

.slider-box-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--box-depth);
  background: #a6b8aa;
  transform-origin: center bottom;
  transform: rotateX(-90deg);
}

@keyframes slider-box-enter {
  from {
    opacity: 0;
    transform: translate3d(var(--launch-x), var(--launch-y), calc(var(--box-depth) * -6)) rotateX(var(--rotation-x)) rotateY(var(--rotation-y)) scale(.7);
  }
  35% { opacity: 1; }
  to {
    opacity: 1;
    transform: translate3d(0, 0, calc(var(--box-depth) * -1)) rotateX(0) rotateY(0) scale(1);
  }
}

.banner-toolbar {
  position: absolute;
  bottom: 14px;
  left: 20px;
  right: 20px;
  height: 36px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.banner-dots,
.banner-controls { display: flex; align-items: center; pointer-events: auto; }
.banner-controls { position: absolute; right: 0; gap: 7px; }

.banner-controls .icon-button {
  width: 36px;
  height: 36px;
  background: #ffffffd9;
  border-color: #174f4933;
  color: #174f49;
  font-size: 16px;
}

.banner-controls .icon-button:hover { background: #fff; }

.slider-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.slider-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #174f49aa;
  background: #ffffffe0;
}

.slider-dot[aria-pressed="true"]::before { background: #174f49; box-shadow: 0 0 0 2px #ffffffb0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 650px) {
  .banner-toolbar { bottom: 4px; left: 6px; right: 6px; height: 24px; }
  .banner-controls { gap: 4px; }
  .banner-controls .icon-button { width: 24px; height: 24px; font-size: 12px; }
  .slider-dot { width: 24px; height: 24px; }
  .slider-dot::before { width: 6px; height: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .slider-box-layer { display: none; }
  .hero-banner-slider .is-box-entering .hero-banner-image { opacity: 1; }
  .slider-box { animation: none; }
}