/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #edefee;
--ink: #0a0a0a;
}
html { -webkit-text-size-adjust: 100%; }
body {
min-height: 100svh;
background: var(--bg);
color: var(--ink);
font-family: "Helvetica Neue", Helvetica, Arial, "Inter", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* contenuto accessibile/indicizzabile ma non visibile */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
/* ---------- Rumore statico (grana fine) ---------- */
.noise {
position: absolute;
inset: 0;
z-index: 2; /* sotto l'avatar (3): la trasparenza del canvas lascia passare la grana */
pointer-events: none;
background-image: url("data:image/svg+xml,");
background-size: 180px 180px;
animation: grain 0.45s steps(8) infinite;
}
/* grana scura sul chiaro (sfondo) */
.noise--mul { mix-blend-mode: multiply; opacity: 0.8; }
/* grana chiara sul scuro (testo SILVIO LUCHETTI) = fusione, discreta */
.noise--scr { mix-blend-mode: screen; opacity: 0.18; }
@keyframes grain {
from { background-position: 0 0; }
to { background-position: 180px 180px; }
}
/* ---------- Nav ---------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 20;
display: flex;
justify-content: space-between;
align-items: center;
padding: clamp(18px, 3vw, 34px) clamp(24px, 4vw, 56px);
font-size: clamp(11px, 1vw, 13px);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.nav__group { display: flex; gap: clamp(10px, 1.2vw, 18px); }
/* bottoni a pillola — stessa forma/animazione per tutti */
.btn {
font-family: "Space Mono", ui-monospace, monospace;
font-size: inherit;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #fff;
background: var(--ink);
border: 0;
padding: 10px 18px;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: transform 0.2s ease, filter 0.2s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.18); }
.btn--links { background: #2b1064; } /* viola scuro */
.btn--about { background: #0a3b40; } /* teal scuro */
.btn--contact { background: var(--ink); }
/* ---------- Hero ---------- */
/* area di scroll: più è alta, più scroll serve per completare il giro */
.stage {
position: relative;
height: 220vh;
}
.hero {
position: sticky;
top: 0;
height: 100svh;
overflow: hidden;
background: var(--bg); /* opaco: la grana multiply ci si fonde sopra */
display: flex;
align-items: center;
justify-content: center;
}
.hero__title {
position: absolute;
top: clamp(96px, 14vh, 170px);
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
z-index: 1;
font-family: "Bowlby One SC", "Arial Black", Helvetica, sans-serif;
font-weight: 400;
line-height: 0.8;
letter-spacing: -0.02em;
text-transform: uppercase;
font-size: clamp(58px, 17vw, 250px);
user-select: none;
}
/* ogni riga su una sola linea: il JS scala il font per riempire la
stessa larghezza, così SILVIO e LUCHETTI risultano identici */
.hero__line { display: block; white-space: nowrap; }
/* la seconda riga (LUCHETTI) ha lettere più ravvicinate nel font:
un filo di tracking per non far toccare E-T-T-I */
.hero__line:last-child { letter-spacing: 0.005em; }
/* Avatar ancorato al fondo: piedi sempre visibili above-the-fold,
testa che arriva sulla seconda riga del titolo */
.hero__avatar {
position: absolute;
z-index: 3; /* sopra la grana: l'avatar non è toccato dal rumore */
bottom: clamp(16px, 4vh, 48px);
left: 50%;
transform: translateX(-50%);
height: 64svh; max-height: 640px;
width: calc(64svh * 0.4491); max-width: 287px; /* proporzione frame 300/668 */
}
.hero__avatar {
touch-action: manipulation; /* tap = spin, swipe verticale = scroll */
/* cursore a freccia circolare (icona rotate con alone bianco) */
cursor: url("data:image/svg+xml,") 11 11, pointer;
}
.hero__video { /*