/* =============================================================
   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                       */
.elementor-widget-sanvito_reveal,
.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;
}
/* 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-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 !important;
  box-sizing: border-box !important;
  text-align: center;
  color: #fff;
}

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