/* Contenitore principale: 200vh */
.ltri-container {
  position: relative;
  width: 100%;
  height: 300vh; /* doppia altezza finestra */
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* IMMAGINE sticky: rimane "pinnata" finché scorri 
   e la trasformiamo via JS */
.ltri-sticky-image {
  position: sticky;
  top: 0;  /* la "pinna" in alto */
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  transform-origin: center center;
  z-index: 1; /* sta dietro il testo */
}

/* TESTO sticky: parte nascosto e poi si sposta su sinistra */
.ltri-sticky-text {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  /* Non metto background (o metti un semitrasparente se vuoi) */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* allinea a sinistra */
  padding: 40px;
  z-index: 2; /* sta davanti all'immagine */
  transform: translateX(-100%); /* fuori schermo a sinistra */
  opacity: 0; /* nascosto */
}

/* Esempio di stile del testo */
.ltri-sticky-text .ltri-text-inner {
  max-width: 600px;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 4px;
}

  .ltri-text-inner {
    text-align: center !important;
  }


@media (max-width: 768px) {

  .ltri-sticky-text {
    transform: none !important;
    width: auto !important;
    opacity: 1 !important; /* o quello che vuoi */
    height: 70vh;
  }
  
    .ltri-container {
    height: auto; /* no 300vh */
  }
  
    .ltri-sticky-image {
    transform: none !important;
    width: auto !important;
    opacity: 1 !important; /* o quello che vuoi */
    height: 70vh;
  }
  
  .ltri-text-inner {
    max-width: 100% !important;
    background: none !important;
  }
}