/* base.css — reset, sfondo decorativo globale, focus, stati :active,
   caricamento sui submit. Carica dopo tokens.css (usa var(--...) ovunque).
   Vedi l'indice in cima a tokens.css per l'ordine completo dei file. */

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* min-height + flex column: senza, il footer segue subito il contenuto
   e su pagine corte (poche card, empty state) resta a metà schermo con
   sfondo decorativo vuoto sotto — mai l'ultima cosa visibile. .container
   sotto prende flex: 1 0 auto e spinge il footer in fondo alla viewport
   quando il contenuto non la riempie, senza toccarlo quando lo fa. */
body  {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img   { max-width: 100%; display: block; }
a     { color: var(--copper-bright); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }

/* ── Sfondo decorativo globale ────────────────
   Due div dedicati con position:fixed (non background-attachment:fixed —
   quella proprietà su un elemento scrollabile ha bug noti su iOS Safari:
   scrolla via col contenuto invece di restare fissa, o sparisce del
   tutto su versioni più vecchie). z-index negativo, dietro a header/main/
   footer che sono nel flusso normale sopra di loro. */
.site-bg-gradient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse 140% 120% at 50% 55%,
    rgba(13,10,8,0)            18%,
    var(--site-bg-gradient-mid)  50%,
    var(--site-bg-gradient-hi)   72%,
    var(--site-bg-gradient-edge) 100%
  );
}

.site-bg-lineart {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--site-bg-lineart-image);
  background-size: 700px 700px;
  background-repeat: repeat;
  background-position: center;
  mix-blend-mode: screen;
  opacity: var(--site-bg-lineart-opacity);
  filter: sepia(.90) saturate(2.4) hue-rotate(-10deg) brightness(1.15);
}

/* Nessun movimento oggi su questi due layer — la regola resta come
   guardia: se in futuro ci si aggiunge un'animazione (parallax, drift
   della lineart...), si ferma qui per chi ha impostato "riduci
   animazioni", senza bisogno di ricordarsene altrove. */
@media (prefers-reduced-motion: reduce) {
  .site-bg-gradient,
  .site-bg-lineart {
    animation: none;
    transition: none;
  }
}

/* Pagine con form o testo lungo (vendi, faq, liste mazzo...):
   la leggibilità viene prima del gesto decorativo. */
body.bg-subtle {
  --site-bg-gradient-mid:    rgba(170,80,10,.05);
  --site-bg-gradient-hi:     rgba(200,100,0,.09);
  --site-bg-gradient-edge:   rgba(160,65,0,.14);
  --site-bg-lineart-opacity: .09;
}

/* Pagine che hanno già un proprio sfondo decorativo locale (.of-bg-*,
   sezione OranguFest): il layer globale si spegnerebbe solo sopra
   un'altra texture, quindi qui si disattiva del tutto invece di
   sovrapporsi. */
body.bg-none .site-bg-gradient,
body.bg-none .site-bg-lineart {
  display: none;
}

/* ── Focus visibile ────────────────────────────
   :focus-visible (non :focus) così l'anello compare per tastiera/switch
   ma non per un click con mouse — l'anello è comunque sempre disponibile,
   mai rimosso. Si somma agli eventuali stili di :focus già presenti su
   input/textarea (box-shadow), non li sostituisce. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--copper-bright);
  outline-offset: 3px;
}

/* ── Rivelazione allo scroll (static/js/reveal.js) ─────
   opacity + transform: mai layout shift (non animano flusso/dimensioni).
   Sotto i 400ms, sfalsata tra fratelli via --reveal-delay (impostata dal
   JS). Il CSS sotto prefers-reduced-motion è la vera garanzia — vale
   anche se il JS non parte, mai contenuto bloccato a opacity:0. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Feedback al tap sulle card ─────────────────
   :hover non è affidabile su touch (il tilt 3D via mousemove resta
   giustamente disattivato lì — vedi home.html); :active sì, e su
   desktop arriva anche col mouse un istante prima del click. Stessa
   famiglia visiva dell'hover di ciascuna card, scala invece di sollevare
   perché "premuto" si legge meglio di "sollevato" su un tap. */
.home-card:active,
.card:active,
.tcard:active {
  transform: scale(.98);
  border-color: var(--copper);
  box-shadow: var(--shadow-sm), var(--glow-copper);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tcard--full:active { transform: none; box-shadow: var(--shadow-sm); border-color: var(--copper-border); }

@media (prefers-reduced-motion: reduce) {
  .home-card:active,
  .card:active,
  .tcard:active { transform: none; }
}

/* ── Stato :active dei pulsanti ──────────────────
   Prima non esisteva alcuno stato :active — solo hover/focus. Leggero
   affondamento, percepibile ma non appariscente. */
.button:active,
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(1px) scale(.98);
  transition: transform .1s ease;
}
@media (prefers-reduced-motion: reduce) {
  .button:active,
  button[type="submit"]:active,
  input[type="submit"]:active { transform: none; }
}

/* ── Stato di caricamento sui submit (static/js/forms.js) ─────
   Spinner via ::after ruotante — niente libreria, un bordo con un
   quadrante trasparente. Il pulsante resta della sua dimensione (solo
   testo diverso + spinner sovrapposto): nessun layout shift. */
.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.button-filled.is-loading::after,
button[type="submit"].is-loading::after,
input[type="submit"].is-loading::after { border-top-color: var(--bg); }
.button.is-loading:not(.button-filled)::after { border-top-color: var(--copper-bright); }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .is-loading::after { animation-duration: 1.2s; }
}

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--copper); border-radius: var(--radius-pill); }

/* ── Layout ─────────────────────────────────── */
.container {
  width: min(var(--container-wide), 92vw);
  margin: 2.5rem auto;
  flex: 1 0 auto;
}