/* ==========================================================================
   STILI PER SFONDI PARALLAX (Spectra Container / CSS Backgrounds)
   ========================================================================== */

/* Abilita la transizione fluida dello sfondo sui container di Spectra */
.parallax-bg,
.parallax-bg-slow,
.parallax-bg-fast {
  background-size: cover !important;
  background-position: center 0%;
  background-repeat: no-repeat !important;
  will-change: background-position; /* Accelerazione hardware per lo scroll */
}



/* Stile iniziale per gli elementi con classe fade-up */



.fade-up {



  opacity: 0;



  transform: translateY(30px);



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}











.fade-in {



  opacity: 0;



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}







/* Stile iniziale per gli elementi con classe reveal */



.reveal {



  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);



}







/* Stile iniziale per fade-up solo su mobile */



@media screen and (max-width: 767px) {



  .fade-up-m {



    opacity: 0;



    transform: translateY(30px);



    transition: opacity 0.3s ease-out, transform 0.3s ease-out;



  }







/* Stile iniziale per reveal solo su mobile */



  .reveal-m {



    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);



  }



}











/* Stile iniziale per gli elementi con classe element */



.element {



  opacity: 0;         /* Elemento invisibile all'inizio */



  transform: translateY(100px); /* Spostato verso il basso di 100px */



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}







/* Stile iniziale per gli elementi con classe gs_reveal */



.gs_reveal {



  opacity: 0;         /* L'elemento è invisibile all'inizio */



  transform: translateY(100px); /* Spostato verso il basso di default */



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}







/* Per scorrimento da sinistra */



.gs_reveal_fromLeft {



  transform: translateX(-100px); /* Spostato a sinistra */



}







/* Per scorrimento da destra */



.gs_reveal_fromRight {



  transform: translateX(100px); /* Spostato a destra */



}







/* Per scorrimento dall'alto */



.gs_reveal_fromTop {



  transform: translateY(-200px); /* Spostato verso l'alto */



}







/* Per scorrimento dal basso */



.gs_reveal_fromBottom {



  transform: translateY(200px); /* Spostato verso il basso */



}







/* Per effetto flip */



.gs_reveal_flip {



  transform: rotateY(180deg); /* Inizia con una rotazione di 180° */



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}







/* Effetto Parallax */



.parallax {



  will-change: transform;  /* Ottimizza il rendering per animazioni */



}







/* Zoom-in */



.zoom-in {



  opacity: 0;



  transform: scale(0.8);  /* Elemento leggermente ridotto all’inizio */



  transition: transform 0.3s ease-out, opacity 0.3s ease-out;



}







/* Fade + Slide Diagonale */



.fade-slide-diagonal {



  opacity: 0;



  transform: translate(100px, 100px);  /* Spostamento diagonale all’inizio */



  transition: opacity 0.5s ease-out, transform 0.5s ease-out;



}







/* Overlay Scroll - Sovrapposizione scroll con dissolvenza







Questo effetto crea una sovrapposizione graduale di elementi, dove un elemento scorre sopra un altro con un effetto di dissolvenza.



*/



.overlay-scroll {



  opacity: 0;



  transform: translateY(100px);  /* Spostato verso il basso inizialmente */



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}







/* Sliding Overlay - Scorrimento orizzontale con sovrapposizione



In questo effetto, un elemento si scorre sopra un altro da sinistra a destra o da destra a sinistra.



*/



.slide-overlay {



  transform: translateX(-100%);  /* Inizia fuori dalla vista a sinistra */



  opacity: 0;



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}











/* Vertical Reveal with Overlay - Sovrapposizione e scorrimento verticale



In questo effetto, un elemento superiore scorre e rivela un altro elemento sottostante.*/



.vertical-reveal-overlay {



  transform: translateY(-100%);  /* Inizia fuori dallo schermo in alto */



  opacity: 0;



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}







/*Parallax Scroll with Overlay - Parallax con overlay



Questo effetto di sovrapposizione coinvolge un movimento parallax durante lo scroll, creando un’esperienza di profondità */



.parallax-overlay {



  transform: translateY(200px);  /* Spostato verso il basso inizialmente */



  opacity: 0;



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}







/*Zoom-In-Img per Immagini - Zoom per immagini



Questo effetto fa sì che l'immagine si zoomi gradualmente quando entra in visuale, creando un impatto visivo forte. */



.zoom-in {



  transform: scale(1.2);  /* Inizia zoomata */



  opacity: 0;  /* Invisibile fino a quando non è attivata */



  transition: opacity 0.3s ease-out, transform 0.3s ease-out;



}







/*Parallax per Image Hero



L'effetto parallax dà una sensazione di profondità, con l'immagine hero che si muove più lentamente rispetto al contenuto durante lo scroll */



.hero-section {



  position: relative;



  overflow: hidden;



  height: 100vh;



}







.hero-image {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 120%;  /* Più alta per l'effetto parallax */



  object-fit: cover;  /* Mantiene la proporzione */



}







/* Reveal per Immagini



Le immagini si "rivelano" con un effetto di maschera o di clipping, svelandosi man mano che entrano in visuale*/



.image-reveal {



  clip-path: inset(100% 0 0 0);  /* Nascondi l'immagine inizialmente */



  transition: clip-path 1s ease-out;



}







/* Slide and Fade per Hero Section



Un effetto in cui l'immagine hero scorre verso il basso mentre svanisce lentamente, aggiungendo un movimento dinamico alla pagina di apertura. */



.hero-slide {



  transform: translateY(-50px);  /* Spostata inizialmente in alto */



  opacity: 0;



  transition: opacity 1s ease-out, transform 1s ease-out;



}







/* Blur In" per Immagini



L'immagine inizia sfocata e diventa nitida mentre entra in visuale, creando un effetto di transizione interessante */



.blur-in {



  filter: blur(20px);  /* Inizia sfocata */



  opacity: 0;



  transition: opacity 0.3s ease-out, filter 0.3s ease-out;



}







/* Scrolling Orizzontale */



.horizontal-wrapper {



  display: flex;



  flex-wrap: nowrap;



  overflow: hidden;



  width: 100vw;



  height: 100vh;



}







.panel {



  flex: 0 0 100vw;



  height: 100vh;



  display: flex;



  align-items: center;



  justify-content: center;



}