/* ANAD — movimento.
   Su un sito istituzionale il movimento serve a far capire che una cosa è
   arrivata, non a farsi notare. Resta questo:
     - i blocchi entrano una volta sola, con uno scarto breve;
     - l'arco del marchio si disegna quando la sezione compare;
     - niente parallasse, niente barre di avanzamento, niente testi che ruotano.

   Tutto sta sotto .anad-motion, classe che lo script inline nell'head mette su
   <html> solo se il JS è attivo e l'utente non ha chiesto meno animazioni.
   Senza quella classe la pagina si legge per intero: nessun contenuto
   (IBAN, quote, recapiti) dipende da un'animazione per comparire. */

.anad-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition: opacity var(--duration-slow) var(--ease-out-quart) var(--reveal-delay, 0ms),
              transform var(--duration-slow) var(--ease-out-expo) var(--reveal-delay, 0ms);
}

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

/* Il marchio si compone nell'ordine in cui si legge: prima il contorno dei due
   petali, poi le barre, poi il punto, e alla fine i petali si riempiono.
   Le lunghezze dei tratteggi sono quelle misurate sui tracciati reali. */
.anad-motion .marchio--hero .marchio__petalo {
  stroke-dashoffset: var(--traccia);
  transition: stroke-dashoffset 1.5s var(--ease-out-expo) var(--ritardo, 0ms);
}

.anad-motion .marchio--hero .marchio__petalo--navy { --traccia: 488; stroke-dasharray: 488; }
.anad-motion .marchio--hero .marchio__petalo--red { --traccia: 488; stroke-dasharray: 488; --ritardo: 180ms; }

/* I petali arrivano pieni solo a contorno concluso: prima il rosso, che si
   accende, poi il navy, e il logo è completo. */
.anad-motion .marchio--hero .marchio__petalo {
  fill-opacity: 0;
  transition: stroke-dashoffset 1.5s var(--ease-out-expo) var(--ritardo, 0ms),
              fill-opacity 900ms var(--ease-out-quart) var(--riempimento, 1100ms);
}

.anad-motion .marchio--hero .marchio__petalo--navy { --riempimento: 1300ms; }

.anad-motion .marchio--hero .marchio__barra,
.anad-motion .marchio--hero .marchio__punto {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out-quart) var(--ritardo, 0ms);
}

.anad-motion .marchio--hero .marchio__barra--2 { --ritardo: 760ms; }
.anad-motion .marchio--hero .marchio__barra--1 { --ritardo: 880ms; }
.anad-motion .marchio--hero .marchio__punto { --ritardo: 1000ms; }

.anad-motion .marchio--hero.is-visible .marchio__petalo { stroke-dashoffset: 0; }
.anad-motion .marchio--hero.is-visible .marchio__petalo { fill-opacity: 1; }

.anad-motion .marchio--hero.is-visible .marchio__barra,
.anad-motion .marchio--hero.is-visible .marchio__punto { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .marchio--hero .marchio__petalo,
  .marchio--hero .marchio__barra,
  .marchio--hero .marchio__punto {
    opacity: 1;
    fill-opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}