/* =============================================================================
   PRESTIGE / PROBAR - Sistema Scroll Reveal riutilizzabile
   -----------------------------------------------------------------------------
   Salva questo file in: [tema-child]/css/scroll-reveal.css
   Caricato SITEWIDE tramite functions.php (funzione abm_enqueue_reveal_assets)

   COME SI USA:
   Su QUALSIASI blocco Gutenberg/Spectra, apri il pannello laterale destro
   "Impostazioni Blocco" -> scheda "Avanzate" -> campo "Classi CSS aggiuntive"
   e scrivi una combinazione di classi, es:

       reveal reveal-up
       reveal reveal-left reveal-delay-2
       reveal reveal-zoom-in

   L'animazione parte automaticamente quando il blocco entra nel viewport
   durante lo scroll (grazie allo script abbinato in functions.php).
   ============================================================================= */

:root {
  --prestige-gold: #c9a227;
  --reveal-duration: 0.9s;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. STATO INIZIALE (nascosto, prima che lo script lo attivi)
   ========================================================================== */
.reveal {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

/* Varianti di movimento iniziale
   Hanno effetto SOLO se combinate con la classe base "reveal".
   Se scrivi per errore solo "reveal-zoom-in" senza "reveal", non succede
   nulla: niente residui di scala o spostamento permanenti. */
.reveal.reveal-up      { transform: translateY(40px); }
.reveal.reveal-down    { transform: translateY(-40px); }
.reveal.reveal-left    { transform: translateX(-50px); }
.reveal.reveal-right   { transform: translateX(50px); }
.reveal.reveal-zoom-in { transform: scale(0.92); }

/* ==========================================================================
   VARIANTE SICURA - solo dissolvenza, NESSUN transform
   --------------------------------------------------------------------------
   IMPORTANTE: un elemento con "transform" diventa il contenitore di
   riferimento per i suoi figli posizionati in assoluto. Se un blocco
   contiene testo/bottoni SOVRAPPOSTI a un'immagine (overlay), le varianti
   con movimento (reveal-up, reveal-left...) li farebbero spostare fuori
   posizione.

   In quei casi usa: "reveal reveal-fade"
   ========================================================================== */
.reveal-fade {
  transform: none !important;
  will-change: opacity;          /* niente promozione del transform */
}

.reveal-fade.is-visible {
  transform: none !important;
}

/* Rete di sicurezza: un blocco in reveal non deve mai sbordare in orizzontale */
.reveal {
  max-width: 100%;
}

/* ==========================================================================
   2. STATO VISIBILE (classe aggiunta via JS quando il blocco entra in vista)
   ========================================================================== */
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ==========================================================================
   3. RITARDI SCAGLIONATI (per sequenze titolo -> testo -> bottone)
   ========================================================================== */
.reveal.reveal-delay-1 { transition-delay: 0.15s; }
.reveal.reveal-delay-2 { transition-delay: 0.3s; }
.reveal.reveal-delay-3 { transition-delay: 0.45s; }
.reveal.reveal-delay-4 { transition-delay: 0.6s; }

/* ==========================================================================
   4. HOVER ZOOM LEGGERO SU IMMAGINI (sezioni asimmetriche tipo "Cristalleria")
   Applica questa classe al blocco CONTENITORE dell'immagine
   (es. blocco "Gruppo" di Gutenberg che avvolge l'immagine)
   ========================================================================== */
.img-zoom-hover {
  overflow: hidden;
  border-radius: 6px;
}

.img-zoom-hover img {
  transition: transform 0.7s var(--reveal-ease);
  transform: scale(1);
}

.img-zoom-hover:hover img {
  transform: scale(1.06);
}

/* ==========================================================================
   5. DIVISORE ORO SOTTILE TRA SEZIONI
   Da inserire come blocco "HTML personalizzato" tra una sezione e l'altra:
   <div class="prestige-divider"></div>
   ========================================================================== */
.prestige-divider {
  width: 100%;
  max-width: 120px;
  height: 1px;
  margin: 60px auto;
  background: linear-gradient(
    to right,
    transparent,
    var(--prestige-gold),
    transparent
  );
  opacity: 0.6;
}

@media (max-width: 768px) {
  .prestige-divider {
    margin: 40px auto;
  }
}

/* ==========================================================================
   6. CTA / BOTTONI MINIMALI CON HOVER FLUIDO (riutilizzabile ovunque)
   Applica la classe "prestige-btn-outline" a un blocco Pulsante di Gutenberg
   ========================================================================== */
.prestige-btn-outline a,
a.prestige-btn-outline {
  display: inline-block;
  position: relative;
  padding: 14px 38px;
  border: 1px solid var(--prestige-gold) !important;
  background: transparent !important;
  color: var(--prestige-gold) !important;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none !important;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.prestige-btn-outline a::before,
a.prestige-btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--prestige-gold);
  transform: translateX(-101%);
  transition: transform 0.5s var(--reveal-ease);
  z-index: -1;
}

.prestige-btn-outline a:hover,
a.prestige-btn-outline:hover {
  color: #111111 !important;
}

.prestige-btn-outline a:hover::before,
a.prestige-btn-outline:hover::before {
  transform: translateX(0);
}

/* ==========================================================================
   7. MOBILE - riduce leggermente le distanze di movimento
   (su schermi piccoli spostamenti ampi risultano "a scatto")
   ========================================================================== */
@media (max-width: 600px) {
  .reveal.reveal-up   { transform: translateY(24px); }
  .reveal-down  { transform: translateY(-24px); }
  .reveal.reveal-left  { transform: translateX(-24px); }
  .reveal.reveal-right { transform: translateX(24px); }
}

/* ==========================================================================
   8. ACCESSIBILITÀ - rispetta le preferenze di riduzione movimento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .img-zoom-hover:hover img {
    transform: none !important;
  }
}

/* ==========================================================================
   9. PROTEZIONI ANTI-ROTTURA LAYOUT
   Le animazioni usano transform: su blocchi che il page builder posiziona
   con griglie/offset propri, questo può causare sbordamenti orizzontali.
   Queste regole li prevengono.
   ========================================================================== */

/* Nessuna animazione deve poter generare scroll orizzontale */
body {
  overflow-x: hidden;
}

/* Il blocco animato non deve mai uscire dal suo contenitore */
.reveal {
  max-width: 100%;
  box-sizing: border-box;
}

/* Una volta visibile, azzeriamo il transform in modo che il blocco torni
   ESATTAMENTE nella sua posizione di layout naturale (niente residui) */
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Se un blocco resta bloccato perché lo script non parte (JS disattivato,
   errore in console, blocco fuori dall'observer), dopo 3s lo mostriamo
   comunque: meglio nessuna animazione che un blocco invisibile o spostato */
@keyframes abmRevealFailsafe {
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);   /* fondamentale per reveal-wipe: senza questo
                                    un blocco mascherato resterebbe invisibile */
  }
}

/* FAILSAFE CSS TEMPORIZZATO -> RIMOSSO (v2).
   Forzava opacity/transform/clip-path finali su OGNI .reveal dopo 1,5s dal
   caricamento: annullava qualsiasi ritardo superiore e rendeva visibili a
   forza anche i blocchi sotto la piega, di fatto disattivando il loro
   scroll-reveal. La rete di sicurezza vera e' nello script (functions.php):
   dopo 2,5s sblocca SOLO gli elementi realmente a schermo.
   La protezione "se il JS non parte affatto" e' in fondo a questo file. */

/* Su mobile le animazioni laterali sono la causa più frequente di
   sbordamento: le convertiamo in semplice fade + leggero slide verticale */
@media (max-width: 768px) {
  .reveal.reveal-left,
  .reveal.reveal-right {
    transform: translateY(20px) !important;
  }

  .reveal.reveal-left.is-visible,
  .reveal.reveal-right.is-visible {
    transform: none !important;
  }
}

/* ==========================================================================
   10. HERO - EFFETTI IN STILE MASA ROOFTOP
   --------------------------------------------------------------------------
   IMPORTANTE: questi effetti sono INDIPENDENTI dal sistema "reveal".
   Prima di applicarli, nel blocco Spectra vai su Impostazioni blocco ->
   Animazione -> None. Due sistemi di animazione sullo stesso elemento
   sommano i loro transform e scompongono il layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A) IMMAGINE HERO: zoom-out lento e profondo (5 secondi)

   DUE CASI D'USO:

   A1) L'immagine è un BLOCCO IMMAGINE (tag <img>)
       -> classe "hero-zoom-out" sul blocco immagine

   A2) L'immagine è lo SFONDO di un contenitore Spectra (background-image)
       -> classe "hero-zoom-bg" sul CONTENITORE
       (questo è il caso della Hero di ProBar)
   -------------------------------------------------------------------------- */

/* --- A1: blocco immagine vero e proprio --- */
.hero-zoom-out {
  overflow: hidden !important;
  display: block;
  position: relative;
}

.hero-zoom-out img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  animation: heroZoomOut 5s cubic-bezier(0.15, 0.85, 0.25, 1) both;
  animation-play-state: paused;      /* ferma finché il blocco non è in vista */
  will-change: transform;
}

.hero-zoom-out.is-visible img {
  animation-play-state: running;     /* parte allo scroll */
}

/* --- A2: immagine di SFONDO di un contenitore --------------------------
   Non si può animare direttamente un background-image con transform,
   quindi creiamo un livello (::after) che EREDITA la stessa immagine
   di sfondo e animiamo quello. Il contenitore ritaglia lo zoom.
   ---------------------------------------------------------------------- */
.hero-zoom-bg {
  position: relative !important;
  overflow: hidden !important;
}

.hero-zoom-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background-image: inherit !important;   /* eredita l'immagine del contenitore */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  transform-origin: center center;
  animation: heroZoomOut 5s cubic-bezier(0.15, 0.85, 0.25, 1) both;
  animation-play-state: paused;      /* ferma finché il blocco non è in vista */
  will-change: transform;

  z-index: 0 !important;
  pointer-events: none !important;
}

.hero-zoom-bg.is-visible::after {
  animation-play-state: running;     /* parte allo scroll */
}

/* Il contenuto (titoli, pulsante) deve restare SOPRA il livello animato */
.hero-zoom-bg > * {
  position: relative;
  z-index: 2;
}

/* Velo scuro opzionale: aggiungi anche la classe "hero-dim" al contenitore
   se, coprendo l'overlay di Spectra, l'immagine risulta troppo chiara e il
   testo poco leggibile. Regola l'intensità cambiando 0.45. */
.hero-zoom-bg.hero-dim::after {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.45) !important;
}

@keyframes heroZoomOut {
  from { transform: scale(1.9); }    /* zoom MOLTO profondo, ravvicinatissimo */
  to   { transform: scale(1); }      /* posizione finale naturale */
}

/* --------------------------------------------------------------------------
   B) TESTO HERO: flip-up riga per riga
   Applica "flip-up" a OGNI riga di testo (ogni blocco Titolo/Paragrafo).
   Aggiungi "flip-delay-1", "-2", "-3"... per farle entrare in sequenza.

   NOTA: perché ogni riga si ribalti separatamente, ogni riga deve essere
   un BLOCCO SEPARATO in Gutenberg. Un unico titolo con <br> si anima come
   un blocco solo. Dividi "ELEVA" e "LA TUA ARTE" in due blocchi Titolo.
   -------------------------------------------------------------------------- */
.flip-up {
  display: block;
  opacity: 0;
  transform-origin: center bottom;
  animation: heroFlipUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-play-state: paused;      /* ferma finché la riga non è in vista */
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.flip-up.is-visible {
  animation-play-state: running;     /* parte allo scroll */
}

@keyframes heroFlipUp {
  from {
    opacity: 0;
    transform: perspective(900px) rotateX(-75deg) translateY(28px);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0);
  }
}

/* Ritardi per l'ingresso in sequenza delle righe */
.flip-delay-1 { animation-delay: 0.25s; }
.flip-delay-2 { animation-delay: 0.5s; }
.flip-delay-3 { animation-delay: 0.75s; }
.flip-delay-4 { animation-delay: 1s; }
.flip-delay-5 { animation-delay: 1.25s; }

/* --------------------------------------------------------------------------
   C) PULSANTE HERO: bordo oro sottile + riempimento fluido al hover
   Applica "prestige-btn-outline" al blocco Pulsante ("Categorie Premium").
   È lo stesso comportamento del pulsante "Scegli la cornice per il tuo cocktail".
   Qui rafforziamo i selettori per vincere sugli stili di Spectra.
   -------------------------------------------------------------------------- */
.prestige-btn-outline .wp-block-button__link,
.prestige-btn-outline a.wp-block-button__link,
a.prestige-btn-outline {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--prestige-gold, #FFCE53) !important;
  color: var(--prestige-gold, #FFCE53) !important;
  border-radius: 50px !important;
  padding: 16px 36px !important;
  font-size: 13px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color 0.45s ease !important;
}

.prestige-btn-outline .wp-block-button__link::before,
.prestige-btn-outline a.wp-block-button__link::before,
a.prestige-btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--prestige-gold, #FFCE53);
  transform: translateX(-101%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}

.prestige-btn-outline .wp-block-button__link:hover,
.prestige-btn-outline a.wp-block-button__link:hover,
a.prestige-btn-outline:hover {
  color: #111111 !important;
  border-color: var(--prestige-gold, #FFCE53) !important;
}

.prestige-btn-outline .wp-block-button__link:hover::before,
.prestige-btn-outline a.wp-block-button__link:hover::before,
a.prestige-btn-outline:hover::before {
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   D) ACCESSIBILITÀ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-zoom-out img,
  .flip-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   11. SEZIONE BRAND - "wipe reveal" in stile Masa Rooftop
   --------------------------------------------------------------------------
   Il logo non "compare": viene SVELATO da sinistra a destra, come una tenda
   che si apre. Le righe di testo entrano poi da sinistra, in sequenza.
   Nessun elemento si sposta bruscamente: si rivela. È questo che dà
   l'impressione di lusso.

   RICORDA: nei blocchi dove usi queste classi, imposta
   Impostazioni blocco -> Animazione -> None (per non sommarti all'AOS di Spectra)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A) WIPE REVEAL - da usare sul blocco LOGO/IMMAGINE
   Classe: "reveal reveal-wipe"
   -------------------------------------------------------------------------- */
.reveal.reveal-wipe {
  opacity: 0;
  transform: none;                       /* nessuno spostamento: solo rivelazione */
  clip-path: inset(0 100% 0 0);          /* interamente coperto da destra */
  transition:
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
  transition-delay: 0s;              /* il logo parte SUBITO, per primo */
  will-change: clip-path, opacity;
}

.reveal.reveal-wipe.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);             /* completamente svelato */
}

/* --------------------------------------------------------------------------
   B) SLIDE-IN DA SINISTRA - da usare sul blocco TESTO
   Classe: "reveal reveal-slide-left" (+ reveal-delay-1/2/3 per scaglionare)
   Movimento contenuto (26px): l'eleganza sta nella misura, non nell'ampiezza.
   -------------------------------------------------------------------------- */
.reveal.reveal-slide-left {
  opacity: 0;
  transform: translateX(-26px);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.reveal-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   C) LINEA DORATA DIVISORIA VERTICALE (cresce dal centro)
   Classe: "brand-divider" su un blocco Separatore/Gruppo vuoto tra logo e testo
   -------------------------------------------------------------------------- */
.brand-divider {
  width: 1px !important;
  min-height: 120px;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--prestige-gold, #FFCE53) 50%,
    transparent 100%
  ) !important;
  border: none !important;
  transform: scaleY(0);
  transform-origin: center center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
  margin: 0 8px !important;
}

.brand-divider.is-visible,
.reveal.brand-divider.is-visible {
  transform: scaleY(1);
}

/* --------------------------------------------------------------------------
   D) TESTO BRAND GIUSTIFICATO - impaginazione editoriale pulita
   Classe: "brand-text" sul blocco Paragrafo
   -------------------------------------------------------------------------- */
.brand-text,
.brand-text p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;                    /* sillabazione: evita i "buchi" tra le parole */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 1.8 !important;
  letter-spacing: 0.2px;
  word-spacing: normal;
  max-width: 62ch;                  /* lunghezza di riga ottimale per la lettura */
}

/* L'ultima riga resta allineata a sinistra (standard tipografico).
   Per giustificare anche quella, aggiungi la classe "brand-text-full". */
.brand-text-full,
.brand-text-full p {
  text-align-last: justify !important;
}

/* Il testo resta GIUSTIFICATO su tutti i dispositivi.
   La sillabazione automatica (hyphens) è indispensabile su schermi stretti:
   senza, la giustificazione crea spazi enormi tra le parole. */
@media (max-width: 768px) {
  .brand-text,
  .brand-text p {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.75 !important;
    max-width: 100%;
  }

  .brand-divider {
    display: none !important;       /* la linea verticale non ha senso in colonna */
  }
}

/* ==========================================================================
   12. SEPARATORI DORATI ANIMATI (riutilizzabili in tutte le pagine)
   --------------------------------------------------------------------------
   Si inseriscono con un blocco "HTML personalizzato" di Gutenberg.
   Si disegnano da soli quando entrano nel viewport durante lo scroll.
   Gli snippet HTML sono nei commenti sopra ogni variante.
   ========================================================================== */

/* --------------------------------------------------------------------------
   VARIANTE 1 - Linea che si apre dal centro verso i lati
   <div class="reveal prestige-sep"></div>
   -------------------------------------------------------------------------- */
.prestige-sep {
  width: 100%;
  max-width: 220px;
  height: 1px;
  margin: 56px auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--prestige-gold, #FFCE53) 50%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center center;
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease;
}

.prestige-sep.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   VARIANTE 2 - Linea con rombo centrale (più "gioiello", per sezioni chiave)
   <div class="reveal prestige-sep-diamond"><span></span></div>
   -------------------------------------------------------------------------- */
.prestige-sep-diamond {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 1px;
  margin: 60px auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--prestige-gold, #FFCE53) 50%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center center;
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease;
}

.prestige-sep-diamond.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

.prestige-sep-diamond span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--prestige-gold, #FFCE53);
  transform: rotate(45deg) scale(0);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s;
}

.prestige-sep-diamond.is-visible span {
  transform: rotate(45deg) scale(1);   /* il rombo "scatta" dopo la linea */
}

/* --------------------------------------------------------------------------
   VARIANTE 3 - Linea sottile a piena larghezza che si disegna da sinistra
   (per divisioni di sezione ampie, stile editoriale)
   <div class="reveal prestige-sep-wide"></div>
   -------------------------------------------------------------------------- */
.prestige-sep-wide {
  width: 100%;
  height: 1px;
  margin: 64px 0;
  background: linear-gradient(
    90deg,
    var(--prestige-gold, #FFCE53) 0%,
    rgba(255, 206, 83, 0.25) 60%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;       /* si disegna da sinistra */
  transition:
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease;
}

.prestige-sep-wide.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   MOBILE - margini verticali ridotti
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .prestige-sep,
  .prestige-sep-diamond { margin: 40px auto; }
  .prestige-sep-wide    { margin: 44px 0; }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÀ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .prestige-sep,
  .prestige-sep-diamond,
  .prestige-sep-wide {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .prestige-sep-diamond span {
    transform: rotate(45deg) scale(1) !important;
    transition: none !important;
  }
}

/* ==========================================================================
   13. EFFETTO "BANDIERA AL VENTO" + TEMPI DELLA SEZIONE BRAND
   ========================================================================== */

/* --------------------------------------------------------------------------
   A) FLAG WAVE - sventolio in CSS PURO (nessuna dipendenza esterna)
   Classe: "flag-wave" (da abbinare a "reveal reveal-wipe" sul logo)

   ATTENZIONE (lezione imparata): NON usare "filter: url(#id-svg)" qui.
   In Chrome, se l'ID SVG non esiste, l'elemento diventa INVISIBILE.
   Questa versione usa solo transform 3D: non può far sparire nulla.

   L'illusione della bandiera nasce da tre movimenti sovrapposti con
   periodi diversi: rotazione Y (il pennone), skew (il tessuto che si torce)
   e una micro-compressione verticale (l'onda che percorre il drappo).
   -------------------------------------------------------------------------- */
.flag-wave {
  transform-origin: left center;        /* ancorato a sinistra, come a un pennone */
  animation: abmFlagSway 5s ease-in-out infinite;
  animation-delay: 1s;                  /* parte dopo la rivelazione */
  animation-play-state: paused;         /* ferma finché non è in vista */
  backface-visibility: hidden;
  will-change: transform;
}

.flag-wave.is-visible {
  animation-play-state: running;
}

@keyframes abmFlagSway {
  0% {
    transform: perspective(900px) rotateY(0deg) skewY(0deg) scaleY(1);
  }
  20% {
    transform: perspective(900px) rotateY(5deg) skewY(-1deg) scaleY(0.99);
  }
  40% {
    transform: perspective(900px) rotateY(2deg) skewY(0.8deg) scaleY(1.01);
  }
  60% {
    transform: perspective(900px) rotateY(-4deg) skewY(-0.6deg) scaleY(0.995);
  }
  80% {
    transform: perspective(900px) rotateY(-1deg) skewY(0.5deg) scaleY(1.005);
  }
  100% {
    transform: perspective(900px) rotateY(0deg) skewY(0deg) scaleY(1);
  }
}

/* NOTA IMPORTANTE (errore da non ripetere):
   qui in passato c'era "animation: none" per bloccare lo sway durante il wipe.
   Ma azzerando "animation" si cancellava anche il failsafe (che è
   un'animazione), lasciando il logo mascherato e invisibile per sempre.
   Ora lo sway parte semplicemente con un ritardo, senza disattivare nulla. */
.reveal.reveal-wipe.flag-wave.is-visible {
  animation: abmFlagSway 5s ease-in-out infinite 1s;
}

/* Vento più forte */
.flag-wave-strong {
  transform-origin: left center;
  animation: abmFlagSwayStrong 4s ease-in-out infinite 1s;
  animation-play-state: paused;
  backface-visibility: hidden;
}

.flag-wave-strong.is-visible {
  animation-play-state: running;
}

@keyframes abmFlagSwayStrong {
  0%   { transform: perspective(700px) rotateY(0deg)  skewY(0deg)    scaleY(1); }
  20%  { transform: perspective(700px) rotateY(9deg)  skewY(-1.8deg) scaleY(0.98); }
  40%  { transform: perspective(700px) rotateY(3deg)  skewY(1.4deg)  scaleY(1.02); }
  60%  { transform: perspective(700px) rotateY(-7deg) skewY(-1.1deg) scaleY(0.99); }
  80%  { transform: perspective(700px) rotateY(-2deg) skewY(0.9deg)  scaleY(1.01); }
  100% { transform: perspective(700px) rotateY(0deg)  skewY(0deg)    scaleY(1); }
}

/* --------------------------------------------------------------------------
   B) RITARDO DI 0,5s PER IL TESTO (parte mezzo secondo dopo il logo)
   Classe: "reveal-delay-half"
   -------------------------------------------------------------------------- */
.reveal.reveal-delay-half { transition-delay: 0.5s; }

/* --------------------------------------------------------------------------
   C) ACCESSIBILITÀ - niente sventolio se l'utente riduce le animazioni
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .flag-wave,
  .flag-wave-strong,
  .reveal.reveal-wipe.flag-wave.is-visible {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   14. SEPARATORE ADATTIVO (verticale su desktop, orizzontale su mobile)
   --------------------------------------------------------------------------
   HTML da incollare in un blocco "HTML personalizzato", posizionato
   TRA il logo e il testo, DENTRO il gruppo orizzontale:

       <div class="reveal prestige-sep-auto"></div>

   Con rombo centrale:

       <div class="reveal prestige-sep-auto has-diamond"><span></span></div>
   ========================================================================== */

/* --- DESKTOP / TABLET: linea VERTICALE che cresce dal centro --- */
.prestige-sep-auto {
  position: relative;
  flex: 0 0 1px;
  width: 1px;
  min-height: 130px;
  align-self: stretch;
  margin: 0 28px;

  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--prestige-gold, #FFCE53) 50%,
    transparent 100%
  );

  opacity: 0;
  transform: scaleY(0);
  transform-origin: center center;
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s,
    opacity 0.5s ease 0.35s;
}

.prestige-sep-auto.is-visible {
  opacity: 1;
  transform: scaleY(1);
}

/* Rombo centrale opzionale */
.prestige-sep-auto span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--prestige-gold, #FFCE53);
  transform: rotate(45deg) scale(0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s;
}

.prestige-sep-auto.is-visible span {
  transform: rotate(45deg) scale(1);
}

/* --- MOBILE: la stessa linea diventa ORIZZONTALE --- */
@media (max-width: 768px) {
  .prestige-sep-auto {
    flex: 0 0 auto;
    width: 100%;
    max-width: 200px;
    height: 1px;
    min-height: 0;
    align-self: center;
    margin: 26px auto;

    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--prestige-gold, #FFCE53) 50%,
      transparent 100%
    );

    transform: scaleX(0);              /* si apre in orizzontale */
  }

  .prestige-sep-auto.is-visible {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prestige-sep-auto {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .prestige-sep-auto span {
    transform: rotate(45deg) scale(1) !important;
    transition: none !important;
  }
}


/* ==========================================================================
   14. SEQUENZA HERO -> BRAND  (v2)
   --------------------------------------------------------------------------
   Il blocco BRAND (logo + linea dorata + testo) parte 0,2s DOPO che l'hero
   ha finito. Tempi dell'hero, dal sorgente della home:
     titolo    .flip-up               -> 0s    + 1s = finisce a 1,00s
     paragrafo .flip-up .flip-delay-1 -> 0,25s + 1s = finisce a 1,25s
     pulsante  .flip-up               -> 0s    + 1s = finisce a 1,00s
   L'hero e' completo a 1,25s  ->  il brand parte a 1,45s.

   Il trigger resta l'ingresso nel viewport (is-visible): questi sono solo
   ritardi INTERNI alla sequenza, non partenze automatiche.
   ========================================================================== */
:root {
  --brand-start: 1.45s;   /* attesa prima che il brand cominci             */
  --wipe-dur:    1.5s;    /* durata della rivelazione del logo (era 0,9s)  */
  --flag-cycle:  8s;      /* durata di UN ciclo di sventolio (era 5s)      */
}

/* --- LOGO: rivelazione a tendina, piu' lenta e ritardata --- */
.reveal.reveal-wipe {
  transition:
    clip-path var(--wipe-dur) cubic-bezier(0.16, 1, 0.3, 1) var(--brand-start),
    opacity 0.6s ease var(--brand-start);
}

/* --- LINEA DORATA: cresce subito dopo il logo --- */
.prestige-sep-auto {
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--brand-start) + 0.35s),
    opacity 0.5s ease calc(var(--brand-start) + 0.35s);
}

.prestige-sep-auto span {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
              calc(var(--brand-start) + 1.1s);
}

/* --- TESTO: entra mezzo secondo dopo l'inizio del brand --- */
.reveal.reveal-delay-half {
  transition-delay: calc(var(--brand-start) + 0.5s);
}

/* --- SVENTOLIO: parte a logo COMPLETAMENTE rivelato, e respira lento --- */
.flag-wave,
.reveal.reveal-wipe.flag-wave.is-visible {
  animation: abmFlagSway var(--flag-cycle) ease-in-out infinite
             calc(var(--brand-start) + var(--wipe-dur) + 0.2s);
}

.flag-wave-strong {
  animation: abmFlagSwayStrong calc(var(--flag-cycle) - 1s) ease-in-out infinite
             calc(var(--brand-start) + var(--wipe-dur) + 0.2s);
}

/* ==========================================================================
   15. PROTEZIONE "JAVASCRIPT NON PARTITO"
   Lo script in functions.php aggiunge la classe .abm-reveal-js su <html>.
   Se per qualsiasi motivo lo script non gira (errore di un plugin, JS
   bloccato), la classe non c'e' e TUTTO viene mostrato subito, senza
   animazioni: nessun contenuto puo' restare invisibile.
   ========================================================================== */
html:not(.abm-reveal-js) .reveal,
html:not(.abm-reveal-js) .flip-up,
html:not(.abm-reveal-js) .flag-wave,
html:not(.abm-reveal-js) .flag-wave-strong,
html:not(.abm-reveal-js) .prestige-sep,
html:not(.abm-reveal-js) .prestige-sep-auto,
html:not(.abm-reveal-js) .prestige-sep-diamond,
html:not(.abm-reveal-js) .prestige-sep-wide,
html:not(.abm-reveal-js) .brand-divider,
html:not(.abm-reveal-js) .hero-zoom-out img,
html:not(.abm-reveal-js) .hero-zoom-bg::after {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}

/* ==========================================================================
   ENTRATA SINCRONIZZATA DEL BLOCCO FIRMA (logo PROBAR + linea + testo)
   --------------------------------------------------------------------------
   I ritardi ereditati (1.45s / 1.8s / 1.95s) facevano entrare il blocco
   col contagocce. Nuova regia, misurata dal vivo: il logo apre subito,
   la linea dorata lo segue a un quarto di secondo, il testo chiude a
   mezzo secondo - tutto compiuto in un respiro (~1.5s), con l'effetto
   bandiera che continua a sventolare per conto suo.
   ========================================================================== */
.wp-block-columns:has(.brand-text) figure.wp-block-image.reveal.flag-wave {
  transition-delay: 0s !important;
  transition-duration: 0.9s !important;
}

.wp-block-columns:has(.brand-text) .reveal.prestige-sep-auto {
  transition-delay: 0.25s !important;
  transition-duration: 0.9s !important;
}

.wp-block-columns:has(.brand-text) p.brand-text.reveal {
  transition-delay: 0.5s !important;
  transition-duration: 1s !important;
}