/* ==========================================
     1. MEDIA QUERIES RESPONSIVE (BREAKPOINTS)
     ========================================== */
 /*  .ssr-variant {
    display: block;
  }

  Mobile (fino a 574.98px) 
  @media (max-width: 574.98px) {
    .hidden-12dc1ih, .hidden-1l2mshm {
      display: none !important;
    }
  }
*/
  /* Tablet Piccolo (da 575px a 809.98px) 
  @media (min-width: 575px) and (max-width: 809.98px) {
    .hidden-1r42yzq, .hidden-19x9cn9 {
      display: none !important;
    }
  }
*/
  /* Tablet Grande (da 810px a 1199.98px) 
  @media (min-width: 810px) and (max-width: 1199.98px) {
    .hidden-t5bde7, .hidden-znwhhu {
      display: none !important;
    }
  }
*/
  /* Desktop (da 1200px in su) 
  @media (min-width: 1200px) {
    .hidden-72rtr7, .hidden-oi254i {
      display: none !important;
    }
  }
*/


/* Mobile (sotto i 574.98px) */
@media (max-width: 574.98px) {
  .esplorando-YYIGB .esplorando-lwnbtp {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    margin: 0 auto;
  }
}
  /* Tablet Piccolo (da 575px a 809.98px) */
  @media (min-width: 575px) and (max-width: 809.98px) {
    .esplorando-YYIGB .esplorando-lwnbtp {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Sposta il punto d'origine al centro perfetto dell'elemento */
    right: auto !important;
    margin: 0 auto;
  }
}

/* 1. Scrolling fluido nativo per tutta la pagina */
html {
  scroll-behavior: smooth;
}

/* 2. Micro-animazione elastica al passaggio/pressione sul pulsante "Back to top" */
.esplorando-1wivjs6 {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.esplorando-1wivjs6:hover {
  transform: translateY(-5px) scale(1.08); /* Effetto molla in alto */
}

.esplorando-1wivjs6:active {
  transform: translateY(0) scale(0.95); /* Schiacciamento al click */
}

  /* ==========================================
     2. KEYFRAMES ANIMAZIONI NATIVE
     ========================================== */

     /* Fade-in mantenendo il centraggio orizzontale (-50%) */
@keyframes fadeInCentered {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

.anim-fade-centered {
  opacity: 0;
  will-change: opacity;
  animation: fadeInCentered 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

     /* Entrata da destra mantenendo il centraggio verticale (-50%) */
@keyframes fadeInRightVerticallyCentered {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(150px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Classe pronta all'uso */
.anim-right-vcentered {
  opacity: 0;
  will-change: transform, opacity;
  animation: fadeInRightVerticallyCentered 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

     /* Entrata da sinistra mantenendo il centraggio verticale (-50%) */
@keyframes fadeInLeftVerticallyCentered {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-150px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Classe pronta all'uso */
.anim-left-vcentered {
  opacity: 0;
  will-change: transform, opacity;
  animation: fadeInLeftVerticallyCentered 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

  /* Dal basso verso l'alto */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(150px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Da sinistra verso destra */
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-150px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Da destra verso sinistra */
  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(150px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Fade-in sul posto (senza spostamento) */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Da sinistra mantenendo il centraggio orizzontale (-50%) */
  @keyframes fadeInLeftCentered {
    from {
      opacity: 0;
      transform: translateX(-50%) translateX(-150px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateX(0);
    }
  }

  /* Da destra mantenendo il centraggio orizzontale (-50%) */
  @keyframes fadeInRightCentered {
    from {
      opacity: 0;
      transform: translateX(-50%) translateX(150px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateX(0);
    }
  }


  /* ==========================================
     3. CLASSI CSS PRONTE ALL'USO
     ========================================== */

  .anim-up {
    opacity: 0;
    will-change: transform, opacity;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .anim-left {
    opacity: 0;
    will-change: transform, opacity;
    animation: fadeInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .anim-right {
    opacity: 0;
    will-change: transform, opacity;
    animation: fadeInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .anim-fade {
    opacity: 0;
    will-change: opacity;
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .anim-left-centered {
    opacity: 0;
    will-change: transform, opacity;
    animation: fadeInLeftCentered 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .anim-right-centered {
    opacity: 0;
    will-change: transform, opacity;
    animation: fadeInRightCentered 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }


  /* Stato iniziale nascosto */
.anim-fade, .anim-up, .anim-down, .anim-left, .anim-right {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.anim-up { transform: translateY(30px); }
.anim-down { transform: translateY(-30px); }
.anim-left { transform: translateX(-30px); }
.anim-right { transform: translateX(30px); }

/* Stato quando l'elemento entra nella viewport */
.anim-fade.visible, 
.anim-up.visible, 
.anim-down.visible, 
.anim-left.visible, 
.anim-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ==========================================
     4. RITARDI TEMPORALI (STAGGER EFFECT)
     ========================================== */
  .delay-1 { animation-delay: 0.15s; }
  .delay-2 { animation-delay: 0.30s; }
  .delay-3 { animation-delay: 0.45s; }
  .delay-4 { animation-delay: 0.60s; }


  /* Contenitore di Sfondo (Backdrop) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px); /* Effetto sfocatura di sfondo opzionale */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Stato iniziale per animazione */
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Riquadro della Modale (Flutter Route Transition) */
.modal-card {
  position: relative;
  width: 90%;
  max-width: 800px;
  height: 80vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;

  /* Simulazione DanteEssentialRoute: Fade + Scale + Slide verso l'alto */
  transform: translateY(20px) scale(0.95);
  transition: transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Stato APERTO dell'Overlay e della Card */
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay.active .modal-card {
  transform: translateY(0) scale(1);
}

/* Stili interni dell'iframe e del pulsante chiudi */
.modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  /*background: rgba(0, 0, 0, 0.1);*/
  background: none ! important;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 32px;
  width: 24px;
  color: #1A5A53;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
/*
.modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.2);
}
  */