/* ==========================================================
   MEMOIRE CE SOIR
   WEBGL FULL WIDTH BACKGROUND
   ========================================================== */


/* ----------------------------------------------------------
   WEBGL SECTION
   ---------------------------------------------------------- */

.memoire-webgl-section {
  position: relative !important;
  isolation: isolate;

  /*
   * La sezione occupa tutta la larghezza dello schermo.
   */
  width: 100vw !important;
  max-width: 100vw !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /*
   * Nessun padding sulla sezione:
   * il background deve arrivare fino ai bordi.
   */
  padding-left: 0 !important;
  padding-right: 0 !important;

  box-sizing: border-box !important;

  min-height: 100vh;

  /*
   * Evita eventuali overflow del canvas.
   */
  overflow: hidden !important;

  /*
   * Colore fallback se WebGL non viene caricato.
   */
  background: #bfaef9;
}


/* ----------------------------------------------------------
   WEBGL CANVAS
   ---------------------------------------------------------- */

.memoire-webgl-background {
  position: absolute !important;

  top: 0 !important;
  bottom: 0 !important;

  /*
   * Centra il canvas rispetto alla viewport.
   */
  left: 50% !important;

  width: 100vw !important;
  max-width: none !important;

  height: 100% !important;

  transform: translateX(-50%) !important;

  /*
   * Background dietro al contenuto.
   */
  z-index: 0 !important;

  display: block !important;

  /*
   * Non deve interferire con click, link, menu, ecc.
   */
  pointer-events: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background:
    radial-gradient(
      circle at 50% 50%,
      #f6f3ff 0%,
      #bfaef9 58%,
      #7350e8 100%
    );
}


/* ----------------------------------------------------------
   WEBGL FALLBACK
   ---------------------------------------------------------- */

.memoire-webgl-background.webgl-fallback {
  background:
    radial-gradient(
      circle at 50% 50%,
      #f6f3ff 0%,
      #bfaef9 58%,
      #7350e8 100%
    );
}


/* ----------------------------------------------------------
   SALIENT ROW BACKGROUND
   ---------------------------------------------------------- */

.memoire-webgl-section > .row-bg-wrap {
  position: absolute !important;
  z-index: -1 !important;
}


/* ----------------------------------------------------------
   SALIENT CONTENT
   ---------------------------------------------------------- */

/*
 * Il wrapper del contenuto rimane sopra al WebGL.
 *
 * IMPORTANTE:
 * il padding viene applicato QUI,
 * non alla Row principale.
 */

.memoire-webgl-section > .row_col_wrap_12 {
  position: relative !important;

  z-index: 1 !important;

  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  /*
   * Desktop:
   * 55px per lato.
   */
  padding-left: 55px !important;
  padding-right: 55px !important;

  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   SALIENT / WPBAKERY COLUMNS
   ---------------------------------------------------------- */

.memoire-webgl-section .wpb_column,
.memoire-webgl-section .vc_column_container,
.memoire-webgl-section .column_container {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------
   OPTIONAL CONTENT CLASS
   ---------------------------------------------------------- */

.memoire-webgl-content {
  position: relative !important;
  z-index: 1 !important;
}


/* ----------------------------------------------------------
   RAW HTML PLACEHOLDER
   ---------------------------------------------------------- */

/*
 * Il JavaScript sposta il canvas direttamente
 * dentro la Row.
 *
 * Il vecchio wrapper Raw HTML rimane vuoto
 * e viene nascosto con questa classe.
 */

.memoire-webgl-placeholder {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media only screen and (max-width: 1000px) {

  .memoire-webgl-section > .row_col_wrap_12 {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media only screen and (max-width: 690px) {

  .memoire-webgl-section > .row_col_wrap_12 {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .memoire-webgl-background {
    /*
     * JavaScript renderizza un singolo frame statico
     * per gli utenti con Reduced Motion attivo.
     */
  }

}


/* Homepage V2: keep the Salient header fully transparent over WebGL. */
.page-id-303 #header-outer,
.page-id-303 #header-outer header#top,
.page-id-303 #header-outer header#top > .container,
.page-id-303 #header-outer::before,
.page-id-303 #header-outer::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}