/* ==========================================================================
   ods-motion.css — le animazioni di ingresso e di hover del sito.

   Richiesta operatore 12/08: "more scroll-based animation, hover-based
   animations, and as you scroll and you reveal more text, I want the text
   to animate in a certain way".

   TRE REGOLE che tengono in piedi tutto:
   1. Lo stato nascosto lo applica SOLO JavaScript (ods-motion.js aggiunge
      .ods-reveal). Senza JS niente classe, quindi niente contenuto invisibile:
      la pagina resta perfettamente leggibile. Mai nascondere in CSS puro.
   2. `prefers-reduced-motion: reduce` spegne ogni movimento. Non e' cortesia:
      per chi soffre di disturbi vestibolari le animazioni di scroll sono
      nausea, e un organismo ADR deve essere usabile da chiunque.
   3. Solo transform e opacity: niente layout, niente reflow, niente jank.
   ========================================================================== */

/* --- Ingresso allo scroll ------------------------------------------------- */

.ods-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--ods-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.ods-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --- Il testo dei titoli: entra da sotto una maschera --------------------- */

.ods-reveal-text {
  overflow: hidden;             /* la maschera */
}

.ods-reveal-text .ods-reveal-text-inner {
  display: block;
  transform: translateY(110%);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--ods-reveal-delay, 0ms);
}

.ods-reveal-text.is-in .ods-reveal-text-inner {
  transform: none;
}

/* --- Hover ----------------------------------------------------------------
   Le carte si sollevano, i bottoni premono. Sempre con transizione anche in
   uscita, cosi' il rilascio non scatta. Solo dove il puntatore esiste
   davvero: dentro (hover:hover) i tocchi del telefono non restano "appesi"
   nello stato hover dopo il dito. */

@media (hover: hover) and (pointer: fine) {
  .ods-home-section .card,
  .ods-step,
  .ods-art21-card,
  .box-ecosystem {
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .ods-home-section .card:hover,
  .ods-step:hover,
  .ods-art21-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
  }

  .btn-primary,
  .hero-cta {
    transition: transform .18s ease, box-shadow .18s ease,
                background-color .18s ease, border-color .18s ease;
  }

  /* Ombra NEUTRA, non arancione: il bagliore colorato sotto i bottoni
     leggeva come "una linea arancione" al passaggio del mouse (operatore,
     12/08: "levala ovunque"). Il sollevamento resta, il colore no. */
  .btn-primary:hover,
  .hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, .18);
  }

  .btn-primary:active,
  .hero-cta:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(16, 24, 40, .14);
  }

  .ods-faq .accordion-button {
    transition: background-color .2s ease;
  }

  .ods-faq .accordion-button.collapsed:hover {
    background-color: #dde9fb;
  }
}

/* --- L'interruttore d'accessibilita' --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ods-reveal,
  .ods-reveal-text .ods-reveal-text-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ods-home-section .card,
  .ods-step,
  .ods-art21-card,
  .btn-primary,
  .hero-cta {
    transition: none !important;
  }

  .ods-home-section .card:hover,
  .ods-step:hover,
  .ods-art21-card:hover,
  .btn-primary:hover,
  .hero-cta:hover {
    transform: none !important;
  }
}