/* Atma FX — Gold Layer
 * Il canvas prende il posto dello sfondo della sezione, sotto ai contenuti.
 * Se il JS non parte, niente di tutto questo si attiva e lo sfondo CSS resta.
 */

.atma-gold-on {
  position: relative;
  background-image: none !important;
  background-color: #0d0d0d;
}

.atma-gold-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* i contenuti Divi restano sopra al canvas */
.atma-gold-on > .et_pb_row,
.atma-gold-on > .et_pb_row_inner,
.atma-gold-on > .et_pb_module,
.atma-gold-on > div:not(.atma-gold-canvas) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .atma-gold-canvas { display: none; }
  .atma-gold-on { background-image: var(--atma-fallback-bg, none) !important; }
}

/* ---------------------------------------------------------------
   Onda che rivela.
   La tela copre l'immagine e sta SOTTO ai contenuti: titoli, loghi e
   pulsanti della sezione restano visibili e cliccabili.
   --------------------------------------------------------------- */
.atma-onda__box { position: relative; }

.atma-onda__tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* immagine di sfondo di sezione: i contenuti salgono sopra la tela */
.atma-onda--sfondo > *:not(.atma-onda__tela) {
  position: relative;
  z-index: 1;
}

/* modulo immagine: l'<img> resta nel documento ma smette di vedersi */
.atma-onda--immagine.atma-onda--pronto > img { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .atma-onda__tela { display: none; }
  .atma-onda--immagine.atma-onda--pronto > img { visibility: visible; }
}