/* ==========================================================================
   Experience — comportamenti che nell'originale erano gestiti da React.
   Si affianca ad app.css (il foglio di stile compilato del design).
   ========================================================================== */

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Utility mancanti nel foglio compilato
   app.css contiene solo le classi che il sito originale usava davvero. Le
   pagine legali hanno elenchi puntati, che nel sito non comparivano da
   nessuna parte: queste tre regole colmano il buco con gli stessi valori
   che userebbe Tailwind.
   -------------------------------------------------------------------------- */
.list-disc {
  list-style-type: disc;
}

.pl-5 {
  padding-left: 1.25rem;
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.375rem;
}

/* --------------------------------------------------------------------------
   Profilo utente / azienda
   La home esiste in due versioni complete nel documento: mostriamo quella
   giusta via CSS, cosi' il contenuto e' gia' nel markup e non serve JS per
   costruirlo. Senza scelta salvata vale "consumer", come nell'originale.
   -------------------------------------------------------------------------- */
html:not([data-persona='business']) [data-persona-only='business'] {
  display: none !important;
}

html[data-persona='business'] [data-persona-only='consumer'] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Comparsa in scroll
   Replica l'effetto whileInView di framer-motion. Le regole si applicano solo
   con JS attivo: senza, il contenuto resta semplicemente visibile invece di
   sparire per sempre a opacity 0.
   -------------------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.js [data-reveal='up'] {
  transform: translateY(24px);
}

html.js [data-reveal='scale'] {
  transform: scale(0.94);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Overlay (menu mobile, scelta profilo, cambio profilo)
   -------------------------------------------------------------------------- */
[data-overlay] > div {
  animation: exp-overlay-in 0.25s ease both;
}

[data-overlay='menu'] > div > div {
  animation: exp-panel-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-overlay='entry'] [role='dialog'],
[data-overlay='switcher'] [role='dialog'] {
  animation: exp-dialog-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes exp-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes exp-panel-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes exp-dialog-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Blocca lo scroll della pagina mentre un overlay e' aperto */
body.exp-no-scroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Accessibilita': chi preferisce meno movimento non subisce le animazioni
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-overlay] > div,
  [data-overlay='menu'] > div > div,
  [data-overlay='entry'] [role='dialog'],
  [data-overlay='switcher'] [role='dialog'] {
    animation: none;
  }
}