/* ---------------------------------------------------------------------------
   Il Mercato del Tempo — tema condiviso

   Nessun font remoto, nessuna richiesta esterna: in un teatro con cinquecento
   telefoni sulla stessa cella, ogni richiesta di rete in più è un rischio.
   Si usano i font di sistema, che su iOS e Android sono già eccellenti.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Il carattere dei titoli: Bodoni Moda.

   Un didone ad alto contrasto — il carattere dei manifesti d'opera. La scelta
   non è ornamentale: l'evento si tiene in un teatro lirico, il momento è
   un'asta, e un didone porta addosso entrambe le cose. Un serif neutro
   direbbe «pagina web»; questo dice «locandina».

   Ospitato qui e non su una rete esterna: in un teatro con cinquecento telefoni
   sulla stessa cella, dipendere da un dominio di terzi è un rischio che non
   vale il risparmio. È un font variabile, quindi un solo file copre tutti i
   pesi, e ai titoli sul ledwall si dà un peso alto: le aste sottili del didone
   sparirebbero dall'ultima fila.

   `font-display: swap` è la rete di sicurezza: se il file non arriva, il testo
   compare subito col serif di sistema e nessuno resta davanti a una pagina
   bianca.

   SIL Open Font License 1.1 — il testo della licenza è in font/OFL.txt, come
   la licenza richiede.
   --------------------------------------------------------------------------- */

/* Il carattere del brand TBH (8 settembre 2026): Century Gothic, file forniti
   dalla grafica, ospitati in proprio come tutto il resto. */
@font-face {
  font-family: "Century Gothic";
  src: url("/font/century-gothic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic";
  src: url("/font/century-gothic-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic";
  src: url("/font/century-gothic-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic";
  src: url("/font/century-gothic-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni Moda";
  src: url("/font/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bodoni Moda";
  src: url("/font/bodoni-moda-latin-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Fondo e superfici */
  --nero: #08090b;
  --nero-alto: #0e1014;
  --superficie: #16191f;
  --superficie-alta: #1e222a;
  --bordo: #2a2f3a;
  --bordo-vivo: #3d4350;

  /* Testo — contrasti misurati sul fondo nero (#08090b):
     testo 18:1 · tenue 8,1:1 · fioco 5,5:1. Il fioco era #6b6862, che si
     fermava a 3,6:1 — sotto il minimo di 4,5:1 per il testo normale. */
  --testo: #f4f1ea;
  --testo-tenue: #a8a49b;
  --testo-fioco: #8a8680;

  /* Accento: l'oro dice "valore" senza dire "denaro" */
  --oro: #c9a227;
  --oro-chiaro: #e3bf47;
  --oro-fioco: rgba(201, 162, 39, 0.13);
  --oro-bordo: rgba(201, 162, 39, 0.42);

  /* Il freddo del conto da pagare.
     L'oro accompagna il desiderio: le promesse, i coin, ciò che si compra. Al
     reveal il tono cambia — non si parla più di cosa si ottiene ma di cosa
     costa — e con lui cambia il colore. Non è decorazione: è la stessa
     inversione che il Banditore fa con la voce.
     Resta oro un solo riquadro, il lotto 5: l'unico prezzo che non si lascia
     scrivere in cifre. */
  --freddo: #8fa3b8;
  --freddo-fioco: rgba(143, 163, 184, 0.11);
  --freddo-bordo: rgba(143, 163, 184, 0.38);

  /* Segnali */
  --aperto: #4ea86b;
  --chiuso: #b4544e;

  /* Tipografia */
  /* Dall'8 settembre 2026 il carattere del brand regge tutto, testo e titoli.
     La variabile dei titoli si chiama ancora --serif per non toccare ogni file. */
  --sans: "Century Gothic", "URW Gothic", Futura, "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --serif: "Century Gothic", "URW Gothic", Futura, "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Ritmo */
  --sp-1: 0.5rem;
  --sp-2: 0.875rem;
  --sp-3: 1.375rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;

  --raggio: 14px;
  --raggio-p: 8px;

  /* Le andature. Una curva sola, declinata su tre durate: partenza decisa,
     arrivo lunghissimo. È la differenza fra un oggetto che si sposta e un
     oggetto che ha una massa. */
  --moto: 520ms cubic-bezier(0.32, 0.72, 0, 1);
  --moto-breve: 220ms cubic-bezier(0.32, 0.72, 0, 1);
  --moto-lungo: 1100ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Grana finissima su tutta la superficie. Su un ledwall da teatro toglie
   quell'aria di "schermo di computer" e avvicina la texture della pellicola.
   Elemento fisso e non interattivo: non entra mai nei ricalcoli di layout. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--nero);
  color: var(--testo);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* I numeri non devono ballare mentre cambiano */
.cifra,
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
  line-height: 1.55;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Occhiello: il testo minuscolo maiuscolo che intitola i blocchi */
.occhiello {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--testo-fioco);
}

.oro {
  color: var(--oro);
}

/* --- Comparse ------------------------------------------------------------ */

@keyframes entra {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.entra {
  animation: entra var(--moto) both;
}

@keyframes pulsa {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- Stato della connessione --------------------------------------------- */

.spia {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 1rem;
  background: var(--chiuso);
  color: #fff;
  font-size: 0.8125rem;
  text-align: center;
  transform: translateY(-100%);
  transition: transform var(--moto-breve);
  z-index: 999;
}

.spia.visibile {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}