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

}

/* Fix Cover block "sfondo fisso" + ScrollSmoother:
   background-attachment:fixed non funziona dentro un antenato con transform.
   Disattiviamo l'attachment nativo e lo sostituiamo via GSAP. */
   @media screen and (min-width: 767px){
.wp-block-cover__image-background.has-parallax,
.wp-block-cover.has-parallax {
  background-attachment: scroll !important;
  background-size: 115% !important; /* margine extra per il pan senza "buchi" */}
}








/* =========================================================
   FOOTER REVEAL — Astra + ScrollSmoother
   =========================================================
   Il footer resta nel normale flusso della pagina ma si ferma
   sul fondo della viewport quando raggiunge il bordo inferiore.
   Il contenuto principale gli passa davanti, creando il
   caratteristico effetto "reveal".
   ========================================================= */

@media screen and (min-width: 768px) {

  /* Footer dietro al contenuto */
  html.footer-reveal-ready #colophon {
    position: sticky;
    bottom: 0;
    z-index: 1;
  }

  /*
   * Il contenuto deve avere uno sfondo pieno e un livello
   * superiore, altrimenti il footer sarebbe visibile attraverso
   * le sezioni trasparenti.
   */
  html.footer-reveal-ready #content {
    position: relative;
    z-index: 2;
    background-color: #fff;
  }

  /*
   * Evita che eventuali elementi del Footer Builder ereditino
   * livelli di sovrapposizione superiori al footer.
   */
  html.footer-reveal-ready #colophon {
    isolation: isolate;
  }

  /*
   * Se il tema Astra assegna un background al contenitore
   * principale, lo manteniamo sopra il footer.
   */
  html.footer-reveal-ready .site-content {
    position: relative;
    z-index: 2;
  }

  /*
   * L'header deve restare sopra durante lo scroll.
   */
  html.footer-reveal-ready #masthead {
    position: relative;
    z-index: 3;
  }
}

/*
 * Accessibilità: chi usa "riduci movimento" non deve ricevere
 * effetti di movimento aggiuntivi. Il footer rimane comunque
 * normalmente leggibile.
 */
@media (prefers-reduced-motion: reduce) {
  html.footer-reveal-ready #colophon {
    position: relative;
    bottom: auto;
  }

  html.footer-reveal-ready #content,
  html.footer-reveal-ready .site-content {
    z-index: auto;
  }
}

/* =========================================================
   FOOTER REVEAL v2 — Astra + ScrollSmoother
   ========================================================= */
@media screen and (min-width: 768px) {

  html.footer-reveal-ready #colophon {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
  }

  /* Il contenuto rimane sopra il footer. */
  html.footer-reveal-ready #smooth-wrapper,
  html.footer-reveal-ready .smooth-wrapper {
    position: relative;
    z-index: 1;
  }

  html.footer-reveal-ready #page,
  html.footer-reveal-ready #content {
    position: relative;
    z-index: 1;
  }

  /* Mantiene il contenuto opaco dove serve per creare la copertura. */
  html.footer-reveal-ready #content {
    background-color: #fff;
  }

  /* Una lieve ombra rende più evidente il distacco tra contenuto e footer. */
  html.footer-reveal-ready #colophon {
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.08);
  }
}

@media (max-width: 767px) {
  html.footer-reveal-ready #colophon {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.footer-reveal-ready #colophon {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    box-shadow: none;
  }
}

/* =========================================================
   SCROLL MARQUEE — testo gigante orizzontale legato allo scroll
   ========================================================= */
.scroll-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-marquee-track {
  display: inline-block;
  width: max-content;
  min-width: max-content;
  white-space: nowrap;
  will-change: transform;
}

/* Variante opzionale per ottenere un look tipografico simile
   alle grandi fasce testuali delle demo editorial/design. */
.scroll-marquee .scroll-marquee-track {
  line-height: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-marquee-track {
    transform: none !important;
  }
}