/* ANIMAZIONI */
/* ------------------------------------------------ */
/* Sedici sequenze. Quattordici vengono dall'export della vetrina, che
   ne dichiarava sedici: due — haloDrift e textGlow — erano definite e
   mai usate, e un binding di animazione valeva sempre 'none', quindi
   non sono state portate. Le ultime due, entrata-breve e apri,
   arrivano dall'export dell'area clienti.

   I ritardi scaglionati (i quattro nodi del percorso, le nove gocce)
   stanno qui agganciati con :nth-child, non in attributi di stile:
   cosi' la Content-Security-Policy puo' vietare style= senza spegnere
   niente.

   In fondo al file c'e' il blocco che spegne tutto quando il sistema
   dichiara prefers-reduced-motion. Nell'export non c'era, con 46
   animazioni infinite attive contemporaneamente. */


/* LE SEQUENZE */
/* ------------------------------------------------ */

/* Il riflesso che attraversa il testo dorato. */
@keyframes riflesso {
  from { background-position: 200% 50%; }
  to   { background-position: 0% 50%; }
}

/* Il galleggiamento delle targhette sull'immagine. */
@keyframes galleggio {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* La rotazione lentissima degli anelli di sfondo. */
@keyframes giro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* L'entrata dal basso, una sola volta, al caricamento. */
@keyframes entrata {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* La stessa entrata, ma corta: quattordici pixel invece di
   ventiquattro. Serve all'area clienti, dove la stessa sequenza gira
   anche a diciotto centesimi di secondo sulla tendina del profilo, e
   a quella durata ventiquattro pixel scattano invece di scorrere. */
@keyframes entrata-breve {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* L'apertura di un pannello a fisarmonica: scende dall'alto di pochi
   pixel, il contrario dell'entrata. E' il dettaglio dei piani
   nell'area clienti. */
@keyframes apri {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lo scorrimento della fascia certificazioni. Il -50% e' esatto:
   l'elenco e' scritto due volte, e meta' pista e' una copia. */
@keyframes scorrimento {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* La goccia che cade da sopra lo schermo fino a sotto. */
@keyframes caduta {
  0%   { opacity: 0; transform: translateY(-15vh); }
  12%  { opacity: .8; }
  80%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(105vh); }
}

/* Il pallino che pulsa con un'onda intorno. */
@keyframes pulsazione-punto {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--rgb-accento) / .5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--rgb-accento) / 0); transform: scale(1.25); }
}

/* L'alone che respira intorno alla card in evidenza. */
@keyframes respiro-alone {
  0%, 100% { box-shadow: 0 0 40px -12px rgb(var(--rgb-accento) / .3); }
  50%      { box-shadow: 0 0 80px -8px rgb(var(--rgb-accento) / .55); }
}

/* La linea del percorso che si allunga e poi si spegne. */
@keyframes linea-viva {
  0%   { width: 0; opacity: 1; }
  75%  { width: 75%; opacity: 1; }
  92%  { width: 75%; opacity: 0; }
  100% { width: 0; opacity: 0; }
}

/* La lama di luce che attraversa una superficie. */
@keyframes lampo {
  0%   { opacity: 0; transform: translateX(-105%); }
  8%   { opacity: 1; }
  26%  { opacity: 1; transform: translateX(105%); }
  34%  { opacity: 0; transform: translateX(105%); }
  100% { opacity: 0; transform: translateX(105%); }
}

/* Il bordo che si accende per un istante ogni sei secondi. */
@keyframes bordo-vivo {
  0%, 100% {
    border-color: rgb(var(--rgb-accento) / .35);
    box-shadow: 0 0 0 0 rgb(var(--rgb-accento) / 0);
  }
  12%, 22% {
    border-color: var(--accento);
    box-shadow: 0 8px 26px -14px rgb(var(--rgb-accento-scuro) / .7);
  }
}

/* Il nodo del percorso che si accende al passaggio dell'onda. */
@keyframes nodo-acceso {
  0%, 100% {
    background: var(--superficie-chiara);
    color: var(--accento-su-chiaro);
    box-shadow: 0 0 0 0 rgb(var(--rgb-accento) / 0);
  }
  6%, 16% {
    background: var(--accento);
    color: var(--testo-su-scuro);
    box-shadow: 0 0 26px 4px rgb(var(--rgb-accento) / .55);
  }
  30% {
    background: var(--superficie-chiara);
    color: var(--accento-su-chiaro);
    box-shadow: 0 0 0 0 rgb(var(--rgb-accento) / 0);
  }
}

/* La scatola del conto alla rovescia che pulsa piano. */
@keyframes pulsazione-scatola {
  0%, 100% { box-shadow: 0 0 6px 0 rgb(var(--rgb-accento) / .25); }
  50%      { box-shadow: 0 0 22px 4px rgb(var(--rgb-accento) / .75); }
}

/* Il chiarore che appare e svanisce. */
@keyframes velatura {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}


/* DOVE SI APPLICANO */
/* ------------------------------------------------ */

/* Il riflesso dorato. Nell'export girava a 6 secondi in tredici punti
   e a 7 in altri sei, senza una ragione visibile: uniformato a 6. */
.oro {
  animation: riflesso 6s linear infinite;
}

.fregio--purezza {
  animation: galleggio 6s ease-in-out infinite;
}

.fregio--custodia {
  animation: galleggio 7s .8s ease-in-out infinite;
}

.eroe__titolo {
  animation: entrata .9s ease both;
}

.eroe__citazione,
.eroe__corpo {
  animation: entrata 1.1s .15s ease both;
}

.fascia__pista {
  animation: scorrimento 32s linear infinite;
}

.pillola__punto {
  animation: pulsazione-punto 2.2s ease-in-out infinite;
}

.conto__unita {
  animation: pulsazione-scatola 3s ease-in-out infinite;
}

.conto__unita:nth-child(2) { animation-delay: .5s; }
.conto__unita:nth-child(3) { animation-delay: 1s; }
.conto__unita:nth-child(4) { animation-delay: 1.5s; }

.conto__data {
  animation: velatura 2.2s ease-in-out infinite;
}

.piano--oro {
  animation: respiro-alone 5s ease-in-out infinite;
}

.percorso__linea--viva {
  animation: linea-viva 10s linear infinite;
}

/* --- Gli anelli di sfondo --- */

.anello {
  position: absolute;
  border-radius: var(--raggio-cerchio);
  pointer-events: none;
  animation: giro 90s linear infinite;
}

.anello--esterno {
  top: -250px;
  right: -170px;
  width: 560px;
  height: 560px;
  border: 1px solid var(--bordo-su-chiaro-tenue);
  animation-duration: 120s;
}

.anello--interno {
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  border: 1px dashed var(--bordo-su-chiaro);
}

/* --- I quattro nodi del percorso --- */
/* I ritardi compongono l'onda che risale la linea: sono i valori
   dell'export, e non vanno resi regolari o l'onda perde il ritmo. */

.passo__nodo {
  animation: nodo-acceso 10s ease-in-out infinite;
}

.passo:nth-child(1) .passo__nodo { animation-delay: 0.1s; }
.passo:nth-child(2) .passo__nodo { animation-delay: 1.1s; }
.passo:nth-child(3) .passo__nodo { animation-delay: 3.1s; }
.passo:nth-child(4) .passo__nodo { animation-delay: 5.2s; }

/* --- Le nove gocce di Gold Rain --- */
/* Posizione, altezza, durata e ritardo erano nove attributi di stile
   diversi. Qui sono nove righe, e il disegno resta identico. */

.goccia {
  position: absolute;
  top: 0;
  width: 1px;
  color: var(--accento-tenue);
  background: var(--grad-divisore);
  pointer-events: none;
  animation: caduta 6s linear infinite;
}

.goccia:nth-child(1) { left:  8%; height: 70px; animation-duration: 6s;   animation-delay: 0s; }
.goccia:nth-child(2) { left: 18%; height: 50px; animation-duration: 8s;   animation-delay: 2.2s; color: var(--accento); }
.goccia:nth-child(3) { left: 28%; height: 90px; animation-duration: 5.2s; animation-delay: 1.1s; }
.goccia:nth-child(4) { left: 38%; height: 44px; animation-duration: 9s;   animation-delay: 3.6s; color: var(--testo-su-scuro-tenue); }
.goccia:nth-child(5) { left: 50%; height: 64px; animation-duration: 7s;   animation-delay: 0.6s; }
.goccia:nth-child(6) { left: 62%; height: 52px; animation-duration: 6.4s; animation-delay: 2.8s; color: var(--accento); }
.goccia:nth-child(7) { left: 72%; height: 80px; animation-duration: 5.6s; animation-delay: 1.8s; }
.goccia:nth-child(8) { left: 84%; height: 46px; animation-duration: 8.4s; animation-delay: 4.4s; color: var(--testo-su-scuro-tenue); }
.goccia:nth-child(9) { left: 93%; height: 66px; animation-duration: 7.4s; animation-delay: 3.1s; }

/* --- La lama di luce sulle card --- */

.profilo {
  position: relative;
  overflow: hidden;
}

/* La card del piano in evidenza NON ritaglia: la targhetta "Il piu'
   scelto" sta a cavallo del bordo superiore, e overflow: hidden la
   taglierebbe a meta'. A contenere il lampo dentro gli angoli
   arrotondati basta il raggio ereditato dalla card. */
.piano {
  position: relative;
}

.profilo::after,
.piano--oro::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-sfondo);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-luccichio);
  opacity: 0;
  pointer-events: none;
  animation: lampo 6s ease-in-out infinite;
}

.piano--oro {
  animation: respiro-alone 5s ease-in-out infinite,
             bordo-vivo 6s ease-in-out infinite;
}


/* GLI ELEMENTI CHE SEGUONO IL PUNTATORE */
/* ------------------------------------------------ */
/* Nell'export erano quattro ascoltatori di mousemove che scrivevano
   transform e mask-image a ogni singolo evento, senza mai
   rimuoversi. Qui c'e' un ascoltatore solo, limitato a un fotogramma,
   che aggiorna due variabili: --mx e --my. Il resto lo fa il CSS.

   Senza JavaScript le due variabili non esistono, i valori di riserva
   mettono l'alone al centro e la maschera fuori campo, e la pagina
   resta perfettamente leggibile. */

.alone {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: var(--raggio-cerchio);
  background: var(--alone);
  filter: blur(30px);
  pointer-events: none;
  transform: translate(var(--mx, 50%), var(--my, 40%));
  transition: transform .9s var(--curva-uscita);
  will-change: transform;
}

.fiore {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1150px, 92vw);
  aspect-ratio: 1;
  background: url("../media/fiore.svg") no-repeat center / contain;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity var(--durata-lenta) ease;
  -webkit-mask-image: radial-gradient(circle 300px at var(--mx, -9999px) var(--my, -9999px),
    rgb(0 0 0 / .75) 0%, rgb(0 0 0 / .32) 45%, rgb(0 0 0 / 0) 72%);
  mask-image: radial-gradient(circle 300px at var(--mx, -9999px) var(--my, -9999px),
    rgb(0 0 0 / .75) 0%, rgb(0 0 0 / .32) 45%, rgb(0 0 0 / 0) 72%);
}

/* Su fondo scuro la moltiplicazione annerirebbe il fiore. */
.contesto-scuro .fiore {
  mix-blend-mode: screen;
}

/* Nell'eroe il fiore e' piu' grande della sezione, di proposito: deve
   esserci dovunque passi il puntatore, non solo dietro al testo. Quel
   che esce dai bordi lo taglia la sezione, e lo strato che lo
   contiene lo sfuma sopra e sotto. */
.eroe__pattern .fiore {
  width: min(1500px, 120vw);
}

[data-alone-attivo] .fiore {
  opacity: 1;
}


/* MOVIMENTO RIDOTTO */
/* ------------------------------------------------ */
/* Chi ha chiesto al proprio sistema di ridurre le animazioni ha una
   ragione per farlo, e spesso e' una ragione medica. Qui si spegne
   tutto cio' che si muove da solo, e restano le sole transizioni al
   passaggio del puntatore, accorciate. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* La linea del percorso resta disegnata invece che sparire. */
  .percorso__linea--viva {
    width: 75%;
    opacity: 1;
  }

  /* La fascia si ferma e mostra la prima copia. */
  .fascia__pista {
    transform: none;
  }

  /* Le gocce non cadono: non si vedono affatto. */
  .goldrain__pioggia {
    display: none;
  }

  /* Gli elementi che entrano dal basso partono gia' a posto. */
  .eroe__titolo,
  .eroe__citazione,
  .eroe__corpo {
    opacity: 1;
    transform: none;
  }
}