/* Volta Studio — design token condivisi.
   Palette invariata; font ospitati sul sito (nessuna richiesta a terze parti). */

@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/web/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/web/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/web/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/web/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Palette (tema scuro, quella di sempre) */
  --bg: #0e0d0b;
  --bg2: #0b0a09;
  --bg3: #161210;
  --text: #f0ece4;
  --text2: rgba(240,236,228,0.62);
  --text3: rgba(240,236,228,0.42);
  --text4: rgba(240,236,228,0.28);
  --accent: #c9895a;
  --accent-soft: rgba(201,137,90,0.10);
  --border: rgba(240,236,228,0.08);
  --border2: rgba(240,236,228,0.14);
  --card: #12100e;
  --card-hover: #171411;
  --btn-text: #0e0d0b;

  /* Tipografia */
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spazi e forme */
  --container: 1240px;
  --gutter: 48px;
  --section: 128px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 10px;

  /* Movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
}

.light {
  --bg: #f5f2ed;
  --bg2: #edeae4;
  --bg3: #1a1714;
  --text: #1a1714;
  --text2: rgba(26,23,20,0.66);
  --text3: rgba(26,23,20,0.48);
  --text4: rgba(26,23,20,0.32);
  --accent: #b5703a;
  --accent-soft: rgba(181,112,58,0.10);
  --border: rgba(26,23,20,0.09);
  --border2: rgba(26,23,20,0.16);
  --card: #efebe5;
  --card-hover: #e9e4dc;
  --btn-text: #f5f2ed;
}

/* ─── Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6; font-weight: 400;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }

/* Elementi visibili solo in un tema (es. logo chiaro/scuro) */
.only-light { display: none !important; }
.light .only-light { display: block !important; }
.light .only-dark { display: none !important; }
::selection { background: var(--accent); color: var(--btn-text); }

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

:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 300;
  background: var(--accent); color: var(--btn-text); padding: 10px 16px;
  font-size: 13px; text-decoration: none; border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; }

/* Etichetta tecnica: mono, piccola, usata con parsimonia */
.eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }

/* ─── Bottoni e link ────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  padding: 14px 24px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--btn-text); }
.btn-primary:hover { background: #d4976a; }
.light .btn-primary { color: #fff; }
.light .btn-primary:hover { background: #a6632f; }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid var(--border2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow:hover { border-color: var(--accent); }
.link-arrow.accent { color: var(--accent); }
.link-arrow .arrow { transition: transform var(--dur) var(--ease); }

/* ─── Grana di fondo (fissa, non intercetta i clic) ─── */
.grain::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Comparsa allo scroll (attivata da JS, rispetta "riduci movimento") ─── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .reveal.in { opacity: 1; transform: none; }
}

@media (max-width: 900px) { :root { --gutter: 28px; --section: 96px; } }
@media (max-width: 680px) { :root { --gutter: 20px; --section: 72px; } }