/* Ordine: base → utilità → motion → componenti → pagine. In build diventa un file solo. */
@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/inter-tight.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/inter-tight-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: "Doto";
  src: url("/fonts/doto.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-dot: "Doto", var(--font-mono);
  --font-cond: "Oswald", "Arial Narrow", sans-serif;

  /* il teal è fisso, cambia solo la tinta per il testo in base al tema */
  --teal: #3dcfb0;
  --teal-deep: #1f8f78;

  /* gutter e colonne seguono lo schermo: nessun max-width */
  --gutter: clamp(1rem, 2.4vw, 4rem);
  --cols: 4;
  --col: calc((100vw - var(--gutter) * 2) / var(--cols));

  --radius-sm: 0.5rem;
  --radius: 1.25rem;
  --radius-lg: 2.25rem;

  /* curve "liquide": partenza decisa, coda lunga e morbida */
  --ease-liquid: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --dur: 0.9s;
  --dur-fast: 0.45s;
  --dur-slow: 1.4s;
}

@media (min-width: 768px) { :root { --cols: 6; } }
@media (min-width: 1200px) { :root { --cols: 12; } }

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0b0b;
  --bg-2: #111313;
  --surface: #161818;
  --surface-2: #1f2222;
  --fg: #ecebe6;
  --fg-2: #b4b5b0;
  --muted: #7b7e7b;
  --line: rgb(236 235 230 / 0.08);
  --line-strong: rgb(236 235 230 / 0.2);
  --accent: var(--teal);
  --accent-ink: var(--teal);
  --on-accent: #001b17;
  --grain-opacity: 0.07;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #e7e7e3;
  --bg-2: #dededa;
  --surface: #f3f3f0;
  --surface-2: #fbfbf9;
  --fg: #0c0d0d;
  --fg-2: #3a3c3b;
  --muted: #6e706d;
  --line: rgb(12 13 13 / 0.09);
  --line-strong: rgb(12 13 13 / 0.22);
  --accent: var(--teal);
  --accent-ink: var(--teal-deep);
  --on-accent: #001b17;
  --grain-opacity: 0.09;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, canvas, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, p { overflow-wrap: break-word; }
[hidden] { display: none !important; }

/* La dimensione del testo cresce con lo schermo, anche oltre i 2560px */
html {
  font-size: clamp(13px, 0.42vw + 9.5px, 44px);
  background: var(--bg);
  scrollbar-gutter: stable;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

::selection { background: var(--accent); color: var(--on-accent); }

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

main { position: relative; z-index: 1; }

.skip-link {
  position: fixed; left: var(--gutter); top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; background: var(--accent); color: var(--on-accent); border-radius: 99px;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Grana da carta + linee di colonna fisse (stile poster svizzero / griglia tecnica) */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: var(--grain-opacity);
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

.columns {
  position: fixed; inset: 0 var(--gutter); z-index: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
}
.columns span {
  border-left: 1px solid var(--line);
  transform-origin: top; animation: draw-y 1.8s var(--ease-liquid) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.columns span:last-child { border-right: 1px solid var(--line); }
.columns span:nth-child(n + 5) { display: none; }
@media (min-width: 768px) { .columns span:nth-child(n + 5) { display: block; } .columns span:nth-child(n + 7) { display: none; } }
@media (min-width: 1200px) { .columns span:nth-child(n + 7) { display: block; } }

/* Navigazione tra pagine e cambio tema senza JS di routing: View Transitions native */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.55s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 0.9s var(--ease-liquid) both; }

/* il cambio tema usa invece un cerchio che si allarga dal bottone (vedi theme.ts) */
.theme-switching::view-transition-old(root) { animation: none; }
.theme-switching::view-transition-new(root) { animation: theme-reveal 0.9s var(--ease-liquid) both; }

@keyframes vt-out { to { opacity: 0; filter: blur(14px); transform: scale(0.97); } }
@keyframes vt-in { from { opacity: 0; filter: blur(18px); transform: translateY(4vh) scale(1.02); } }
@keyframes theme-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); } }


.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.contents { display: contents; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.self-end { align-self: flex-end; }
.place-center { place-items: center; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-px { gap: 1px; }

.overflow-hidden { overflow: hidden; }
.overflow-clip { overflow: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.content-start { align-content: start; }

/* Griglia a colonne allineata alle linee di sfondo (.columns) */
.grid-cols { grid-template-columns: repeat(var(--cols), 1fr); }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.col-full { grid-column: 1 / -1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-5 { grid-column-start: 5; }
.col-start-7 { grid-column-start: 7; }

.px-gutter { padding-inline: var(--gutter); }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-3 { padding-inline: 0.75rem; }
.px-4 { padding-inline: 1rem; }
.py-2 { padding-block: 0.5rem; }
.py-4 { padding-block: 1rem; }
.py-8 { padding-block: 2rem; }
.py-16 { padding-block: 4rem; }
.py-section { padding-block: clamp(5rem, 14vh, 14rem); }
.pt-nav { padding-top: 6rem; }
.pb-8 { padding-bottom: 2rem; }

.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.my-8 { margin-block: 2rem; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100svh; }
.h-screen { height: 100svh; }
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
/* misure di lettura espresse in colonne della griglia, non in pixel */
.measure { max-width: 34em; }
.measure-tight { max-width: 22em; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.pointer-none { pointer-events: none; }
.isolate { isolation: isolate; }

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); letter-spacing: 0; }
.font-dot { font-family: var(--font-dot); letter-spacing: 0.02em; }

/* scala fluida: rem già cresce con il viewport, i display usano vw puri */
.text-2xs { font-size: 0.68rem; }
.text-xs { font-size: 0.78rem; }
.text-sm { font-size: 0.9rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.2rem; }
.text-xl { font-size: 1.5rem; }
.text-2xl { font-size: clamp(1.6rem, 2.4vw, 6rem); }
.text-3xl { font-size: clamp(2rem, 3.6vw, 9rem); }
.text-4xl { font-size: clamp(2.6rem, 5.4vw, 14rem); }
.text-5xl { font-size: clamp(3.2rem, 8vw, 20rem); }
.text-display { font-size: 13.4vw; }

.font-thin { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 850; }
.italic { font-style: italic; }

.leading-none { line-height: 0.82; }
.leading-tight { line-height: 0.95; }
.leading-snug { line-height: 1.15; }
.leading-relaxed { line-height: 1.6; }

.tracking-tightest { letter-spacing: -0.065em; }
.tracking-tight { letter-spacing: -0.035em; }
.tracking-wide { letter-spacing: 0.06em; }
.tracking-widest { letter-spacing: 0.28em; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; text-align-last: left; hyphens: auto; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.balance { text-wrap: balance; }
.font-cond { font-family: var(--font-cond); letter-spacing: -0.01em; }

.text-fg { color: var(--fg); }
.text-fg-2 { color: var(--fg-2); }
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent-ink); }
.text-on-accent { color: var(--on-accent); }

.bg-bg { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.bg-fg { background: var(--fg); color: var(--bg); }
.bg-accent { background: var(--accent); color: var(--on-accent); }
.bg-line { background: var(--line); }

.border { border: 1px solid var(--line); }
.border-strong { border: 1px solid var(--line-strong); }
.border-t { border-top: 1px solid var(--line); }
.border-b { border-bottom: 1px solid var(--line); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 999px; }

.shadow-soft { box-shadow: 0 1px 0 var(--line), 0 2rem 4rem -2rem rgb(0 0 0 / 0.35); }
.glass { background: color-mix(in oklab, var(--surface) 70%, transparent); backdrop-filter: blur(18px) saturate(1.4); }
.blend-difference { mix-blend-mode: difference; }
.opacity-60 { opacity: 0.6; }
.select-none { user-select: none; -webkit-user-select: none; }
.touch-none { touch-action: none; }
.cursor-grab { cursor: grab; }
.cursor-grab:active { cursor: grabbing; }

/* Varianti responsive in stile tailwind (md: ≥768, lg: ≥1200) solo per le classi che servono davvero */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:block { display: block; }
  .md\:hidden { display: none; }
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-start-3 { grid-column-start: 3; }
  .md\:text-right { text-align: right; }
}
@media (min-width: 1200px) {
  .lg\:flex { display: flex; }
  .lg\:block { display: block; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:col-start-5 { grid-column-start: 5; }
  .lg\:col-start-7 { grid-column-start: 7; }
  .lg\:col-start-9 { grid-column-start: 9; }
}


@keyframes grain {
  0%, 100% { background-position: 0 0; } 20% { background-position: -37px 23px; } 40% { background-position: 41px -53px; }
  60% { background-position: -19px 61px; } 80% { background-position: 67px 11px; }
}
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes blink { 50% { opacity: 0.15; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* forma liquida: il raggio a 8 valori cambia di continuo */
@keyframes morph {
  0%, 100% { border-radius: 58% 42% 46% 54% / 52% 61% 39% 48%; }
  25% { border-radius: 41% 59% 63% 37% / 44% 38% 62% 56%; }
  50% { border-radius: 63% 37% 39% 61% / 60% 52% 48% 40%; }
  75% { border-radius: 46% 54% 52% 48% / 37% 58% 42% 63%; }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  33% { transform: translate(4%, -6%) rotate(40deg); }
  66% { transform: translate(-5%, 3%) rotate(-30deg); }
}
@keyframes drip {
  0%, 15% { transform: translateY(-120%) scale(0.6, 1.3); opacity: 0; }
  35% { opacity: 1; }
  60% { transform: translateY(0) scale(1); }
  70% { transform: translateY(0) scale(1.35, 0.6); }
  85%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* data-reveal: stato iniziale finché l'observer non aggiunge .is-in. Senza JS resta tutto visibile. */
.js [data-reveal] {
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur-slow) var(--ease-liquid),
    filter var(--dur) var(--ease-out),
    clip-path var(--dur-slow) var(--ease-liquid);
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
}
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(2.5rem) scale(0.985); filter: blur(10px); }
.js [data-reveal="fade"]:not(.is-in) { transform: none; }
.js [data-reveal="scale"]:not(.is-in) { transform: scale(0.88); filter: blur(16px); }
.js [data-reveal="left"]:not(.is-in) { transform: translateX(-3rem); }
.js [data-reveal="mask"]:not(.is-in) { opacity: 1; filter: none; transform: none; clip-path: inset(0 0 calc(100% - 2px) 0 round var(--radius)); } /* 2px visibili: IntersectionObserver ignora gli elementi ritagliati a zero */
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js [data-reveal="line"] { transform-origin: left; }
.js [data-reveal="line"]:not(.is-in) { opacity: 1; filter: none; transform: scaleX(0); }

/* testo spezzato in parole/caratteri da split.ts; ogni pezzo sale fuori da una maschera */
.split-word { display: inline-block; white-space: nowrap; }
.split-mask { display: inline-block; overflow: clip; overflow-clip-margin: 0.25em; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-char, .split-inner { display: inline-block; will-change: transform; }

.js [data-split] .split-inner {
  transition: transform var(--dur-slow) var(--ease-liquid), opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger, 28ms) + var(--d, 0ms));
}
.js [data-split]:not(.is-in) .split-inner { transform: translateY(105%) rotate(6deg) skewX(-8deg); opacity: 0; filter: blur(6px); }

/* scrub: le parole si accendono man mano che si scorre (scrub.ts imposta --p 0..1) */
[data-scrub] .split-word { opacity: calc(0.14 + var(--p, 0) * 0.86); transition: opacity 0.4s linear; }

/* sottolineatura che "cola" da sinistra e scappa a destra */
.link-liquid {
  background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px;
  transition: background-size var(--dur) var(--ease-liquid), color var(--dur-fast) var(--ease-out);
  padding-bottom: 0.1em;
}
.link-liquid:hover, .link-liquid:focus-visible { background-size: 100% 1px; background-position-x: left; }

.hover-accent { transition: color var(--dur-fast) var(--ease-out); }
.hover-accent:hover { color: var(--accent-ink); }

.hover-lift { transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out); }
.hover-lift:hover { transform: translateY(-0.35rem); }

.dot-live { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.8em var(--accent); animation: blink 1.6s var(--ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .grain { animation: none; }
  @view-transition { navigation: none; }
}


/* logo: matrice 5x5 di quadrati. I 5 accesi entrano a onda, l'occhio sbatte, il sorriso respira. */
.matrix {
  --size: 1.3rem;
  display: inline-grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--size) * 0.07);
  width: var(--size); aspect-ratio: 1; flex-shrink: 0;
}
.matrix span {
  background: color-mix(in oklab, var(--fg) 7%, transparent);
  animation: cell-in 0.9s var(--ease-spring) both;
  animation-delay: calc((var(--x) + var(--y)) * 45ms);
  transition: background var(--dur-fast) var(--ease-out);
}
.matrix .on { background: var(--accent); }
.matrix .eye { animation: cell-in 0.9s var(--ease-spring) both, eye-blink 5s 2.5s var(--ease-in-out) infinite; animation-delay: 0.3s, 2.5s; }
.matrix .smile { animation: cell-in 0.9s var(--ease-spring) both, smile 5s 3s var(--ease-in-out) infinite; animation-delay: calc((var(--x) + var(--y)) * 45ms), calc(3s + var(--x) * 70ms); }

/* hover: un'onda parte dal centro e attraversa tutte le celle */
a:hover > .matrix span, .matrix:hover span, .matrix.is-wave span {
  animation: cell-wave 0.7s var(--ease-out) both;
  animation-delay: calc((max(var(--x) - 2, 2 - var(--x)) + max(var(--y) - 2, 2 - var(--y))) * 55ms);
}

.matrix-md { --size: clamp(3rem, 5vw, 7rem); }
.matrix-lg { --size: clamp(4rem, 9vw, 14rem); }
.matrix-xl { --size: clamp(8rem, 22vw, 34rem); }

@keyframes cell-in { from { transform: scale(0) rotate(45deg); opacity: 0; } }
@keyframes eye-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
@keyframes smile { 0%, 80%, 100% { transform: translateY(0); } 86% { transform: translateY(-35%); } 92% { transform: translateY(8%); } }
@keyframes cell-wave { 40% { transform: scale(0.55); background: var(--accent); } }

.konami { position: fixed; inset: 0; z-index: 99; pointer-events: none; overflow: hidden; }
.konami-face { position: absolute; top: -10vh; --size: var(--s); animation: konami-fall 3.6s var(--ease-in-out) var(--d) both; }
.konami-face span { animation: none; }
@keyframes konami-fall { to { transform: translateY(125vh) rotate(var(--r)); } }
.konami-toast { position: fixed; left: 50%; bottom: 2rem; z-index: 100; translate: -50% 0; padding: 0.8rem 1.4rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-weight: 600; animation: push-in 0.8s var(--ease-spring) both; }

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 1rem var(--gutter);
  transition: transform var(--dur) var(--ease-liquid), padding var(--dur) var(--ease-liquid);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.nav.is-scrolled { padding-block: 0.6rem; }
.nav.is-scrolled::before { opacity: 1; }
.nav.is-hidden { transform: translateY(-110%); }

.nav-links { display: flex; gap: clamp(0.75rem, 2vw, 3rem); }
.nav-link { position: relative; display: inline-flex; gap: 0.35em; align-items: baseline; }
.nav-link sup { font-size: 0.62em; color: var(--muted); transition: color var(--dur-fast); }
.nav-link[aria-current="page"] sup, .nav-link:hover sup { color: var(--accent-ink); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -0.55rem; width: 0.3rem; height: 0.3rem;
  border-radius: 50%; background: var(--accent); translate: -50% 0; animation: drip 1s var(--ease-liquid) both;
}

.logo { display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 700; letter-spacing: -0.04em; }

@media (max-width: 767px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-links { justify-content: center; font-size: 0.8rem; }
  .nav-links sup, .nav .clock { display: none; }
  .logo-text { display: none; }
}

.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; padding: 0.3rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 99px; }
.lang summary::-webkit-details-marker { display: none; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem); display: grid; min-width: 10rem; padding: 0.35rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.4);
  transform-origin: top right; animation: lang-in 0.45s var(--ease-spring);
}
.lang-menu a { display: flex; gap: 0.75rem; padding: 0.45rem 0.6rem; border-radius: 0.35rem; font-size: 0.85rem; transition: background var(--dur-fast); }
.lang-menu a:hover, .lang-menu a[aria-current] { background: var(--bg-2); }
.lang-menu b { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; color: var(--accent-ink); width: 1.5rem; }
@keyframes lang-in { from { opacity: 0; transform: scale(0.9) translateY(-0.4rem); } }

.say-hi { padding: 0.35rem 0.8rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); transition: transform var(--dur) var(--ease-spring); }
.say-hi:hover { transform: scale(1.06); }
@media (max-width: 1199px) { .nav-links sup { display: none; } }
@media (max-width: 767px) { .say-hi { display: none; } .nav-links { gap: 0.6rem; font-size: 0.68rem; } }

/* bottone pill: il riempimento parte dal punto del mouse (--mx/--my da magnetic.ts) */
.btn {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.75rem; white-space: nowrap;
  padding: 0.5rem 0.55rem 0.5rem 1.25rem; border-radius: 999px;
  background: var(--fg); color: var(--bg); font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.btn::before {
  content: ""; position: absolute; z-index: -1; left: var(--mx); top: var(--my);
  width: 250%; aspect-ratio: 1; border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%) scale(0); transition: transform var(--dur) var(--ease-liquid);
}
.btn:hover { color: var(--on-accent); }
.btn:hover::before { transform: translate(-50%, -50%) scale(1); }
.btn:active { transform: scale(0.96); }

.btn-icon {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--bg); color: var(--fg); overflow: hidden;
}
.btn-icon svg { width: 0.9rem; transition: transform var(--dur) var(--ease-liquid); }
.btn:hover .btn-icon svg { animation: arrow-loop var(--dur) var(--ease-liquid); }
@keyframes arrow-loop { 49% { transform: translateX(160%); } 50% { transform: translateX(-160%); opacity: 0; } 51% { opacity: 1; } }

.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); padding: 0.55rem 1.1rem; }

.icon-btn {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--fg); color: var(--bg);
  transition: transform var(--dur) var(--ease-spring), background var(--dur-fast);
}
.icon-btn:hover { background: var(--accent); color: var(--on-accent); transform: scale(1.1); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn svg { width: 1rem; }
.icon-btn:disabled { opacity: 0.25; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.3em 0.75em; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
}
.chip-num { color: var(--muted); }
.chip-dot { width: 0.4em; height: 0.4em; border-radius: 50%; background: currentColor; }
.chip-accent .chip-dot { background: var(--accent); box-shadow: 0 0 0.6em var(--accent); }

/* etichetta tecnica con quadratino, stile scheda tecnica */
.label { align-self: start; display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.label::before { content: ""; width: 0.38em; height: 0.38em; background: var(--accent); }

.kbd { font-family: var(--font-mono); font-size: 0.7em; padding: 0.1em 0.45em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 0.35em; }

/* cursore liquido: due cerchi con filtro goo che si fondono quando il mouse rallenta */
.cursor { position: fixed; inset: 0; z-index: 95; pointer-events: none; filter: url(#goo); mix-blend-mode: difference; }
.cursor-dot, .cursor-trail {
  position: absolute; left: 0; top: 0; border-radius: 50%; background: #fff;
  will-change: transform; translate: -50% -50%;
}
.cursor-dot { width: 0.9rem; height: 0.9rem; transition: width var(--dur) var(--ease-spring), height var(--dur) var(--ease-spring); }
.cursor-trail { width: 0.55rem; height: 0.55rem; }
.cursor.is-hover .cursor-dot { width: 3.6rem; height: 3.6rem; }
.cursor.is-down .cursor-dot { width: 0.6rem; height: 0.6rem; }
.cursor-label {
  position: fixed; left: 0; top: 0; z-index: 96; pointer-events: none; translate: -50% -50%;
  font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; color: #000;
  opacity: 0; transition: opacity var(--dur-fast);
}
.cursor-label.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-label { display: none; } }

.theme-toggle {
  position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--line-strong); overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.theme-toggle::before {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: linear-gradient(90deg, var(--fg) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--fg);
}
.theme-toggle:hover { transform: rotate(180deg) scale(1.08); }
[data-theme="light"] .theme-toggle { transform: rotate(180deg); }
[data-theme="light"] .theme-toggle:hover { transform: rotate(360deg) scale(1.08); }

/* anteprime "schermo": sempre scure, come un monitor acceso, in entrambi i temi */
.mock {
  --m-bg: #0b0d0d; --m-fg: #e6e6e1; --m-muted: #6f7472; --m-line: rgb(230 230 225 / 0.09); --m-accent: var(--teal);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  width: 100%; height: 100%; min-height: 16rem; border-radius: var(--radius-lg);
  background: radial-gradient(120% 80% at 20% 0%, #171a1a, var(--m-bg) 60%); color: var(--m-fg);
  font-family: var(--font-mono); font-size: clamp(0.55rem, 0.7vw, 1.1rem);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 0 1px var(--m-line);
}
.mock-bar { display: flex; justify-content: space-between; gap: 1em; padding: 1em 1.4em; border-bottom: 1px solid var(--m-line); color: var(--m-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mock-live { color: var(--m-accent); animation: blink 1.4s steps(2) infinite; }
.mock-label { color: var(--m-muted); text-transform: uppercase; font-size: 0.85em; }
.mock-big { font-family: var(--font-sans); font-size: 3.2em; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.mock-mid { font-family: var(--font-sans); font-size: 1.7em; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.mock svg { overflow: visible; }
.mock-draw { fill: none; stroke: var(--m-accent); stroke-width: 1.5; stroke-dasharray: 600; animation: mock-draw 4s var(--ease-in-out) infinite; }
@keyframes mock-draw { 0% { stroke-dashoffset: 600; } 60%, 100% { stroke-dashoffset: 0; } }
/* i corpi delle anteprime non devono mai allargare il contenitore: gli svg si adattano all'altezza */
.mf-body, .mr-body, .mm-body, .md-body { min-height: 0; overflow: hidden; }
.mr-body svg, .mm-gauge svg { width: 100%; height: 100%; max-height: 100%; }

.mf-body { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5em; padding: 1.5em; align-items: center; }
.mf-targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; width: min(100%, 24em); justify-self: center; }
.mf-targets i {
  aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--m-line); background: radial-gradient(circle, #1d2121 30%, #111 70%);
  animation: mf-hit 5.4s var(--ease-out) infinite; animation-delay: var(--d);
}
@keyframes mf-hit {
  0%, 8%, 100% { background: radial-gradient(circle, #1d2121 30%, #111 70%); box-shadow: none; transform: scale(1); }
  2% { background: radial-gradient(circle, #fff 5%, var(--m-accent) 40%, #034 75%); box-shadow: 0 0 2em var(--m-accent); transform: scale(0.94); }
}
.mf-side { display: grid; gap: 0.4em; }
.mf-side .mock-label:not(:first-child) { margin-top: 0.8em; }
.mf-scope { width: calc(100% - 3em); height: 3.5em; margin: 0 1.5em 1.2em; }

.mr-body { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 1em; padding: 1em 1.4em; align-items: center; }
.mr-zone { fill: color-mix(in oklab, var(--teal) 6%, transparent); stroke: var(--m-accent); stroke-dasharray: 3 4; stroke-width: 0.8; animation: spin 40s linear infinite; transform-origin: 80px 120px; }
.mr-link { fill: #2a2f2f; stroke: #4b5251; stroke-width: 0.6; }
.mr-joint { fill: var(--m-accent); }
.mr-grip { fill: none; stroke: var(--m-fg); stroke-width: 2.4; stroke-linecap: round; }
.mr-j1 { animation: mr-j1 6s var(--ease-in-out) infinite; }
.mr-j2 { animation: mr-j2 6s var(--ease-in-out) infinite; }
.mr-j3 { animation: mr-j3 6s var(--ease-in-out) infinite; }
@keyframes mr-j1 { 0%, 100% { rotate: -35deg; } 50% { rotate: 30deg; } }
@keyframes mr-j2 { 0%, 100% { rotate: 70deg; } 50% { rotate: 25deg; } }
@keyframes mr-j3 { 0%, 100% { rotate: -20deg; } 50% { rotate: 40deg; } }
.mr-readout { display: grid; grid-template-columns: auto 1fr; gap: 0.35em 1em; }
.mr-readout b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.mr-bar { grid-column: 1 / -1; height: 3px; background: var(--m-line); overflow: hidden; border-radius: 9px; }
.mr-bar::after { content: ""; display: block; height: 100%; width: 40%; background: var(--m-accent); animation: mr-bar 3s var(--ease-in-out) infinite alternate; }
@keyframes mr-bar { to { translate: 150% 0; } }

.mm-body { flex: 1; display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.2em; padding: 1.4em; align-items: center; }
.mm-gauge { position: relative; display: grid; place-items: center; }
.mm-gauge svg { width: 100%; }
.mm-track { fill: none; stroke: var(--m-line); stroke-width: 8; stroke-linecap: round; }
.mm-arc { fill: none; stroke: var(--m-accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 220; animation: mm-flex 3.2s var(--ease-in-out) infinite alternate; }
@keyframes mm-flex { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 30; } }
.mm-gauge .mock-big { position: absolute; bottom: 8%; }
.mm-chart { width: 100%; height: 7em; }
.mm-grid { stroke: var(--m-line); stroke-width: 0.5; }
.mm-dots circle { fill: var(--m-accent); animation: blink 2s infinite; }

.mp-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 1.4em; background: radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--teal) 14%, transparent), transparent); }
.mp-phone {
  height: 100%; max-height: 34em; aspect-ratio: 9 / 18.5; border-radius: 2.4em; padding: 0.7em; background: #050606;
  box-shadow: 0 0 0 2px #2b2f2f, 0 2em 4em -1em rgb(0 0 0 / 0.8); display: flex; flex-direction: column; gap: 0.6em; overflow: hidden;
}
.mp-head { display: flex; align-items: center; gap: 0.6em; padding: 1.6em 0.6em 0.6em; border-bottom: 1px solid var(--m-line); font-family: var(--font-sans); font-weight: 600; }
.mp-head i { width: 1.8em; height: 1.8em; border-radius: 50%; background: linear-gradient(135deg, var(--m-accent), #1d7a66); }
.mp-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.45em; padding: 0 0.3em; font-family: var(--font-sans); }
.mp-msgs p { max-width: 80%; padding: 0.5em 0.8em; border-radius: 1.1em; background: #1c2020; animation: mp-msg 9s var(--ease-liquid) infinite; animation-delay: var(--d); opacity: 0; }
.mp-msgs p.me { align-self: flex-end; background: var(--m-accent); color: #00201b; }
@keyframes mp-msg { 0% { opacity: 0; transform: translateY(1em) scale(0.9); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mp-tabs { display: flex; justify-content: space-around; padding: 0.6em 0 0.4em; border-top: 1px solid var(--m-line); }
.mp-tabs i { width: 1.1em; height: 1.1em; border-radius: 0.35em; background: #343a39; }
.mp-tabs i:nth-child(3) { background: var(--m-accent); border-radius: 50%; }

.ma-body { flex: 1; display: grid; align-content: center; gap: 1.1em; padding: 1.6em; }
.ma-line { opacity: 0; animation: ma-in 8s steps(1) infinite; animation-delay: var(--d); }
@keyframes ma-in { 0% { opacity: 0; } 2%, 92% { opacity: 1; } }
.ma-req b { color: var(--m-accent); font-weight: 500; }
.ma-otp { display: flex; gap: 0.5em; }
.ma-otp span {
  width: 2.4em; height: 3em; display: grid; place-items: center; border: 1px solid var(--m-line); border-radius: 0.5em;
  font-family: var(--font-sans); font-size: 1.3em; color: transparent; animation: ma-digit 8s steps(1) infinite; animation-delay: var(--d);
}
@keyframes ma-digit { 0% { color: transparent; border-color: var(--m-line); } 2%, 92% { color: var(--m-fg); border-color: var(--m-accent); } }
.ma-jwt { word-break: break-all; line-height: 1.6; }
.ma-jwt i { font-style: normal; color: #ff8a7a; } .ma-jwt u { text-decoration: none; color: #c39bff; } .ma-jwt s { text-decoration: none; color: var(--m-accent); }
.ma-ok { color: var(--m-accent); }

.md-body { flex: 1; display: grid; grid-template-columns: 2.4em 1fr; }
.md-side { display: flex; flex-direction: column; gap: 0.9em; padding: 1em 0.7em; border-right: 1px solid var(--m-line); }
.md-side i { width: 1em; height: 1em; border-radius: 0.3em; background: #2c3131; }
.md-side i:first-child { background: var(--m-accent); }
.md-main { display: grid; grid-template-rows: auto 1fr auto; gap: 1em; padding: 1.2em; }
.md-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.md-kpis div { padding: 0.8em; border: 1px solid var(--m-line); border-radius: 0.8em; display: grid; gap: 0.3em; }
.md-bars { display: flex; align-items: flex-end; gap: 0.5em; min-height: 6em; border-bottom: 1px solid var(--m-line); }
.md-bars i { flex: 1; height: var(--h); background: linear-gradient(var(--m-accent), #1d7a66); border-radius: 0.3em 0.3em 0 0; transform-origin: bottom; animation: md-bar 5s var(--ease-spring) infinite; animation-delay: var(--d); }
@keyframes md-bar { 0% { transform: scaleY(0); } 20%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.md-rows { display: grid; gap: 0.35em; }
.md-rows p { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1em; padding-bottom: 0.35em; border-bottom: 1px solid var(--m-line); color: var(--m-muted); }
.md-rows b { font-weight: 400; color: var(--m-accent); }

.ms-chrome { display: flex; align-items: center; gap: 0.45em; padding: 0.8em 1em; border-bottom: 1px solid var(--m-line); }
.ms-chrome i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #3a3f3e; }
.ms-chrome span { margin-left: 1em; padding: 0.25em 1em; border-radius: 99px; background: #171b1b; color: var(--m-muted); }
.ms-view { flex: 1; overflow: hidden; background: #f1f1ee; color: #0b0b0b; }
.ms-page { animation: ms-scroll 12s var(--ease-in-out) infinite; }
@keyframes ms-scroll { 0%, 15% { transform: none; } 45%, 60% { transform: translateY(-45%); } 90%, 100% { transform: none; } }
.ms-hero { position: relative; height: 15em; background: linear-gradient(180deg, #d9d9d6, #8e8f8c); overflow: hidden; }
.ms-hero::before { content: ""; position: absolute; left: 58%; bottom: 0; width: 18%; height: 85%; background: #151515; clip-path: polygon(40% 0, 62% 0, 66% 30%, 100% 34%, 70% 44%, 72% 100%, 52% 100%, 46% 60%, 30% 100%, 10% 100%, 30% 48%, 0 40%, 35% 28%); }
.ms-hero::after { content: ""; position: absolute; left: 20%; top: 38%; width: 45%; height: 2px; background: #151515; rotate: -14deg; }
.ms-title { position: absolute; left: 1em; bottom: 0.6em; font-family: var(--font-sans); font-weight: 850; font-size: 2.6em; letter-spacing: -0.06em; line-height: 0.85; color: #fff; mix-blend-mode: difference; }
.ms-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; padding: 1em; }
.ms-blocks i { aspect-ratio: 3 / 4; background: linear-gradient(160deg, #cfcfcb, #777); filter: grayscale(1); }
.ms-blocks i:nth-child(2) { background: #2b549a; }
.ms-text { padding: 0 1em 1em; display: grid; gap: 0.4em; }
.ms-text i { height: 0.5em; background: #d4d4d0; border-radius: 9px; }


.case {
  display: grid; gap: clamp(1rem, 2vw, 3rem); align-items: stretch;
  padding: clamp(0.75rem, 1.2vw, 1.5rem); border-radius: calc(var(--radius-lg) + 0.75rem);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 2.5rem 5rem -3rem rgb(0 0 0 / 0.45);
}
@media (min-width: 768px) { .case { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

.case-body { display: flex; flex-direction: column; gap: 1rem; padding: clamp(0.25rem, 1.5vw, 2rem); }
.case-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; letter-spacing: -0.05em; font-size: 1.3rem; }
.case-brand i { width: 1.2em; height: 1.2em; background: var(--fg); clip-path: polygon(0 0, 100% 0, 100% 35%, 35% 35%, 35% 100%, 0 100%); }
.case-title { font-size: clamp(1.6rem, 2.5vw, 6rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 500; text-wrap: balance; }
.case-text { color: var(--fg-2); max-width: 36em; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.case-stat b { display: block; font-size: clamp(1.4rem, 2vw, 4.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.case-stat span { font-size: 0.75rem; color: var(--muted); }
.case-visual { min-height: 18rem; aspect-ratio: 4 / 3; }
/* altezza fissa: è il contenuto del mock ad adattarsi, non la card ad allungarsi */
@media (min-width: 768px) { .case-visual { aspect-ratio: auto; height: clamp(20rem, 30vw, 36rem); } }

/* carosello: la card attiva al centro, le vicine si vedono di lato rimpicciolite e sfocate */
.carousel { position: relative; touch-action: pan-y; }
.carousel-track {
  display: flex; gap: clamp(1rem, 2vw, 3rem);
  padding-inline: calc(var(--gutter) + 6vw);
  will-change: transform; user-select: none; -webkit-user-select: none;
}
.carousel-slide {
  flex: 0 0 calc(100vw - var(--gutter) * 2 - 12vw);
  transition: scale var(--dur-slow) var(--ease-liquid), filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.carousel-slide:not(.is-active) { scale: 0.9; filter: blur(3px) saturate(0.4); opacity: 0.55; }
.carousel-slide:not(.is-active) * { pointer-events: none; }

/* tutte le card alte uguale: le frecce stanno subito sotto, non sotto la card più alta */
.carousel-slide > .case { height: 100%; }
.carousel-ui { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--gutter) 0; }
.carousel-dots { display: flex; gap: 0.4rem; }
.carousel-dot {
  width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--line-strong);
  transition: width var(--dur) var(--ease-spring), background var(--dur-fast);
}
.carousel-dot.is-active { width: 2.2rem; background: linear-gradient(90deg, var(--teal), #a8ecdb, var(--teal)); background-size: 200% 100%; animation: shimmer 2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* cella tecnica con angoli a mirino (stile griglia di laboratorio) */
.tile {
  position: relative; display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.1rem; min-height: 20rem;
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  transition: background var(--dur) var(--ease-out);
}
.tile::before, .tile::after {
  content: ""; position: absolute; width: 0.8rem; height: 0.8rem; border: 1px solid var(--fg); pointer-events: none;
  transition: inset var(--dur) var(--ease-spring), border-color var(--dur-fast);
}
.tile::before { inset: 0.5rem auto auto 0.5rem; border-width: 1px 0 0 1px; }
.tile::after { inset: auto 0.5rem 0.5rem auto; border-width: 0 1px 1px 0; }
.tile:hover { background: var(--surface); }
.tile:hover::before { inset: 1rem auto auto 1rem; border-color: var(--accent); }
.tile:hover::after { inset: auto 1rem 1rem auto; border-color: var(--accent); }

.tile-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); padding-inline: 0.6rem; }
.tile-stage { position: relative; flex: 1; min-height: 12rem; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.tile-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-title { font-size: clamp(1.4rem, 1.8vw, 4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.tile-arrow { transition: transform var(--dur) var(--ease-spring); }
.tile:hover .tile-arrow { transform: translate(0.3rem, -0.3rem) rotate(-45deg); color: var(--accent-ink); }

.tiles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .tile[data-preview="terminal"], .tile[data-preview="typing"] { grid-column: span 2 / span 2; } }

.marquee {
  display: flex; overflow: hidden; user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; flex-shrink: 0; gap: 3rem; padding-right: 3rem; min-width: 100%; animation: marquee var(--speed, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 0.8rem; white-space: nowrap; transition: color var(--dur-fast); }
.marquee-item:hover { color: var(--accent-ink); }
.marquee-item::before { content: "✦"; font-size: 0.5em; color: var(--accent-ink); }

/* finestra di prova (lab / integrazioni): barra in alto stile strumento */
.panel {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 1rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; color: var(--muted);
}
.panel-body { position: relative; flex: 1; padding: 1rem; }
.panel-body.flush { padding: 0; }
.panel-foot { padding: 0.75rem 1rem; border-top: 1px solid var(--line); }

.log { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.7; overflow: auto; }
.log-line { display: flex; gap: 0.75rem; animation: log-in 0.6s var(--ease-liquid) both; }
.log-line time { color: var(--muted); }
.log-ok { color: var(--accent-ink); }
.log-warn { color: #ffb347; }
@keyframes log-in { from { opacity: 0; transform: translateX(-0.6rem); filter: blur(4px); } }

.stage { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-2); min-height: 60svh; touch-action: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-hint { position: absolute; left: 1rem; bottom: 1rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); pointer-events: none; }

.field { display: grid; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; color: var(--muted); }
.field-row { display: flex; justify-content: space-between; }
.field output { color: var(--fg); }

.range { appearance: none; width: 100%; height: 1.4rem; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--line-strong) var(--fill, 50%)); }
.range::-moz-range-track { height: 2px; background: var(--line-strong); }
.range::-moz-range-progress { height: 2px; background: var(--accent); }
.range::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; margin-top: -0.45rem; border-radius: 50%; background: var(--fg); transition: transform var(--dur-fast) var(--ease-spring); }
.range::-moz-range-thumb { width: 1rem; height: 1rem; border: 0; border-radius: 50%; background: var(--fg); }
.range:active::-webkit-slider-thumb { transform: scale(1.5); background: var(--accent); }

.input {
  width: 100%; padding: 0.7rem 1rem; border-radius: 999px; background: var(--bg-2);
  border: 1px solid var(--line); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur) var(--ease-out);
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent); }

.switch { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--line-strong); transition: background var(--dur-fast); }
.switch::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--fg); transition: translate var(--dur) var(--ease-spring), width var(--dur-fast) var(--ease-out); }
.switch:active::after { width: 1.5rem; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { translate: 1.1rem 0; background: var(--on-accent); }

.footer { position: relative; z-index: 1; padding: clamp(2.5rem, 6vh, 6rem) var(--gutter) 1.25rem; overflow: clip; }
.footer-word {
  font-size: 18.4vw; font-weight: 850; letter-spacing: -0.075em; line-height: 0.78; padding-bottom: 0.14em;
  margin-inline: -0.04em; white-space: nowrap;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); padding-bottom: 1.5rem; }
.footer-logo { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: auto repeat(4, 1fr); gap: 2rem 3rem; }
  .footer-logo { grid-column: auto; }
}
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }


/* hero: wordmark su due righe, la seconda allineata a destra come un poster */
.hero-canvas { opacity: 0.95; }
.hero-word { font-size: min(25vw, 33svh); margin-inline: -0.03em; }
.hero-line { display: block; }
.hero-line-2 { text-align: right; margin-top: -0.06em; }
.hero-reg { font-size: 0.14em; font-weight: 500; vertical-align: top; position: relative; top: 0.35em; margin-left: 0.04em; }

/* teaser del manifesto: i titoli scorrono in verticale uno dopo l'altro */
.manifesto-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.teaser-ticker { position: relative; height: 1.1em; overflow: hidden; font-size: clamp(2rem, 4vw, 8rem); line-height: 1.1; flex: 1; min-width: 12ch; }
.teaser-ticker span { position: absolute; inset: 0; white-space: nowrap; animation: ticker 18s var(--ease-liquid) infinite; animation-delay: calc(var(--n) * 3s); opacity: 0; }
.teaser-ticker span:nth-child(1) { --n: 0; } .teaser-ticker span:nth-child(2) { --n: 1; } .teaser-ticker span:nth-child(3) { --n: 2; }
.teaser-ticker span:nth-child(4) { --n: 3; } .teaser-ticker span:nth-child(5) { --n: 4; } .teaser-ticker span:nth-child(6) { --n: 5; }
@keyframes ticker { 0% { transform: translateY(100%); opacity: 0; } 3%, 14% { transform: none; opacity: 1; } 17%, 100% { transform: translateY(-100%); opacity: 0; } }

.counter {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.25rem 1rem;
  padding: 1rem; border: 1px solid var(--line-strong); background: var(--surface);
}
.counter > :first-child { grid-column: 1 / -1; }

/* motto: la metà umana è in grottesco, quella macchina in dot-matrix con cursore a blocco */
.motto { display: grid; gap: 0.15em; justify-items: center; font-size: clamp(1.1rem, 1.5vw, 3rem); line-height: 1.1; }
.motto-human { font-weight: 500; letter-spacing: -0.03em; }
.motto-machine { color: var(--accent-ink); font-weight: 900; letter-spacing: 0.02em; }
.motto-machine::after { content: ""; display: inline-block; width: 0.55em; height: 0.9em; margin-left: 0.15em; vertical-align: -0.1em; background: var(--accent); animation: blink 1s steps(2) infinite; }
.js .motto-machine .split-inner { transition-timing-function: steps(1); }
.js .motto-machine:not(.is-in) .split-inner { transform: none; filter: none; }

/* indice dei lavori: righe tipografiche, il fondo si riempie da sinistra al passaggio */
.work-list { border-top: 1px solid var(--line-strong); }
.work-item { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur) var(--ease-liquid), opacity var(--dur); }
.work-item.is-filtered { grid-template-rows: 0fr; opacity: 0; }
.work-row {
  position: relative; isolation: isolate; overflow: hidden; min-height: 0;
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 0.5rem 1.5rem;
  padding: 1.4rem 0.5rem; border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 1200px) { .work-row { grid-template-columns: 3rem 1.3fr 1.6fr 0.8fr 5rem 2rem; } }
.work-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-liquid); }
.work-row:hover::before { transform: scaleX(1); transform-origin: left; }
.work-row > * { transition: color var(--dur-fast), transform var(--dur) var(--ease-spring); }
.work-row:hover > * { color: var(--bg); }
.work-row:hover .work-name { transform: translateX(0.6rem); }
.work-name { font-size: clamp(2rem, 5vw, 10rem); }
.work-arrow { transition: transform var(--dur) var(--ease-spring); }
.work-row:hover .work-arrow { transform: rotate(-45deg); }
@media (max-width: 1199px) { .work-title, .work-row > :nth-child(4), .work-row > :nth-child(5) { display: none; } }
.filter[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.filter { cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }

.work-float { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(18rem, 26vw, 40rem); aspect-ratio: 4 / 3; pointer-events: none; margin: 1.5rem 0 0 1.5rem; opacity: 0; scale: 0.6; transition: opacity var(--dur-fast), scale var(--dur) var(--ease-spring); }
.work-float.is-on { opacity: 1; scale: 1; }
.work-float .mock { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-fast); box-shadow: 0 2rem 4rem -1rem rgb(0 0 0 / 0.6); }
.work-float .mock.is-current { opacity: 1; }

.project-name { font-size: min(19vw, 40svh); margin-inline: -0.04em; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; }
.facts > div { padding-top: 0.75rem; border-top: 1px solid var(--line); }
.project-hero { height: min(78svh, 62vw); min-height: 22rem; }
.project-hero .mock { font-size: clamp(0.7rem, 1.1vw, 1.6rem); }

.project-stats { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); padding-block: 3rem; border-block: 1px solid var(--line); }
.project-stat { font-size: clamp(3rem, 8vw, 16rem); }

.approach { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 768px) { .approach { grid-template-columns: repeat(3, 1fr); } }
.approach-item { display: grid; align-content: start; gap: 1rem; padding: 1.5rem; background: var(--bg); min-height: 18rem; transition: background var(--dur); }
.approach-item:hover { background: var(--surface); }

/* architettura: nodi + collegamenti con un punto che li percorre */
.arch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.arch-node { display: grid; gap: 0.3rem; padding: 1rem 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); min-width: 9rem; transition: border-color var(--dur-fast), transform var(--dur) var(--ease-spring); }
.arch-node:hover { border-color: var(--accent); transform: translateY(-0.25rem); }
.arch-link { position: relative; flex: 1 1 2rem; min-width: 2rem; height: 1px; background: var(--line-strong); overflow: visible; }
.arch-link::after {
  content: ""; position: absolute; top: -0.2rem; left: 0; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.8rem var(--accent);
  animation: packet 2.4s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * 0.4s);
}
@keyframes packet { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: 100%; opacity: 0; } }

.timeline { display: grid; gap: 2rem; position: relative; }
@media (min-width: 768px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline-step { position: relative; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.timeline-dot { position: absolute; top: -0.35rem; left: 0; width: 0.7rem; height: 0.7rem; background: var(--accent); }

.next-project { display: grid; gap: 2rem; align-items: end; padding-block: clamp(4rem, 12vh, 10rem); border-top: 1px solid var(--line); transition: background var(--dur) var(--ease-out); }
@media (min-width: 1200px) { .next-project { grid-template-columns: 1.4fr 1fr; } }
.next-project:hover { background: var(--surface); }
.next-name { font-size: clamp(4rem, 14vw, 28rem); transition: color var(--dur-fast); }
.next-project:hover .next-name { color: var(--accent-ink); }
.next-mock { height: clamp(14rem, 30vw, 36rem); transition: transform var(--dur-slow) var(--ease-spring); }
.next-project:hover .next-mock { transform: rotate(-2deg) scale(1.03); }

/* poster appeso: carta a retino, pieghe, due mollette, oscilla piano */
.halftone {
  background-color: var(--surface);
  background-image: radial-gradient(color-mix(in oklab, var(--fg) 16%, transparent) 0.6px, transparent 0.9px);
  background-size: 5px 5px;
}
.poster {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto; gap: 2rem;
  min-height: calc(100svh - 7rem); padding: clamp(1rem, 2.5vw, 3rem);
  box-shadow: 0 3rem 6rem -3rem rgb(0 0 0 / 0.5);
  transform-origin: 50% 0; animation: sway 9s var(--ease-in-out) infinite;
}
.poster::before, .poster::after { content: ""; position: absolute; pointer-events: none; }
.poster::before { inset: 0 50% 0 auto; width: 1px; background: linear-gradient(transparent, var(--line-strong), transparent); }
.poster::after { inset: 50% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.poster-corners { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.poster-title { align-self: center; justify-self: center; width: min(100%, 92vw); }
.poster-word { font-size: 17vw; letter-spacing: 0.01em; text-align: center; }
.poster-word .split-char { transition: transform var(--dur) var(--ease-spring), color var(--dur-fast); }
.poster-word .split-char:hover { transform: translateY(-0.12em) rotate(-4deg); color: var(--accent-ink); }
.poster-mid { justify-self: center; display: grid; gap: 0.5rem; justify-items: center; }
.poster-date { justify-self: center; }
.poster-big { font-size: clamp(5rem, 12vw, 22rem); line-height: 1; margin-block: 0.05em; }
.clip {
  position: absolute; top: -1.6rem; width: 1.6rem; height: 2.4rem; border: 3px solid var(--fg); border-bottom-width: 0.9rem;
  border-radius: 0.4rem 0.4rem 0.2rem 0.2rem;
}
.clip-l { left: 12%; } .clip-r { right: 12%; }
@keyframes sway { 0%, 100% { rotate: -0.25deg; } 50% { rotate: 0.25deg; } }

/* capitoli: numero romano fisso a sinistra, tesi che scorrono a destra */
.chapter { display: grid; gap: 2rem; padding-block: clamp(5rem, 14vh, 12rem); }
@media (min-width: 1200px) { .chapter { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.chapter-side { align-self: start; }
@media (min-width: 1200px) { .chapter-side { position: sticky; top: 6rem; } }
.chapter-num { font-size: clamp(6rem, 16vw, 30rem); color: var(--accent-ink); }
.theses { display: grid; gap: clamp(4rem, 12vh, 10rem); }
.thesis { position: relative; display: grid; gap: 0.5rem; padding-top: 1.25rem; }
.thesis-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.thesis-num { font-size: clamp(2rem, 4vw, 7rem); color: var(--muted); line-height: 1; }
.thesis-title { font-size: clamp(2.6rem, 6vw, 13rem); letter-spacing: -0.005em; }
.thesis:hover .thesis-num { color: var(--accent-ink); }

.interlude { display: flex; flex-direction: column; overflow: hidden; padding-block: 2rem; font-size: clamp(3rem, 10vw, 20rem); line-height: 0.95; border-block: 1px solid var(--line); }
.interlude .marquee-track { gap: 0; padding: 0; }
.interlude .marquee-track + .marquee-track { animation-direction: reverse; -webkit-text-stroke: 1px var(--fg); color: transparent; }
.interlude span { white-space: nowrap; padding-right: 0.3em; }

.checklist { display: grid; gap: 1rem; }
.checklist li { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.check { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--fg); position: relative; }
.check::after {
  content: ""; position: absolute; inset: 15%; background: var(--accent);
  transform: scale(0); transition: transform var(--dur) var(--ease-spring); transition-delay: calc(var(--i, 0) * 260ms + 500ms);
}
.is-in > .check::after { transform: scale(1); }

/* raggi x: lo strato profondo si vede solo dentro il cerchio attorno al puntatore */
.xray { position: relative; padding: clamp(1.5rem, 4vw, 5rem); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; cursor: none; }
.xray-layer { font-size: clamp(2.6rem, 7.5vw, 15rem); }
.xray-deep {
  position: absolute; inset: 0; padding: inherit; background: var(--accent); color: var(--on-accent);
  clip-path: circle(var(--r, 0px) at var(--mx, 50%) var(--my, 50%));
  transition: clip-path 0.25s var(--ease-out);
}
.xray:hover .xray-deep { --r: clamp(5rem, 14vw, 18rem); }
.xray-top { color: var(--muted); }

.sign { position: relative; display: grid; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); }
.sign-pad { width: 100%; height: clamp(14rem, 30vh, 26rem); border-radius: var(--radius); background: var(--surface); cursor: crosshair; }
.sign-line { position: absolute; left: 2rem; top: calc(1rem + clamp(14rem, 30vh, 26rem) - 2.5rem); pointer-events: none; }
.sign-actions { justify-content: flex-end; }
.stamp {
  position: absolute; right: 2.5rem; top: 2rem; padding: 0.4em 0.8em; border: 3px solid var(--accent-ink); color: var(--accent-ink);
  font-size: clamp(1.2rem, 2vw, 3rem); rotate: -8deg; opacity: 0; scale: 2.5; pointer-events: none; text-align: center; line-height: 1.1;
}
.stamp.is-on { animation: stamp 0.6s var(--ease-spring) forwards; }
@keyframes stamp { to { opacity: 1; scale: 1; } }

.experiment { display: grid; gap: 1rem; }
@media (min-width: 1200px) { .experiment { grid-template-columns: minmax(0, 1fr) 22rem; } }
.experiment .stage { min-height: 70svh; }
.controls { display: grid; gap: 1.25rem; align-content: start; }

/* reflex: il bersaglio cambia stato con una transizione "a goccia" */
.reflex-pad {
  display: grid; place-items: center; text-align: center; cursor: pointer;
  min-height: 70svh; border-radius: var(--radius); background: var(--bg-2); user-select: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.reflex-orb {
  width: min(42vmin, 30rem); aspect-ratio: 1; background: var(--surface-2); display: grid; place-items: center;
  animation: morph 6s var(--ease-in-out) infinite; transition: background 0.08s linear, scale var(--dur) var(--ease-spring);
}
.reflex-pad[data-state="wait"] .reflex-orb { background: #ff5d47; scale: 0.92; }
.reflex-pad[data-state="go"] .reflex-orb { background: var(--accent); color: var(--on-accent); scale: 1.08; transition: none; }
.reflex-pad[data-state="early"] .reflex-orb { background: var(--fg); color: var(--bg); }
.bars { display: flex; align-items: flex-end; gap: 0.3rem; height: 8rem; }
.bar { flex: 1; background: var(--accent); border-radius: 0.3rem 0.3rem 0 0; animation: draw-y 0.8s var(--ease-spring) both; transform-origin: bottom; }

/* terminale */
.term { position: relative; height: 70svh; overflow: auto; padding: 1.25rem; border-radius: var(--radius); background: #070909; color: #d9dcd6; font-family: var(--font-mono); font-size: clamp(0.8rem, 0.9vw, 1.2rem); line-height: 1.55; cursor: text; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.term::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgb(255 255 255 / 0.02) 3px 4px); }
.term-line { white-space: pre-wrap; font: inherit; }
.term-echo { color: var(--teal); margin-top: 0.4em; }
.term-err { color: #ff8a7a; }
.term-dim { color: #6f7472; }
.term-input-row { display: flex; gap: 0.6em; margin-top: 0.4em; }
.term-input-row span { color: var(--teal); white-space: nowrap; }
.term-input { flex: 1; background: none; border: 0; outline: none; color: inherit; font: inherit; caret-color: var(--teal); }
.term-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* sequencer */
.seq { display: grid; grid-template-columns: repeat(16, 1fr); gap: clamp(2px, 0.4vw, 6px); padding: 1rem; border-radius: var(--radius); background: var(--bg-2); }
.seq-cell { aspect-ratio: 1; border-radius: 0.3rem; background: var(--line-strong); transition: background var(--dur-fast), transform var(--dur) var(--ease-spring); }
.seq-cell:nth-child(32n + 1), .seq-cell:nth-child(4n + 1) { box-shadow: inset 0 0 0 1px var(--line-strong); }
.seq-cell.is-on { background: var(--fg); }
.seq-cell.is-head { background: color-mix(in oklab, var(--accent) 35%, var(--line-strong)); }
.seq-cell.is-on.is-head { background: var(--accent); transform: scale(1.18); box-shadow: 0 0 1rem var(--accent); }

/* synth */
.scope { width: 100%; height: clamp(16rem, 45svh, 34rem); border-radius: var(--radius); background: #070909; }
.keys { display: flex; height: clamp(7rem, 16svh, 12rem); gap: 3px; }
.key { position: relative; flex: 1; border-radius: 0 0 0.6rem 0.6rem; background: var(--fg); color: var(--bg); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem; transition: transform 0.12s var(--ease-out), background var(--dur-fast); transform-origin: top; }
.key.is-black { background: #050606; color: #8a8f8d; margin-inline: -1.2%; z-index: 1; height: 62%; flex: 0.7; box-shadow: 0 0.4rem 0.8rem rgb(0 0 0 / 0.4); }
.key.is-down { background: var(--accent); color: var(--on-accent); transform: scaleY(0.97); }

/* pathfinding */
.lanes { display: grid; gap: 1rem; }
@media (min-width: 1200px) { .lanes { grid-template-columns: repeat(3, 1fr); } }
.lane { position: relative; display: grid; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius); background: var(--bg-2); transition: box-shadow var(--dur); }
.lane canvas { width: 100%; aspect-ratio: 41 / 25; cursor: crosshair; }
.lane-head { display: flex; justify-content: space-between; color: var(--muted); }
.lane-head b { color: var(--fg); font-weight: 600; }
.lane[data-place="1"] { box-shadow: inset 0 0 0 2px var(--accent); }
.lane[data-place="1"] .lane-head b::after { content: " · first"; color: var(--accent-ink); }

/* typing */
.type-stage { position: relative; display: grid; align-content: center; min-height: 50svh; padding: clamp(1.5rem, 4vw, 5rem); border-radius: var(--radius); background: var(--bg-2); cursor: text; }
.type-text { position: relative; font-size: clamp(2rem, 5vw, 10rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--muted); }
.type-char { transition: color 0.15s; }
.type-char.is-ok { color: var(--fg); }
.type-char.is-bad { color: #ff8a7a; text-decoration: underline wavy; }
.type-caret { position: absolute; left: 0; top: 0; width: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; }
.type-input { position: absolute; opacity: 0; pointer-events: none; }

.bench { display: grid; gap: 1rem; }
@media (min-width: 1200px) { .bench { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bench-wide { grid-column: 1 / -1; } }

/* chat del modello finto */
.chat { display: flex; flex-direction: column; gap: 0.75rem; height: 26rem; overflow: auto; scroll-behavior: smooth; }
.msg { max-width: 85%; padding: 0.65rem 0.95rem; border-radius: 1.1rem; animation: msg-in 0.7s var(--ease-liquid) both; white-space: pre-wrap; }
.msg-user { align-self: flex-end; background: var(--fg); color: var(--bg); border-bottom-right-radius: 0.3rem; }
.msg-bot { align-self: flex-start; background: var(--bg-2); border-bottom-left-radius: 0.3rem; }
.msg-tool { align-self: flex-start; font-family: var(--font-mono); font-size: 0.72rem; border: 1px dashed var(--line-strong); background: transparent; }
.caret::after { content: "▍"; color: var(--accent-ink); animation: blink 0.8s steps(2) infinite; }
@keyframes msg-in { from { opacity: 0; transform: translateY(0.8rem) scale(0.96); filter: blur(6px); } }

/* sync: due "telefoni" affiancati */
.devices { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.device { border: 1px solid var(--line-strong); border-radius: 2rem; padding: 0.9rem; background: var(--bg-2); transition: opacity var(--dur), filter var(--dur); }
.device.is-offline { opacity: 0.7; filter: grayscale(1); }
.todo { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--line); animation: msg-in 0.6s var(--ease-liquid) both; cursor: pointer; }
.todo-box { width: 1rem; height: 1rem; border-radius: 0.35rem; border: 1.5px solid var(--fg-2); transition: background var(--dur-fast), border-color var(--dur-fast); }
.todo.is-done .todo-box { background: var(--accent); border-color: var(--accent); }
.todo.is-done span:last-child { text-decoration: line-through; color: var(--muted); }

/* console API: barre di timing */
.waterfall { display: grid; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; }
.wf-row { display: grid; grid-template-columns: 5rem 1fr 4rem; gap: 0.75rem; align-items: center; }
.wf-bar { height: 0.55rem; border-radius: 99px; background: var(--accent); transform-origin: left; animation: draw-x 0.7s var(--ease-liquid) both; }
.json { font-family: var(--font-mono); font-size: 0.72rem; white-space: pre; overflow: auto; max-height: 18rem; }
.json .k { color: var(--fg-2); }
.json .s { color: var(--accent-ink); }
.json .n { color: #ffb347; }

.tele-chart { width: 100%; height: clamp(12rem, 26vh, 22rem); border-radius: var(--radius-sm); background: var(--bg-2); }

.push-phone { position: relative; min-height: 22rem; border-radius: 2rem; padding: 1.25rem 0.8rem; overflow: hidden;
  background: radial-gradient(120% 70% at 30% 0%, #1c5c4f, #071514 55%, #050909); color: #f2f2ee; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.push-clock { text-align: center; font-size: clamp(2.4rem, 4vw, 5rem); font-weight: 300; letter-spacing: -0.03em; margin-bottom: 1rem; }
.push-stack { display: grid; gap: 0.5rem; }
.push-note { padding: 0.7rem 0.9rem; border-radius: 1.1rem; background: rgb(255 255 255 / 0.16); backdrop-filter: blur(20px); animation: push-in 0.9s var(--ease-spring) both; }
.push-note.is-urgent { box-shadow: inset 0 0 0 1.5px #ffb347; }
@keyframes push-in { from { transform: translateY(-140%) scale(0.92); opacity: 0; } }

.wh-body { border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.75rem; resize: vertical; transition: background var(--dur-fast); }
.wh-body.is-tampered { background: color-mix(in oklab, #ff8a7a 25%, var(--bg-2)); }
.wh-sig { word-break: break-all; }

.roll-grid { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; }
.roll-dot { aspect-ratio: 1; border-radius: 2px; background: var(--line-strong); transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring); }
.roll-dot.is-on { background: var(--accent); transform: scale(1.15); }

.contact-grid { display: grid; gap: 3rem; padding-bottom: 4rem; }
@media (min-width: 1200px) { .contact-grid { grid-template-columns: minmax(0, 1fr) clamp(18rem, 26vw, 34rem); align-items: start; } .contact-side { position: sticky; top: 7rem; } }
.contact-title { font-size: clamp(3.4rem, 9.5vw, 20rem); }

.handshake { display: grid; gap: 1.5rem; }
.hs-step { display: grid; gap: 0.5rem; }
.hs-step.is-active { animation: hs-in 0.9s var(--ease-liquid) both; }
.hs-q { font-size: clamp(1.4rem, 2.6vw, 5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.hs-input {
  width: 100%; background: none; border: 0; border-bottom: 2px solid var(--line-strong); outline: none; padding: 0.3em 0;
  font-size: clamp(1.8rem, 4vw, 8rem); font-weight: 600; letter-spacing: -0.04em; color: var(--accent-ink); caret-color: var(--accent);
  transition: border-color var(--dur-fast);
}
.hs-input:focus { border-color: var(--accent); }
.hs-input::placeholder { color: var(--line-strong); }
/* risposta data: si compatta su una riga, cliccabile per correggere */
.hs-step.is-done { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.hs-step.is-done .hs-q { font-size: 1rem; color: var(--muted); }
.hs-step.is-done .hs-input { font-size: 1.2rem; border: 0; padding: 0; pointer-events: none; color: var(--fg); }
@keyframes hs-in { from { opacity: 0; transform: translateY(1.5rem); filter: blur(8px); } }

.packet { margin-top: 3rem; padding: 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.packet-head { display: flex; justify-content: space-between; color: var(--accent-ink); }
.packet-body { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

.listener { display: grid; place-items: center; }
.listener .matrix { --size: clamp(10rem, 20vw, 26rem); }

.hold-btn { position: relative; isolation: isolate; overflow: hidden; width: 100%; padding: 1.1rem 1.25rem; border-radius: 99px; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 0.85rem; user-select: none; touch-action: none; }
.hold-fill { position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); }
.hold-btn.is-holding .hold-fill { transform: scaleX(1); transition: transform 1.2s linear; }
.hold-btn.is-holding, .hold-btn.is-open { color: var(--on-accent); }
.hold-btn.is-open .hold-fill { transform: scaleX(1); }

.humans { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 768px) { .humans { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); } }
.human { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding: 1.5rem; background: var(--bg); transition: background var(--dur); }
.human:hover { background: var(--surface); }
.human-face { display: grid; place-items: center; padding: 1rem; border-radius: var(--radius); background: var(--bg-2); align-self: start; }
.human-face .matrix { --size: clamp(5rem, 8vw, 10rem); }
.human-body { display: grid; gap: 0.4rem; align-content: start; }
.human-handle { font-size: clamp(2.6rem, 5vw, 9rem); }
.sheet { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.sheet dt { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }
.human-seat .human-handle { color: var(--muted); }
.matrix.is-searching .on { background: var(--muted); }

.builder { display: grid; place-items: center; padding: 2rem; border-radius: var(--radius-lg); background: var(--surface); }
.builder-matrix { --size: clamp(14rem, 30vw, 34rem); }
.builder-matrix button { border: 0; padding: 0; cursor: pointer; background: color-mix(in oklab, var(--fg) 8%, transparent); transition: background var(--dur-fast), transform var(--dur) var(--ease-spring); }
.builder-matrix button:hover { transform: scale(0.9); }
.builder-matrix button.on { background: var(--accent); }
/* il posto libero chiude la griglia a tutta larghezza: niente buchi a fine riga */
.human-seat { grid-column: 1 / -1; }
.human-handle { padding-bottom: 0.08em; }

.posts { border-top: 1px solid var(--line-strong); }
.post-row { display: grid; gap: 0.5rem 2rem; padding: 2rem 0.5rem; border-bottom: 1px solid var(--line-strong); transition: background var(--dur) var(--ease-out), padding var(--dur) var(--ease-liquid); }
@media (min-width: 1200px) { .post-row { grid-template-columns: 8rem 1.2fr 1fr 10rem; align-items: baseline; } }
.post-row:hover { background: var(--surface); padding-inline: 1.5rem; }
.post-title { font-size: clamp(1.6rem, 2.6vw, 5rem); }
.post-row:hover .post-title { color: var(--accent-ink); }

.post-head { padding-block: 3rem 2rem; max-width: 70rem; }
.post-h1 { font-size: clamp(2.6rem, 6vw, 12rem); }
.post-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.post-end { padding-block: 3rem 5rem; }

/* tipografia lunga: colonna di lettura in em, così scala col font e non con lo schermo */
.prose { max-width: 40em; margin-left: clamp(0rem, 18vw, 40rem); font-size: clamp(1.05rem, 1.1vw, 1.6rem); line-height: 1.7; color: var(--fg-2); }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { margin-top: 2.2em; font-size: 1.8em; line-height: 1.15; letter-spacing: -0.03em; color: var(--fg); font-weight: 600; }
.prose h3 { margin-top: 1.8em; font-size: 1.3em; color: var(--fg); font-weight: 600; }
.prose strong { color: var(--fg); }
.prose code { font-family: var(--font-mono); font-size: 0.85em; padding: 0.1em 0.35em; border-radius: 0.3em; background: var(--surface); color: var(--accent-ink); }
.prose pre.code { padding: 1.2em 1.4em; border-radius: var(--radius); background: #070909; overflow-x: auto; }
.prose pre.code code { padding: 0; background: none; color: #d9dcd6; font-size: 0.8em; line-height: 1.6; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul { list-style: square; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--accent-ink); }
.prose blockquote { padding-left: 1.2em; border-left: 3px solid var(--accent); font-size: 1.25em; color: var(--fg); line-height: 1.4; }

.st-summary::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.4em; vertical-align: 0.1em; background: var(--muted); transition: background var(--dur); }
.st-summary[data-state="up"]::before { background: var(--accent); box-shadow: 0 0 1em var(--accent); animation: blink 2s infinite; }
.st-summary[data-state="partial"]::before { background: #ffb347; }
.st-list { border-top: 1px solid var(--line-strong); }
.st-row { display: grid; gap: 1rem; align-items: center; padding: 1.25rem 0.25rem; border-bottom: 1px solid var(--line-strong); }
@media (min-width: 768px) { .st-row { grid-template-columns: minmax(14rem, 1fr) 2fr 7rem; } }
.st-dot { width: 0.7rem; height: 0.7rem; background: var(--muted); flex-shrink: 0; }
.st-dot.is-up { background: var(--accent); }
.st-dot.is-down { background: #ff8a7a; }
.st-bars { display: flex; align-items: flex-end; gap: 2px; height: 2.5rem; }
.st-bars i { flex: 1; max-width: 0.6rem; background: var(--accent); opacity: 0.8; border-radius: 1px; transform-origin: bottom; }
.st-bars i:last-child { animation: draw-y 0.6s var(--ease-spring) both; }
.st-bars i.is-down { background: #ff8a7a; height: 100% !important; }