/* Critical Roma — design tokens
   Roma di notte: facciata di mattoni, cielo blu inchiostro, un solo lampo oro.
   Colore = ruolo: oro = azione, rosso/blu = lampeggiante della volante (solo accenti). */
:root {
  --bg: #0D1320;
  --bg-deep: #090E18;
  --surface: #151D2F;
  --surface-2: #1C2640;
  --border: #29334F;
  --border-soft: #1F2840;
  --text: #F1EBDA;
  --text-dim: #A3ABC4;
  --text-faint: #8089A8;

  --gold: #F0B92E;
  --gold-ink: #1A1305;
  --brick: #B4552F;
  --red: #E8735A;
  --blue: #8CA6D8;

  --mono-bg: #101828;

  /* Ombre con offset e sfocatura vera: niente aloni a offset zero. */
  --shadow-1: 0 2px 4px rgba(4,7,14,0.35), 0 10px 24px -8px rgba(4,7,14,0.55);
  --shadow-2: 0 4px 8px rgba(4,7,14,0.4), 0 24px 48px -12px rgba(4,7,14,0.65);

  --radius-sm: 4px;
  --radius-md: 8px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Scala tipografica a ruoli */
  --fs-display: clamp(2.5rem, 7vw, 4.6rem);
  --fs-h2: clamp(1.6rem, 3.4vw, 2.3rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  scrollbar-color: var(--surface-2) var(--bg-deep);
  scrollbar-width: thin;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--gold);
  /* Muro di mattoni in corsi sfalsati (running bond), ridotto a texture: un solo
     SVG ripetuto, niente fixed (costoso su mobile). */
  background-image:
    linear-gradient(180deg, rgba(13,19,32,0) 0%, var(--bg) 900px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cpath d='M0 .5h96M0 24.5h96M0 48.5h96M24 .5v24M72 .5v24M0 24.5v24M48 24.5v24M96 24.5v24' fill='none' stroke='%23B4552F' stroke-opacity='.11'/%3E%3C/svg%3E");
}

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

img, video { max-width: 100%; display: block; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--gold); color: var(--gold-ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Scrollbar WebKit tematizzata */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border: 2px solid var(--bg-deep); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* Transizione tra pagine: cambia solo <main>, header e footer restano fermi. */
#mainContent { view-transition-name: main-content; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(main-content) { animation: page-out 0.14s cubic-bezier(0.4,0,1,1) both; }
  ::view-transition-new(main-content) { animation: page-in 0.3s var(--ease-out) both; }
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Icone (sprite <symbol>) ---- */
.icon { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; vertical-align: -0.125em; }
svg[width="0"][height="0"] { position: absolute; }

/* ---- Rivelazione allo scroll ----
   Il contenuto è SEMPRE visibile di default; l'animazione parte solo quando
   scroll-reveal.js conferma (classe .reveal-armed), mai come condizione per mostrarlo. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.reveal.is-visible { animation: rise 0.6s var(--ease-out) both; }
html.reveal-armed .reveal:not(.is-visible) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.reveal-armed .reveal:not(.is-visible) { opacity: 1; }
}