/* Sito dello studio: base condivisa da tutte le pagine.
   Una palette, un accento (cobalto), angoli vivi ovunque, solo Switzer. */

/* Switzer (Fontshare, ITF Free Font License), ospitato nel sito. */
@font-face { font-family: "Switzer"; src: url("fonts/switzer-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #f3f3f1;
  --surface: #e9e9e6;
  --ink: #131313;
  --muted: #62625e;
  --line: #d6d6d2;
  --accent: #3346d3;
  --accent-ink: #f3f3f1;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --header-h: 72px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-mass: cubic-bezier(.32, .72, 0, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111112;
    --surface: #1b1b1d;
    --ink: #ececea;
    --muted: #9d9d99;
    --line: #2c2c2f;
    --accent: #7b8bff;
    --accent-ink: #111112;
  }
}

/* Transizione tra pagine (View Transitions native): la pagina vecchia si avvicina
   e svanisce, poi la nuova emerge da lontano. Con "riduci movimento" nessuna transizione. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .3s cubic-bezier(.7, 0, .84, 0) both vt-zoom-out; }
  ::view-transition-new(root) { animation: .65s cubic-bezier(.16, 1, .3, 1) .3s both vt-zoom-in; }
}
@keyframes vt-zoom-out { to { opacity: 0; transform: scale(1.06); } }
@keyframes vt-zoom-in { from { opacity: 0; transform: scale(.97); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 "Switzer", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
em { font-style: italic; font-weight: inherit; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: .875rem; letter-spacing: .005em; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 30;
  background: var(--ink); color: var(--bg); padding: .6em 1em; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Header delle pagine interne */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.site-nav ul { display: flex; gap: clamp(18px, 2.6vw, 36px); list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; color: var(--muted); transition: color .25s var(--ease); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Pulsante e link testuale (un solo stile ciascuno su tutto il sito) */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1em 1.6em; background: var(--accent); color: var(--accent-ink);
  font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.btn:active { transform: scale(.98); }
.btn .arrow { transition: transform .4s var(--ease-mass); }
.btn:hover .arrow { transform: translateX(4px); }
.link { font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 32px 40px; color: var(--muted); }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* Reveal leggero: attivo solo con JS e movimento consentito */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .reveal.in { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .site-header .wrap { height: auto; padding-block: 16px; flex-wrap: wrap; row-gap: 10px; }
  .site-nav ul { gap: 18px; }
}