/* =============================================================
   Sanvito Scroll Reveal – CSS v5.0
   Struttura: sv-wrap > sv-camera (sticky) > sv-panel[] (absolute)
   ============================================================= */

body { overflow-x: clip; }   /* clip non crea scroll container — non rompe position:sticky */

/* ── Fix Elementor: tutta la catena sopra sv-wrap ─────────────
   Il container deve poter scorrere (overflow:visible, height:auto)
   altrimenti position:sticky non funziona.
   NOTA: display:block !important è applicato SOLO all'inner container
   (.elementor-widget-container), NON al wrapper esterno
   (.elementor-widget-sanvito_reveal). Questo permette a Elementor di
   nascondere il widget via "Hide on" responsive senza conflitti.      */
.elementor-widget-sanvito_reveal {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-widget-sanvito_reveal > .elementor-widget-container {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.e-con:has(.sv-wrap),
.e-con-inner:has(.sv-wrap) {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ── sv-wrap: contenitore scroll nel flusso del documento ─────
   Alto N*100vh — il valore è settato inline dal PHP/JS         */
.sv-wrap {
  position: relative;
  width: 100%;
  /* height: settata inline, es. height:300vh per 3 panel */
}

/* ── sv-camera: rimane a schermo grazie a sticky ──────────────
   È l'unico vero "trucco": sticky + overflow:hidden            */
.sv-camera {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* ── sv-panel: tutti sovrapposti dentro la camera ─────────────*/
.sv-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important; /* anti-bleed: nessun figlio sfora il panel */
}
/* Overlay link sull'intera slide ──────────────────────────────
   Posizionato sopra sv-content (z-index:4) → cattura i click su
   tutta la superficie del panel. Trasparente (nessun background).
   pointer-events: auto/none controllati dalla classe is-revealed. */
.sv-panel .sv-slide-link {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  cursor: pointer;
}
/* Panel non ancora rivelati: l'overlay è disattivato per non intercettare
   i click sul panel base sottostante. Bastano due selettori — nessun *
   (che rompeva l'arch su alcuni browser via compositing GPU). */
.sv-panel:not(.is-base):not(.is-revealed),
.sv-panel:not(.is-base):not(.is-revealed) .sv-slide-link {
  pointer-events: none !important;
}

/* ── sv-bg: immagine di sfondo ────────────────────────────────*/
.sv-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ── sv-bg-video: video di sfondo (sostituisce background-image) ──*/
.sv-bg-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  pointer-events: none;
}

/* ── sv-overlay: scurisce l'immagine ─────────────────────────*/
.sv-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none;
}

/* ── sv-reveal: wrapper con clip-path animato ────────────────
   Contiene sv-bg + sv-overlay del panel (tutti tranne il base).
   clip-path: url(#sv-arch-...) settato via JS (style.setProperty).
   GSAP anima l'attr d del <path> dentro il <clipPath> SVG inline.
   .sv-reveal resta sempre a scale(1) → nessun upscaling GPU.     */
.sv-reveal {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* clip-path settato via JS al boot */
  will-change: clip-path;
  overflow: hidden !important;
}

/* ── sv-content: testo centrato ──────────────────────────────*/
.sv-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 40px; /* no !important → inline style per-slide può sovrascrivere */
  box-sizing: border-box !important;
  text-align: center;
  color: #fff;
}
/* Rinforzo con selettore più specifico: batte potenziali override Elementor/tema
   che applicano flex-direction:row su contenitori generici con lo stesso nome */
.sv-panel .sv-content {
  flex-direction: column !important;
  display: flex !important;
}

/* ── sv-pos-*: varianti di posizionamento contenuto ──────────
   Sovrascrivono align-items / justify-content / text-align
   di .sv-content per posizionare il blocco testo in basso.   */
.sv-pos-bottom-left {
  justify-content: flex-end !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.sv-pos-bottom-center {
  justify-content: flex-end !important;
  align-items: center !important;
}
.sv-pos-bottom-right {
  justify-content: flex-end !important;
  align-items: flex-end !important;
  text-align: right !important;
}

/* ── sv-text-*: testo flottante (position:absolute) ──────────
   Quando "Testo flottante" è attivo, sv-text viene estratto
   dal flusso flex e posizionato in modo indipendente.
   GSAP anima y: 16→0 (translateY) senza conflitti con
   la posizione assoluta — si sposta 16px dal punto definito. */
.sv-text-bottom-right,
.sv-text-bottom-left,
.sv-text-top-right,
.sv-text-top-left,
.sv-text-mid-right {
  position: absolute !important;
  max-width: 280px;
}
.sv-text-bottom-right { bottom: 60px; right: 40px; text-align: right; }
.sv-text-bottom-left  { bottom: 60px; left:  40px; text-align: left;  }
.sv-text-top-right    { top:    60px; right: 40px; text-align: right; }
.sv-text-top-left     { top:    60px; left:  40px; text-align: left;  }
.sv-text-mid-right    { top:    40%;  right: 40px; text-align: right; }

/* ── Titolo flottante (position:absolute in .sv-content inset:0) ──*/
.sv-title.sv-title-bottom-center,
.sv-title-logo.sv-title-bottom-center,
.sv-title.sv-title-bottom-left,
.sv-title-logo.sv-title-bottom-left,
.sv-title.sv-title-bottom-right,
.sv-title-logo.sv-title-bottom-right,
.sv-title.sv-title-top-left,
.sv-title-logo.sv-title-top-left,
.sv-title.sv-title-top-right,
.sv-title-logo.sv-title-top-right,
.sv-title.sv-title-mid-left,
.sv-title-logo.sv-title-mid-left {
  position: absolute !important;
  max-width: 100%;
  white-space: nowrap;
}
/* bottom-center: left:50% + transform centra orizzontalmente */
.sv-title.sv-title-bottom-center,
.sv-title-logo.sv-title-bottom-center {
  bottom: 60px;
  left: 50% !important;
  right: auto; /* reset — il guard PHP esclude già l'inline right: per bottom-center */
  transform: translateX(-50%);
  text-align: center;
}
.sv-title.sv-title-bottom-left,
.sv-title-logo.sv-title-bottom-left  { bottom: 60px; left:  40px; text-align: left;  }
.sv-title.sv-title-bottom-right,
.sv-title-logo.sv-title-bottom-right { bottom: 60px; right: 40px; text-align: right; }
.sv-title.sv-title-top-left,
.sv-title-logo.sv-title-top-left     { top:    60px; left:  40px; text-align: left;  }
.sv-title.sv-title-top-right,
.sv-title-logo.sv-title-top-right    { top:    60px; right: 40px; text-align: right; }
.sv-title.sv-title-mid-left,
.sv-title-logo.sv-title-mid-left     { top:    40%;  left:  40px; text-align: left;  }

/* ── Testo: fade-in al reveal ─────────────────────────────────*/
.sv-label {
  display: block;
  font-size: clamp(0.7rem, 1.4vw, 0.9rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.sv-title {
  margin: 0 0 0.5rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}

.sv-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
  cursor: pointer;
  /* NO pointer-events: auto — eredita dal panel padre:
     panel non rivelato → pointer-events:none (non intercetta i clic)
     panel rivelato / base → pointer-events normali (cliccabile) */
}
/* .sv-title dentro il link-wrapper: resettato a visibile —
   è il wrapper <a> che GSAP anima, non l'h2 direttamente */
.sv-title-link .sv-title {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}
/* .sv-title-logo dentro il link-wrapper: stessa logica —
   GSAP anima il <a>, l'<img> deve restare a opacità piena
   (opacità finale = parent × child = 1.0 × 1.0 = 1.0 visibile) */
.sv-title-link .sv-title-logo {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}
.sv-title-logo {
  display: block;
  max-height: 80px;
  width: auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}

.sv-text {
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

.sv-panel.is-revealed .sv-label,
.sv-panel.is-revealed .sv-title,
.sv-panel.is-revealed .sv-title-link,
.sv-panel.is-revealed .sv-title-logo,
.sv-panel.is-revealed .sv-text {
  opacity: 1;
  transform: translateY(0);
}

/* Panel base (primo): testo sempre visibile */
.sv-panel.is-base .sv-label,
.sv-panel.is-base .sv-title,
.sv-panel.is-base .sv-title-link,
.sv-panel.is-base .sv-title-logo,
.sv-panel.is-base .sv-text {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}


/* =============================================================
   Sanvito LOGO SCENE STACK  –  .sv-scene-*
   Struttura: sv-scene-wrap > sv-scene-camera > sv-scene-panel[]
   Differenza dal Reveal Stack:
     - Il portale logo è FISSO (non si espande)
     - Il titolo enorme appare DIETRO il portale (z-index 1)
     - I panel si animano in slide-up o fade (non clip-path)
   ============================================================= */

/* Fix catena Elementor */
.elementor-widget-sanvito_logo_scene {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-widget-sanvito_logo_scene > .elementor-widget-container {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.e-con:has(.sv-scene-wrap),
.e-con-inner:has(.sv-scene-wrap) {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

/* sv-scene-wrap: contenitore scroll nel flusso */
.sv-scene-wrap {
  position: relative;
  width: 100%;
}

/* sv-scene-camera: sticky 100vh */
.sv-scene-camera {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* sv-scene-panel: tutti sovrapposti */
.sv-scene-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Titolo enorme — dietro il portale (z-index: 1)
   La parte centrale scompare sotto il portale,
   le ali laterali restano visibili → effetto profondità */
.sv-scene-headline {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.sv-scene-headline-inner {
  font-size: clamp(3.5rem, 15vw, 13rem);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* sv-scene-portal: portale logo, z-index 2 (sopra il titolo)
   left:50% CSS + transform:translate(-50%,-Y%) inline = centrato
   aspect-ratio e height settati inline da PHP */
.sv-scene-portal {
  position: absolute !important;
  left: 50% !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

/* Foto all'interno del portale */
.sv-scene-photo {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Overlay che scurisce la foto nel portale */
.sv-scene-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Label/sottotitolo davanti al portale (z-index 3) */
.sv-scene-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-bottom: 8vh !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  text-align: center;
}

.sv-scene-label {
  display: block;
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.sv-scene-subtitle {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.8rem);
}

/* SVG defs inline: spazio zero, clipPath è attivo */
.sv-scene-svg-defs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}