/* 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;
}

/* Stile iniziale per gli elementi con classe reveal */
.reveal {
  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 
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
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;
}

/* Vertical Reveal with Overlay
In questo effetto, un elemento superiore scorre e rivela un altro elemento sottostante.*/
.slide-overlay {
  transform: translateX(-100%);  /* Inizia fuori dalla vista a sinistra */
  opacity: 0;
}

/* Vertical Reveal with Overlay
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
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;
}

/*Zoom-In-Img per Immagini
Questo effetto fa sì che l'immagine si zoomi gradualmente quando entra in visuale, creando un impatto visivo forte. */
.zoom-in-img {
  transform: scale(1.2);  /* Inizia zoomata */
  opacity: 0;  /* Invisibile fino a quando non è attivata */
}

/*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;
}

.pip {
    opacity: 1;
    transform: translate(0px, 0px);
}