/* ——— SEZIONE ORIENTAMENTO (versione snella e senza duplicati) ——— */





/* │ CONTENITORE PRINCIPALE │ */


.orientamento-story {


  position: relative;


  width: 100%;


  min-height: 100vh;


  background: #35392a;


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  padding: 8vh 0 3vh;


  box-sizing: border-box;


  overflow: hidden;


  z-index: 0;


  text-align: center;


}





/* │ IMMAGINI LATERALI (desktop) │ */


.orientamento-bg-imgs {


  position: absolute;


  inset: 0;


  z-index: 1;


  pointer-events: none;


}





.orientamento-bg-img {


  position: absolute;


  top: 50%;


  transform: translateY(-50%);


  object-fit: contain;


  max-height: 100vh;


  width: auto;


  transition: transform 1.2s cubic-bezier(.22,1,.36,1),


              opacity 1.2s cubic-bezier(.22,1,.36,1),


              left 1.2s cubic-bezier(.22,1,.36,1),


              right 1.2s cubic-bezier(.22,1,.36,1);


  will-change: transform, opacity, left, right;


}





.orientamento-bg-left {


  left: -30vw;


  max-width: 47vw;


}





.orientamento-bg-right {


  right: -30vw;


  max-width: 47vw;


}





/* │ HEADLINE │ */


.orientamento-headline {


  font-family: 'Playfair Display', serif;


  font-size: clamp(2rem, 4vw, 2.8rem);


  font-weight: 600;


  color: #fff;


  margin: 6vh 0 3vh;


  position: relative;


  z-index: 2;


}





/* │ CONTENUTO GENERICO │ */


.orientamento-content {


  max-width: 900px;


  width: 100%;


  margin: 0 auto;


  padding: 0 2rem;


}





/* │ SINGOLI STEP DI TESTO │ */


.orientamento-step {


  opacity: 0;


  transform: translateY(60px);


  transition: opacity 1.1s cubic-bezier(.22,1,.36,1),


              transform 1.1s cubic-bezier(.22,1,.36,1);


  font: 500 clamp(1.3rem, 2.8vw, 2.6rem)/1.4 'Inter', sans-serif;


  color: #fff;


  text-align: center;


  max-width: 900px;


  width: 100%;


  margin: 2rem auto;


  padding: 1.4rem 1rem;


  background: none;


  box-shadow: none;


  text-shadow: 0 1px 4px rgba(0,0,0,.3);


  position: relative;


}





.orientamento-step.visible {


  opacity: 1;


  transform: translateY(0);


}





/* Evidenziazioni */


.orientamento-step em {


  color: #afbdad;


  font-style: italic;


  font-weight: 600;


}





.em-alt {


  color: #d29661cb;


  font-style: italic;


  font-weight: 600;


}





.highlight-full {


  display: inline-block;


  background: linear-gradient(to top, #afbdad 10%, transparent 10%);


  background-repeat: no-repeat;


  background-size: 0% 100%;


  transition: background-size .6s ease-out;


}





.highlight-full.visible {


  background-size: 100% 100%;


}





/* ——— FRECCIA DI ORIENTAMENTO ——— */


.orientamento-arrow-wrapper svg,


.orientamento-arrow-wrapper > img,


.orientamento-arrow-wrapper .arrow-down-svg {


  position: relative;


  left: 50%;


  transform: translateX(-50%);


  animation: orient-bounce 2s infinite !important;


}





@keyframes orient-bounce {


  0%, 100% { transform: translateX(-50%) translateY(0); }


  50%      { transform: translateX(-50%) translateY(0px); }


}





/* │ WRAPPER DESKTOP / MOBILE │ */


.orientamento-steps {


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


}





.orientamento-mobile-wrapper {


  display: none;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  width: 100%;


  padding: 4vh 0;


  background-size: contain; /* <-- PATCH AGGIUNTA */


  background-position: top center; /* <-- PATCH AGGIUNTA */


  background-repeat: no-repeat;


  transition: background-image .5s cubic-bezier(.45,.13,.31,.99);


}





.orientamento-mobile-wrapper .orientamento-content {


  padding: 0 5vw;


}





/* │ ANIMAZIONE ZOOM LAZY │ */


[data-animate] {


  opacity: 0;


  transform: scale(.85);


  transition: opacity 1.5s ease, transform 1.5s ease;


}





[data-animate].in-view.zoom-in {


  opacity: 1;


  transform: scale(1);


}





/* ─── MEDIA QUERIES ─── */


@media (max-width: 900px) {


  .orientamento-bg-imgs,


  .orientamento-steps {


    display: none;


  }





  .orientamento-mobile-wrapper {


    display: flex;


    background-size: contain;     /* <-- FIX SU TABLET E MOBILE */


    background-position: top center;


  }


}





@media (max-width: 768px) {


  .orientamento-headline {


    font-size: 2rem;


    padding: 0 1rem;


  }





  .orientamento-step {


    margin: 1.5rem auto;


    padding: 1rem;


  }


}





@media (min-width: 901px) {


  .orientamento-mobile-wrapper {


    display: none;


  }





  .orientamento-steps {


    display: flex;


  }


}





.arrow-down-svg3 {


  position: absolute;


  bottom: 24px;


  left: 50%;


  transform: translateX(-50%);


  animation: bounce-arrow 2s infinite;


  z-index: 2;


}





@keyframes bounce-arrow {


  0%, 100% {


    transform: translateX(-50%) translateY(0);


  }


  50% {


    transform: translateX(-50%) translateY(8px);


  }


}