/* =========================================================
   STATI INIZIALI DELLE ANIMAZIONI
   =========================================================
   Gli stati nascosti o spostati (opacity 0, clip-path, transform, filter…) li impostano i moduli JS con
   gsap.set()/fromTo() solo quando GSAP è pronto, dentro gsap.matchMedia(). Senza JS, con GSAP bloccato o con
   "riduci movimento" il contenuto resta visibile e al suo posto; al revert (cambio di preferenza) torna com'era.
   Unica eccezione: l'attesa d'ingresso qui sotto, valida solo con la classe csa-pre (vedi il commento).
   Le classi (fade-up, reveal, gs_reveal, zoom-in, slide-overlay, image-reveal, blur-in…) restano l'API pubblica:
   cambia solo dove vive lo stato iniziale. L'unico CSS di layout legato alle animazioni sta sotto, con "csa-ready"
   (classe aggiunta a <html> da csa-core.js quando GSAP è pronto e il movimento è consentito). */

/* Attesa dell'ingresso (classe csa-pre su <html>, messa da uno script in <head> prima del primo paint solo se il
   movimento è consentito): gli elementi con le classi di ingresso partono dallo stato iniziale, così anche quelli già in
   vista al caricamento fanno l'ingresso senza lampeggiare. Gli stati rispecchiano quelli di custom-scroll-animation.js
   (che li imposta inline e poi toglie la classe). Senza JS la classe non esiste; se csa-ready non arriva entro ~2,5 s
   (GSAP bloccato o lento) lo script la toglie. Mai con "riduci movimento" (media query e classe a11y-no-animations). */
@media (prefers-reduced-motion: no-preference) {
  html.csa-pre:not(.a11y-no-animations) {
    overflow-x: clip; /* come csa-ready: gli elementi spostati non allargano la pagina */
  }
  html.csa-pre:not(.a11y-no-animations) .fade-up {
    opacity: 0;
    transform: translateY(30px);
  }
  html.csa-pre:not(.a11y-no-animations) .fade-in {
    opacity: 0;
  }
  html.csa-pre:not(.a11y-no-animations) .reveal {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  html.csa-pre:not(.a11y-no-animations) .element {
    opacity: 0;
    transform: translateY(100px);
  }
  html.csa-pre:not(.a11y-no-animations) .gs_reveal {
    opacity: 0;
    visibility: hidden;
  }
  html.csa-pre:not(.a11y-no-animations) .gs_reveal_flip {
    transform: rotateY(180deg);
  }
  html.csa-pre:not(.a11y-no-animations) .zoom-in {
    opacity: 0;
    transform: scale(1.2);
  }
  html.csa-pre:not(.a11y-no-animations) .fade-slide-diagonal {
    opacity: 0;
    transform: translate(100px, 100px);
  }
  /* Titoli SplitText: nascosti finché le parole non sono create (il modulo li mostra a split fatto) */
  html.csa-pre:not(.a11y-no-animations) :is(.anim-fade, .anim-bounce, .anim-wave, .anim-slide-up, .anim-slide-down, .anim-rotate, .anim-zoom, .anim-fade-scale, .fade-text) {
    opacity: 0;
    visibility: hidden;
  }
}
/* Solo sotto 767 px (stesso punto di rottura del core) */
@media (max-width: 766.98px) and (prefers-reduced-motion: no-preference) {
  html.csa-pre:not(.a11y-no-animations) .fade-up-m {
    opacity: 0;
    transform: translateY(30px);
  }
  html.csa-pre:not(.a11y-no-animations) .reveal-m {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}

/* Effetto Parallax */
.parallax {
  will-change: transform;  /* Ottimizza il rendering per animazioni */
}

/* Parallax per Image Hero: la sezione e l'immagine più alta (120%) per l'effetto */
.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 */
}

/* Line reveal: nel markup il rettangolo ha width="0" (lo estende il JS). Senza JS, con GSAP bloccato o con
   "riduci movimento" (csa-ready assente) la linea è intera. */
html:not(.csa-ready) .line-reveal-rect {
  width: 100px;
}

/* Scrolling orizzontale: i pannelli affiancati, tagliati dal contenitore, solo se il JS li fa scorrere.
   Altrimenti (senza JS, GSAP bloccato, "riduci movimento") restano uno sotto l'altro, tutti leggibili. */
html.csa-ready .horizontal-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

html.csa-ready .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.
   Solo con lo smoother attivo (classe csa-smoother-active, aggiunta da csa-smoother.js): senza resta il
   comportamento nativo di Gutenberg. */
   @media screen and (min-width: 767px){
.csa-smoother-active .wp-block-cover__image-background.has-parallax,
.csa-smoother-active .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: 767px) {

  /* 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: var(--csa-footer-bg, #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
   Variabili (da definire su :root): --csa-footer-bg = sfondo pieno del contenuto che copre il footer (default #fff);
   --csa-footer-shadow = ombra tra contenuto e footer (default 0 -12px 30px rgba(0,0,0,.08)).
   ========================================================= */
@media screen and (min-width: 767px) {

  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: var(--csa-footer-bg, #fff);
  }

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

  /*
   * Il contenuto ha un padding pari all'altezza del footer (che è fixed e sta sotto): quella fascia, trasparente,
   * starebbe sopra il footer e ne bloccherebbe i clic. Il contenitore lascia passare i clic; i suoi figli no.
   */
  html.footer-reveal-ready #page,
  html.footer-reveal-ready .smooth-wrapper,
  html.footer-reveal-ready .smooth-content {
    pointer-events: none;
  }

  html.footer-reveal-ready #page > *,
  html.footer-reveal-ready .smooth-content > * {
    pointer-events: auto;
  }
}

@media (max-width: 766.98px) {
  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
   =========================================================
   Layout (testo su una riga, tagliato dal contenitore) solo con csa-ready: senza JS o con "riduci movimento" il
   testo va a capo e si legge tutto. */
html.csa-ready .scroll-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

html.csa-ready .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. */
html.csa-ready .scroll-marquee .scroll-marquee-track {
  line-height: 0.9;
}

/* =========================================================
   STACK GALLERY — immagini impilate che si scoprono allo scroll
   =========================================================
   Le immagini si sovrappongono (e la sezione è alta quanto lo schermo) solo con csa-ready. Senza JS, con GSAP
   bloccato o con "riduci movimento" restano una sotto l'altra, tutte visibili. */
html.csa-ready .stack-gallery {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: grid !important;
  place-items: center;
}

/* Alcuni temi aggiungono un contenitore interno al Gruppo */
html.csa-ready .stack-gallery > .wp-block-group__inner-container {
  display: contents;
}

html.csa-ready .stack-gallery .stack-img,
html.csa-ready .stack-gallery .stack-end {
  grid-area: 1 / 1;
  width: min(80vw, 900px);
  max-width: none !important;
  margin: 0 !important;
  will-change: transform;
}

html.csa-ready .stack-gallery .stack-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Ordine di sovrapposizione prima che parta lo script */
html.csa-ready .stack-gallery .stack-img:nth-child(1) { z-index: 100; }
html.csa-ready .stack-gallery .stack-img:nth-child(2) { z-index: 99; }
html.csa-ready .stack-gallery .stack-img:nth-child(3) { z-index: 98; }
html.csa-ready .stack-gallery .stack-img:nth-child(4) { z-index: 97; }
html.csa-ready .stack-gallery .stack-img:nth-child(5) { z-index: 96; }

html.csa-ready .stack-gallery .stack-end {
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Senza l'effetto: immagini una sotto l'altra */
html:not(.csa-ready) .stack-gallery .stack-img {
  margin-bottom: 1.5rem;
}

/* Gli elementi in attesa di animazione sono spostati o ingranditi (x, scale…) dal JS: sbordando a destra
   allargherebbero la pagina (scroll orizzontale, a 390 px anche la barra sticky non sarebbe più a tutta larghezza).
   overflow-x: clip non crea un contenitore di scroll, quindi position: sticky continua a funzionare. */
html.csa-ready {
  overflow-x: clip;
}