/* =========================================================================
   Manifesto Particle Slider — layout della sezione pinnata
   Selettori ancorati agli ID (#manifesto-principi, #principio-N) perché le
   classi _css_classes di Elementor non vengono applicate in modo affidabile.
   Attivo solo quando il JS aggiunge la classe .mps-ready.
   ========================================================================= */

/* Sezione = viewport dello slider (pin ScrollTrigger) */
#manifesto-principi.mps-ready {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden !important;
  display: block !important;
  padding: 0 !important;
  background: #16283F !important;          /* navy profondo: le particelle giallo additive risaltano */
}
/* neutralizza la vecchia traccia orizzontale */
#manifesto-principi.mps-ready #manifesto-track,
#manifesto-principi.mps-ready > .e-con-inner { all: unset; }
#manifesto-track.mps-hidden { display: none !important; }

/* Canvas particellare a PIENA LARGHEZZA: la forma resta a destra (offset via JS),
   le particelle "vaganti" attraversano tutta la sezione. */
#manifesto-principi.mps-ready .mps-gl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
#manifesto-principi.mps-ready .mps-gl canvas { display: block; width: 100% !important; height: 100% !important; }
/* scrim a sinistra: attenua le particelle dietro ai testi per la leggibilità,
   trasparente a destra dove si forma l'immagine. */
#manifesto-principi.mps-ready .mps-gl::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,40,63,0.92) 0%, rgba(22,40,63,0.55) 26%, rgba(22,40,63,0) 50%);
}

/* Layer testi a sinistra */
#manifesto-principi.mps-ready .mps-texts {
  position: absolute; top: 0; left: 0;
  width: 48%; height: 100%; z-index: 3;
}

/* Ogni principio: sovrapposto, centrato verticalmente, crossfade via JS.
   I container Elementor sono flex-column con justify-content:flex-start
   (contenuto in alto): forzo la riga e centro verticalmente il blocco. */
#manifesto-principi.mps-ready [id^="principio-"] {
  position: absolute; inset: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;        /* centraggio verticale del blocco testo */
  justify-content: flex-start !important; /* testo a sinistra */
  margin: 0 !important;
  padding: 0 clamp(1.5rem, 4vw, 4.5rem) !important;
  background: transparent !important;
  min-height: 0 !important;
  opacity: 0; will-change: opacity, transform;
}
/* i wrapper interni di Elementor: piena larghezza, altezza da contenuto,
   niente stretch verticale (altrimenti il centraggio non ha effetto) */
#manifesto-principi.mps-ready [id^="principio-"] .e-con,
#manifesto-principi.mps-ready [id^="principio-"] .e-con-inner {
  max-width: none !important; width: 100% !important; padding: 0 !important;
  height: auto !important; min-height: 0 !important; align-self: center !important;
  flex: 0 0 auto !important; justify-content: flex-start !important;
}
#manifesto-principi.mps-ready [id^="principio-"] .e-con > .e-con-inner > .e-con {
  width: 100% !important; max-width: 620px !important;
}

/* Testi in versione chiara (sfondo ora sempre navy) */
#manifesto-principi.mps-ready [id^="principio-"] .principle__index,
#manifesto-principi.mps-ready [id^="principio-"] .principle__index .elementor-heading-title {
  color: #E8C547 !important;
}
#manifesto-principi.mps-ready [id^="principio-"] .principle__title,
#manifesto-principi.mps-ready [id^="principio-"] .principle__title .elementor-heading-title,
#manifesto-principi.mps-ready [id^="principio-"] h1,
#manifesto-principi.mps-ready [id^="principio-"] h2,
#manifesto-principi.mps-ready [id^="principio-"] h3,
#manifesto-principi.mps-ready [id^="principio-"] .elementor-heading-title {
  color: #FFFFFF !important;
}
#manifesto-principi.mps-ready [id^="principio-"] .elementor-widget-text-editor,
#manifesto-principi.mps-ready [id^="principio-"] .elementor-widget-text-editor * {
  color: #E7DFCD !important;
}

/* Indicatore progressione (dots) opzionale, generato dal JS */
#manifesto-principi.mps-ready .mps-dots {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 11px; z-index: 4; pointer-events: none;
}
#manifesto-principi.mps-ready .mps-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(244,239,228,.25);
  transition: height .4s ease, background .4s ease;
}
#manifesto-principi.mps-ready .mps-dots i.on { height: 26px; border-radius: 4px; background: #E8C547; }

/* --------------------------- Mobile / tablet --------------------------- */
@media (max-width: 900px) {
  #manifesto-principi.mps-ready .mps-gl { width: 100%; opacity: 0.55; }
  #manifesto-principi.mps-ready .mps-gl::before {
    background: linear-gradient(0deg, #16283F 6%, rgba(22,40,63,0) 55%);
  }
  #manifesto-principi.mps-ready .mps-texts { width: 100%; z-index: 3; }
  #manifesto-principi.mps-ready [id^="principio-"] {
    align-items: flex-end !important;
    padding: 0 1.5rem 12vh !important;
  }
  #manifesto-principi.mps-ready [id^="principio-"] .e-con > .e-con-inner > .e-con { max-width: 100% !important; }
  #manifesto-principi.mps-ready .mps-dots { right: 14px; }
}