/* ==========================================
   ANIMATED BACKGROUND IMAGE - Stili per animazione
   L'immagine parte da formato quadrato e si allarga a rettangolare
   ========================================== */

/* Container dell'immagine animata */
.animated-bg-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  max-height: 100vh;
  width: 100%;
}

/* Immagine animata - Stato iniziale QUADRATO */
.animated-bg-image {
  /* Dimensioni iniziali: formato quadrato centrato */
  width: 50vw !important;
  height: 50vw !important;
  min-width: 50vw !important;
  min-height: 50vw !important;
  max-width: 50vw !important;
  max-height: 50vw !important;

  /* Background image - centra l'immagine */
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;

  /* Preparazione per animazioni smooth */
  will-change: transform, width, height;
  transform-style: preserve-3d;

  /* TRANSIZIONE FLUIDA per l'espansione */
  transition:
    width 1.2s cubic-bezier(0.645, 0.045, 0.355, 1),
    height 1.2s cubic-bezier(0.645, 0.045, 0.355, 1),
    min-width 1.2s cubic-bezier(0.645, 0.045, 0.355, 1),
    min-height 1.2s cubic-bezier(0.645, 0.045, 0.355, 1),
    max-width 1.2s cubic-bezier(0.645, 0.045, 0.355, 1),
    max-height 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Transform NON ha transition perché gestito dal parallax JS in tempo reale */
}

/* Stato EXPANDED - formato rettangolare a schermo intero */
.animated-bg-image.expanded {
  width: 100vw !important;
  height: 120vh !important;
  min-width: 100vw !important;
  min-height: 120vh !important;
  max-width: 100vw !important;
  max-height: 120vh !important;
}

/* Media queries per responsive */
@media screen and (max-width: 991px) {
  .animated-bg-image {
    /* Su tablet, quadrato più grande */
    width: 60vw !important;
    height: 60vw !important;
    min-width: 60vw !important;
    min-height: 60vw !important;
    max-width: 60vw !important;
    max-height: 60vw !important;
  }

  .animated-bg-image.expanded {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
}

@media screen and (max-width: 767px) {
  .animated-bg-image-wrapper {
    height: 70vh;
    max-height: 70vh;
  }

  .animated-bg-image {
    /* Su mobile, quadrato più grande */
    width: 80vw !important;
    height: 80vw !important;
    min-width: 80vw !important;
    min-height: 80vw !important;
    max-width: 80vw !important;
    max-height: 80vw !important;
  }

  .animated-bg-image.expanded {
    width: 100vw !important;
    height: 80vh !important;
    min-width: 100vw !important;
    min-height: 80vh !important;
    max-width: 100vw !important;
    max-height: 80vh !important;
  }
}