/* =========================================================================
   Ore Liete – animazioni
   Stati iniziali degli elementi animati. Valgono solo quando:
   - JavaScript è attivo (classe .ol-js su <html>)
   - non siamo nell'editor di Elementor
   Se lo script non parte entro 3 secondi, gli elementi compaiono comunque
   (animazione di sicurezza "ol-failsafe").
   ========================================================================= */

.ol-js body:not(.elementor-editor-active) .ol-load,
.ol-js body:not(.elementor-editor-active) .ol-fade,
.ol-js body:not(.elementor-editor-active) .ol-slide-up,
.ol-js body:not(.elementor-editor-active) .ol-fade-scrub {
  opacity: 0;
  animation: ol-failsafe 0.01s linear 3s forwards;
}

.ol-js body:not(.elementor-editor-active) .ol-reveal {
  clip-path: inset(100% 0 0 0);
  animation: ol-failsafe-clip 0.01s linear 3s forwards;
}

/* Lo script è partito: da qui in poi comanda GSAP */
.ol-js.ol-ready body:not(.elementor-editor-active) .ol-load,
.ol-js.ol-ready body:not(.elementor-editor-active) .ol-fade,
.ol-js.ol-ready body:not(.elementor-editor-active) .ol-slide-up,
.ol-js.ol-ready body:not(.elementor-editor-active) .ol-fade-scrub,
.ol-js.ol-ready body:not(.elementor-editor-active) .ol-reveal {
  animation: none;
}

@keyframes ol-failsafe {
  to { opacity: 1; }
}

@keyframes ol-failsafe-clip {
  to { clip-path: inset(0 0 0 0); }
}

/* =========================================================================
   Sequenze di immagini su scroll (.ol-seq)
   La struttura interna (stage + canvas) la crea lo script.
   ========================================================================= */

/* Il widget che contiene la sequenza occupa tutta la larghezza del contenitore */
.elementor-widget:has(.ol-seq) {
  width: 100%;
  align-self: stretch;
}

.ol-seq {
  position: relative;
  width: 100%;
  /* altezza = schermo + lunghezza dello scroll (impostata dallo script) */
  height: calc(var(--ol-seq-stage, 100vh) + var(--ol-seq-scroll, 200vh));
}

.ol-seq__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--ol-seq-stage, 100vh);
  overflow: hidden;
  pointer-events: none;
}

.ol-seq__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ol-seq-w, 100%);
  height: var(--ol-seq-h, 100%);
  transform: translate(-50%, -50%);
  display: block;
}

/* Sovrapposizione: la sequenza scorre sopra al contenuto (es. biscotto) */
.ol-seq--overlay .ol-seq__stage {
  overflow: visible;
}

@media (max-width: 767px) {
  .ol-seq {
    height: calc(var(--ol-seq-stage, 100svh) + var(--ol-seq-scroll, 120svh));
  }
}

/* Nell'editor di Elementor la sequenza mostra solo un segnaposto basso */
body.elementor-editor-active .ol-seq {
  height: 300px;
  outline: 1px dashed rgba(0, 0, 0, 0.25);
}