/* ============================================================================
   tema.css — i colori, le misure e il movimento di DR Re-Mint.

   Sta separato dal resto perché è l'unico file da toccare se il marchio cambia:
   qui dentro non c'è nessuna decisione di impaginazione, solo il vocabolario.

   I colori sono quelli del brand kit di Giacomo Campioni, presi dal file e non
   a occhio.
   ============================================================================ */

:root {
  /* ---- il marchio ---- */
  --viola-profondo: #3B2A6D;    /* DEEP PURPLE — il fondo di tutto */
  --viola-medio:    #493F91;    /* MID PURPLE */
  --viola-chiaro:   #9681BC;    /* SOFT PURPLE */
  --giallo:         #FFCA02;    /* ELECTRIC YELLOW — il lettering */
  --arancio:        #FB4934;    /* ELECTRIC ORANGE — le scintille */

  /* ---- derivati ----
     Il fondo è un filo più scuro del viola profondo del marchio: così il
     logotipo, che quel viola ce l'ha dentro, si stacca invece di annegarci. */
  --fondo:          #2E2057;
  --fondo-alto:     #372866;
  --scheda:         rgba(255,255,255,.055);
  --bordo:          rgba(255,255,255,.13);
  --bordo-forte:    rgba(255,255,255,.26);

  --testo:          #F4F1FA;
  --testo-tenue:    #BCAEDC;

  /* Il logo del sito. Riferito da una variabile e non scritto in dieci punti:
     cambiarlo è una riga. */
  --logo-principale: url('/marchio/logo-orizzontale.webp');

  /* ---- i caratteri ----
     Dal brand kit: Shifa Rame per i titoli, Archivo Black per i testi.

     Shifa Rame è servito da noi (@font-face in fondo a questo file, file in
     `pubblico/font/`). Baloo 2 resta dietro nella pila come rete di sicurezza:
     se un giorno il file sparisse o non si scaricasse, i titoli scenderebbero
     su un tondo simile invece che sul carattere di sistema.

     Archivo Black ha UN SOLO peso, ed è già il nero. Per questo più sotto
     `font-synthesis: none`: senza, il browser proverebbe a ingrassarlo da solo
     su ogni <b> e il risultato è una macchia sbavata, non un grassetto. */
  --font-titoli: 'Shifa Rame', 'Baloo 2', system-ui, -apple-system, sans-serif;
  --font-testo:  'Archivo Black', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- misure ---- */
  --largo: 1120px;
  --raggio: 18px;
  --raggio-grande: 26px;

  /* ---- il movimento ----
     Il vocabolario è quello dell'adesivo: entrate corte con un rimbalzo
     minimo, niente scorrimento addomesticato, niente scene in tre dimensioni.
     Deve sembrare una figurina che si posa, non un film. */
  --molla: cubic-bezier(.34, 1.56, .64, 1);
  --dolce: cubic-bezier(.22, .61, .36, 1);
  --durata: .5s;
}

/* ============================================================================
   Chi ha chiesto meno movimento lo ottiene: tutto fermo, tutto leggibile.
   Non è una cortesia — per chi soffre di disturbi vestibolari un'animazione
   non richiesta è un sintomo, non un effetto.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anima] { opacity: 1 !important; transform: none !important; }
  /* Le parole del titolo partono da `opacity: 0` e ci arrivano con
     un'animazione: azzerarne la durata le porterebbe comunque a destinazione
     (`both` applica lo stato finale), ma dirlo esplicitamente costa una riga e
     toglie ogni dubbio su un elemento che, se resta invisibile, lascia la
     pagina senza titolo. */
  .js .titolo-vivo span { opacity: 1 !important; }
  /* niente inseguimento del mouse e niente striscia che scorre */
  .js .dottore { transform: none !important; }
  .js .striscia-nastro { animation: none !important; }
  /* i bottoni non si spostano e il cursore non semina scintille */
  .js .magnetico { transform: none !important; }
  .scia { display: none !important; }
  /* lo sfondo resta, ma fermo: le bolle danno profondità anche immobili */
  .js .bolla, .js .grana { animation: none !important; }
  .js .cv { display: none !important; }
  /* niente parallasse e niente inclinazioni: le sezioni entrano e basta */
  .js .bolla, .js .volo, .js .dottore-cornice, 
  .js .vetrina .contenitore > div:first-child,
  .js .vetrina .contenitore > div:first-child > [data-anima].dentro
    { translate: none !important; scale: none !important; opacity: 1 !important; }
  .js .sez .inclina.tocca, .js .inclina.tocca,
  .js .sez .inclina.tocca > *, .js .inclina.tocca > * { transform: none !important; }
}

/* ---- l'entrata: la usa qualunque elemento con data-anima ----
   Parte da `opacity:0`, ma SOLO se il JavaScript è vivo: la classe `.js` la
   mette lo script appena parte. Senza, una pagina con JavaScript spento
   resterebbe bianca — che è il modo peggiore di fare le cose belle. */
.js [data-anima] {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity var(--durata) var(--dolce), transform var(--durata) var(--molla);
}
.js [data-anima].dentro {
  opacity: 1;
  transform: none;
}
/* i figli entrano a cascata, non tutti insieme */
.js [data-anima][style*="--ritardo"] { transition-delay: var(--ritardo); }

/* ---- il galleggiamento del dottore ----
   Due pixel, otto secondi. Deve accorgersene solo chi lo guarda apposta. */
@keyframes galleggia {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-9px) }
}

/* ---- le scintille del marchio ----
   Arancioni e gialle, come nel kit. Brillano sfasate, altrimenti sembrano un
   lampeggio e non una scintilla. */
@keyframes brilla {
  0%, 82%, 100% { opacity: 0; transform: scale(.4) rotate(0deg) }
  88%           { opacity: 1; transform: scale(1) rotate(15deg) }
  94%           { opacity: .5; transform: scale(.8) rotate(25deg) }
}

/* ---- il rimbalzo del distintivo ---- */
@keyframes posa {
  0%   { opacity: 0; transform: translateY(24px) scale(.9) rotate(-3deg) }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.02) rotate(1deg) }
  100% { opacity: 1; transform: none }
}

/* ---- l'alone dietro al dottore ----
   Respira: quattro secondi per allargarsi, quattro per tornare. Serve a
   staccarlo dal fondo senza mettergli un bordo, che su un disegno a fumetto
   sarebbe una seconda linea di contorno in competizione con la sua. */
@keyframes respira {
  0%, 100% { transform: scale(1);    opacity: .55 }
  50%      { transform: scale(1.09); opacity: .8 }
}

/* ---- le carte che galleggiano nel fondo ----
   Tre traiettorie diverse, tempi lunghi e primi numeri: così non tornano mai
   in fase fra loro e il movimento non prende un ritmo riconoscibile. */
@keyframes deriva1 {
  0%   { transform: translate(0,0) rotate(-14deg) }
  50%  { transform: translate(22px,-30px) rotate(-6deg) }
  100% { transform: translate(0,0) rotate(-14deg) }
}
@keyframes deriva2 {
  0%   { transform: translate(0,0) rotate(11deg) }
  50%  { transform: translate(-26px,20px) rotate(19deg) }
  100% { transform: translate(0,0) rotate(11deg) }
}
@keyframes deriva3 {
  0%   { transform: translate(0,0) rotate(6deg) }
  50%  { transform: translate(16px,26px) rotate(-4deg) }
  100% { transform: translate(0,0) rotate(6deg) }
}

/* ---- il lampo di luce che attraversa una scheda ---- */
@keyframes lampo {
  0%   { transform: translateX(-120%) skewX(-18deg) }
  100% { transform: translateX(320%)  skewX(-18deg) }
}

/* ---- il nastro «più scelto», che pulsa appena ---- */
@keyframes pulsa {
  0%, 100% { filter: brightness(1) }
  50%      { filter: brightness(1.14) }
}

/* ---- le parole del titolo, una dopo l'altra ---- */
@keyframes parolaSu {
  0%   { opacity: 0; transform: translateY(.5em) rotate(-2deg) }
  100% { opacity: 1; transform: none }
}

/* ---- il numero dei passi, che rimbalza entrando ---- */
@keyframes timbro {
  0%   { transform: scale(.4) rotate(-16deg); opacity: 0 }
  55%  { transform: scale(1.15) rotate(4deg); opacity: 1 }
  100% { transform: scale(1) rotate(0); opacity: 1 }
}

/* ---- lo sfondo: le bolle che vagano ----
   Percorsi diversi e durate che non sono multiple fra loro, così le quattro
   bolle non tornano mai nella stessa posizione relativa e il fondo non prende
   un ritmo riconoscibile. */
@keyframes vagaA {
  0%, 100% { transform: translate(0, 0) scale(1) }
  33%      { transform: translate(8vw, 6vh) scale(1.12) }
  66%      { transform: translate(-4vw, 10vh) scale(.94) }
}
@keyframes vagaB {
  0%, 100% { transform: translate(0, 0) scale(1) }
  40%      { transform: translate(-9vw, 8vh) scale(1.18) }
  70%      { transform: translate(5vw, -6vh) scale(.9) }
}
@keyframes vagaC {
  0%, 100% { transform: translate(0, 0) scale(1) }
  50%      { transform: translate(11vw, -9vh) scale(1.1) }
}

/* ---- le carte che salgono dal fondo ---- */
@keyframes sali {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0 }
  10%  { opacity: 1 }
  90%  { opacity: 1 }
  100% { transform: translateY(-118vh) rotate(180deg); opacity: 0 }
}
@keyframes saliStorta {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0 }
  12%  { opacity: 1 }
  50%  { transform: translateY(-60vh) translateX(40px) rotate(-120deg) }
  88%  { opacity: 1 }
  100% { transform: translateY(-118vh) translateX(-20px) rotate(-260deg); opacity: 0 }
}

/* ---- la grana, che si sposta a scatti ----
   `steps()` e non un movimento continuo: il rumore deve saltare come la grana
   di una pellicola, non scivolare. */
@keyframes grattugia {
  0%   { transform: translate(0, 0) }
  12%  { transform: translate(-3%, -2%) }
  25%  { transform: translate(2%, 3%) }
  37%  { transform: translate(-4%, 1%) }
  50%  { transform: translate(3%, -3%) }
  62%  { transform: translate(-1%, 4%) }
  75%  { transform: translate(4%, 2%) }
  87%  { transform: translate(-2%, -4%) }
  100% { transform: translate(0, 0) }
}

/* ---- la scintilla lasciata dal cursore, che sale e svanisce ---- */
@keyframes sciaVia {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg) }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(.3) rotate(90deg) }
}

/* ---- la striscia scorrevole ---- */
@keyframes scorre {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}


/* ============================================================================
   SHIFA RAME — il carattere dei titoli del marchio.
   Mabhal Studio, 2022. Donationware: gratuito per l'uso personale, con
   donazione richiesta per quello commerciale.
   https://mabhalstudio.gumroad.com/l/shifaramefont

   Servito da noi, non da un CDN: la CSP consente `font-src 'self'` e il file
   non lascia tracce di chi visita il sito da nessun'altra parte.

   Due formati e in quest'ordine: il woff2 (30 KB) lo capiscono tutti i browser
   in circolazione, il ttf (69 KB) è il ripiego per quelli molto vecchi. Il
   browser scarica SOLO il primo che sa leggere, quindi il secondo non costa
   niente a chi non ne ha bisogno.

   `font-display: swap` non è un dettaglio: senza, chi ha la rete lenta vede i
   titoli invisibili finché il file non arriva. Con swap legge subito il
   ripiego e il carattere giusto entra dopo.

   Un peso solo, 400. Il `font-synthesis: none` in stile.css serve proprio a
   questo: senza, ogni titolo con `font-weight: 800` verrebbe ingrassato dal
   browser a forza, sbavando le aste tonde che sono il carattere del marchio.
   ============================================================================ */
@font-face {
  font-family: 'Shifa Rame';
  src: url('/font/shifa-rame.woff2') format('woff2'),
       url('/font/shifa-rame.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}