.background-images {
  position: relative;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - var(--footer-top-height));
  height: calc(100vh - var(--footer-top-height));
  max-height: calc(100vh - var(--footer-top-height));
  overflow: hidden;
  background-color: #0d0f11;
}

.carousel {
  min-height: inherit;
  height: inherit;
  max-height: inherit;
  user-select: none;
}

.carousel-inner {
  min-height: inherit;
  height: inherit;
  max-height: inherit;
  user-select: none;
}

.carousel-item {
  min-height: inherit;
  height: inherit;
  max-height: inherit;
  user-select: none;
}

.background-images > .carousel > .carousel-inner > .carousel-item > img {
  width: 100%;
  min-height: inherit;
  height: inherit;
  max-height: inherit;
  object-fit: cover;
  user-select: none;
}

/* L'immagine resta piena: il contrasto per la barra di ricerca lo dà lo scrim
   qui sotto, non lo sbiadimento dell'immagine. Le variabili del tema restano
   valide, ma con una soglia minima per non appiattire la foto. */
.carousel-img {
  filter: var(--color-light-image-filter) saturate(1.06) contrast(1.03);
  opacity: max(var(--color-light-image-opacity), 0.92);
}
[data-theme='dark'] .carousel-img {
  filter: var(--color-dark-image-filter) saturate(1.04);
  opacity: max(var(--color-dark-image-opacity), 0.9);
}

/* Ken Burns: zoom lentissimo sulla slide attiva */
.carousel-item.active .carousel-img {
  animation: hero-ken-burns 14s ease-out both;
}

@keyframes hero-ken-burns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

/* Scrim: scurisce alto e basso per staccare navbar, barra di ricerca e footer,
   lasciando pulita la fascia centrale dell'immagine. */
.background-images::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(125% 90% at 50% 42%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.08) 24%,
      rgba(0, 0, 0, 0.06) 58%,
      rgba(0, 0, 0, 0.48) 100%
    );
}
[data-theme='dark'] .background-images::after {
  background:
    radial-gradient(125% 90% at 50% 42%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.2) 24%,
      rgba(0, 0, 0, 0.2) 58%,
      rgba(0, 0, 0, 0.6) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item.active .carousel-img {
    animation: none;
  }
}