:root {
  --bg: #0a0a0a;
  --bg-2: #141413;
  --fg: #f2f1ed;
  --blend: difference;     /* barra e titolo si invertono sopra le foto */
  --blend-fg: #fff;
  --muted: color-mix(in srgb, var(--fg) 58%, transparent);
  --line: color-mix(in srgb, var(--fg) 15%, transparent);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Geist", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 300 clamp(16px, 1.2vw, 19px)/1.5 var(--sans); letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
/* grana fissa sopra tutto, come una pellicola */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
main { overflow-x: clip; } /* clip, non hidden: non rompe le sezioni sticky */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--fg); color: var(--bg); padding: 8px 14px; }
.skip:focus { top: 12px; }

.label { font: 600 11px/2 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.muted { color: var(--muted); }
.link { position: relative; display: inline-block; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--ease); }
.link:hover::after { transform: scaleX(0); }

/* ---------- Ingresso ---------- */
.gate {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 22px var(--pad) 48px;
  transition: opacity 1s var(--ease), visibility 1s;
}
.gate__logo { border-radius: 50%; filter: grayscale(1) brightness(1.6); }
.gate__line { align-self: center; max-width: 52ch; text-align: center; font: 600 11px/2 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.gate__enter { font: 300 22px/1 var(--serif); letter-spacing: .02em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--fg); transition: letter-spacing .6s var(--ease); }
.gate__enter:hover { letter-spacing: .2em; }
.gate.gone { opacity: 0; visibility: hidden; }

/* ---------- Barra ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px var(--pad);
  mix-blend-mode: var(--blend); color: var(--blend-fg);
}
.bar__menu { justify-self: start; }
.bar__cta { justify-self: end; margin-right: 44px; } /* spazio per il pallino del colore */
.bar__logo img { border-radius: 50%; filter: grayscale(1) brightness(1.6); }

.menu {
  position: fixed; inset: 0; z-index: 25; background: var(--bg-2);
  display: grid; align-content: center; padding: 80px var(--pad);
  clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease);
}
.menu.open { clip-path: inset(0); }
.menu ol { list-style: none; }
.menu a { display: flex; align-items: baseline; gap: 20px; font: 200 clamp(40px, 8vw, 104px)/1.1 var(--serif); letter-spacing: -0.03em; transition: opacity .3s, transform .6s var(--ease); }
.menu a span { font: 600 11px/1 var(--sans); letter-spacing: .3em; color: var(--muted); }
.menu ol:hover a { opacity: .35; }
.menu ol a:hover { opacity: 1; transform: translateX(16px); }

/* ---------- Hero ---------- */
/* Le animazioni leggono --p (0→1), scritto da app.js in base allo scroll */
.hero { position: relative; height: 280vh; }
.hero__stage {
  --e: min(1, calc(var(--p, 0) * 1.6));
  position: sticky; top: 0; height: 100dvh; overflow: hidden;
  display: grid; place-items: center; padding: 0 var(--pad);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* da riquadro verticale al centro a schermo pieno */
  clip-path: inset(calc((100% - min(500px, 80vw)) / 2 * (1 - var(--e))) calc((100% - min(400px, 64vw)) / 2 * (1 - var(--e))));
  filter: grayscale(.2) contrast(1.05) brightness(calc(.85 - var(--e) * .45));
}
.hero__title {
  position: relative; text-align: center; mix-blend-mode: var(--blend); color: var(--blend-fg);
  font: 200 clamp(56px, 12vw, 190px)/.92 var(--serif); letter-spacing: -0.045em;
}
.hero__title { opacity: calc(1 - var(--e) * 1.3); }
.hero__title span { display: block; }
.hero__title span:first-child { transform: translateX(calc(var(--e) * -45vw)); }
.hero__title span:last-child { transform: translateX(calc(var(--e) * 45vw)); }
.hero__after { color: #f2f1ed;
  position: absolute; text-align: center;
  font: 200 clamp(40px, 6.4vw, 104px)/1 var(--serif); letter-spacing: -0.035em;
  opacity: calc((var(--p, 0) - .55) * 4);
  transform: translateY(calc((1 - var(--e)) * 60px));
}
.hero__foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 32px; display: flex; justify-content: space-between; align-items: end; gap: 24px; opacity: calc(1 - var(--p, 0) * 6); }
.hero__foot p { max-width: 34ch; color: var(--muted); }

/* Testi che si accendono parola per parola */
.words span { opacity: clamp(.12, calc((var(--p, 1) * 2.6 - var(--k)) * 5), 1); transition: opacity .15s linear; }

/* ---------- Blocchi ---------- */
.block { padding: clamp(120px, 18vw, 240px) var(--pad) 0; }
.statement { margin-top: 32px; max-width: 18ch; font: 200 clamp(40px, 6.6vw, 104px)/1.04 var(--serif); letter-spacing: -0.035em; text-wrap: balance; }
.cols { margin-top: 64px; margin-left: auto; width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; color: var(--muted); line-height: 1.65; }

.pillars { list-style: none; margin-top: clamp(96px, 12vw, 160px); border-top: 1px solid var(--line); }
.pillars li { --q: min(1, calc(var(--p, 1) * 2.4)); position: relative; display: grid; grid-template-columns: 1fr 2fr 1.4fr; gap: 32px; align-items: baseline; padding: 40px 0 48px; }
.pillars li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--q)); }
.pillars li > * { opacity: var(--q); transform: translateX(calc((1 - var(--q)) * -60px)); }
.pillars li > p { transform: translateX(calc((1 - var(--q)) * 60px)); }
.count { font: 300 26px/1 var(--serif); }
.count i { font-style: normal; color: var(--muted); }
.pillars h3, .services h3 { font: 200 clamp(48px, 7vw, 106px)/1 var(--serif); letter-spacing: -0.035em; }
.pillars p { color: var(--muted); line-height: 1.65; }

/* Come lavoriamo: lista a sinistra, foto ferma a destra che cambia col passo attivo */
.how { display: grid; grid-template-columns: 1.4fr 1fr; column-gap: clamp(40px, 6vw, 96px); }
.how > .label { grid-column: 1 / -1; }
.services { list-style: none; margin-top: 40px; border-top: 1px solid var(--line); }
.services li { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px 0; border-bottom: 1px solid var(--line); opacity: .28; transition: opacity .6s var(--ease); }
.services li.active { opacity: 1; }
.services p { color: var(--muted); line-height: 1.65; max-width: 48ch; }
.services li img { display: none; }
.how__media { position: sticky; top: 15vh; height: 70vh; margin-top: 40px; overflow: hidden; }
.how__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.12; clip-path: inset(0 0 100% 0); transition: opacity .9s var(--ease), scale 1.4s var(--ease), clip-path 1s var(--ease); filter: grayscale(.3) brightness(.85); }
.how__media img.on { opacity: 1; scale: 1; clip-path: inset(0); }
.how__n { position: absolute; left: 16px; bottom: 12px; mix-blend-mode: difference; color: #fff; }

/* Chi siamo: banda fotografica che si apre e scorre più lenta */
.band { --q: min(1, calc(var(--p, 1) * 2)); margin: clamp(80px, 12vw, 160px) calc(var(--pad) * -1) 0; height: 78vh; overflow: hidden; clip-path: inset(calc((1 - var(--q)) * 14%) calc((1 - var(--q)) * 22%)); }
.band img { width: 100%; height: 124%; object-fit: cover; transform: translateY(calc((var(--p, .5) - .5) * -18%)); filter: grayscale(.2) brightness(.8); }

.about .statement { max-width: 15ch; }

.head { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.head p { max-width: 32ch; }
.title { max-width: 14ch; font: 200 clamp(44px, 7vw, 106px)/1.02 var(--serif); letter-spacing: -0.035em; text-wrap: balance; }
.gallery { list-style: none; margin-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; }
.gallery li:nth-child(3n+2) { translate: 0 64px; }

/* Galleria su desktop: sezione bloccata, le auto scorrono in orizzontale */
@media (min-width: 861px) {
  .cars.pinned { padding: 0; }
  .cars.pinned .cars__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 72px var(--pad) 0; }
  .cars.pinned .title { font-size: clamp(40px, 4.6vw, 72px); }
  .cars.pinned .gallery { display: flex; gap: 28px; width: max-content; margin-top: 40px; transform: translateX(calc(var(--p, 0) * var(--dist, 0) * -1px)); }
  .cars.pinned .gallery li { width: clamp(220px, 19vw, 300px); translate: none; }
  .cars.pinned .gallery li:nth-child(even) { translate: 0 48px; }
}
.gallery button { display: block; width: 100%; text-align: left; cursor: zoom-in; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.9) brightness(.8); transition: filter .8s var(--ease), clip-path .8s var(--ease); clip-path: inset(4%); }
.gallery button:hover img, .gallery button:focus-visible img { filter: none; clip-path: inset(0); }
.gallery span { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
.gallery b { font: 300 22px/1.2 var(--serif); letter-spacing: -0.02em; }
.gallery small { font: 600 11px/2 var(--sans); letter-spacing: .3em; color: var(--muted); }

.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: var(--fg); }
.lightbox[open] { display: grid; place-items: center; align-content: center; gap: 20px; animation: fade .5s var(--ease); }
.lightbox::backdrop { background: color-mix(in srgb, var(--bg) 95%, transparent); }
.lightbox img { max-width: calc(100vw - 2 * var(--pad)); max-height: calc(100dvh - 160px); }
.lb { position: fixed; padding: 12px; }
.lb--close { top: 14px; right: calc(var(--pad) - 12px); }
.lb--prev { bottom: 20px; left: calc(var(--pad) - 12px); }
.lb--next { bottom: 20px; right: calc(var(--pad) - 12px); }
@keyframes fade { from { opacity: 0; } }

.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 32px 0; font: 200 clamp(26px, 3.4vw, 48px)/1.1 var(--serif); letter-spacing: -0.03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; transition: transform .5s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 60ch; margin-left: auto; padding: 0 0 36px; color: var(--muted); line-height: 1.65; }

.outro { text-align: center; padding-bottom: clamp(120px, 16vw, 220px); }
.huge { margin-top: 12px; font: 200 clamp(64px, 14vw, 230px)/.9 var(--serif); letter-spacing: calc(-0.05em + (1 - min(1, var(--p, 1) * 1.8)) * .25em); transform: scale(calc(.7 + min(1, var(--p, 1) * 1.8) * .3)); opacity: min(1, calc(var(--p, 1) * 2.5)); }
.mail { display: inline-block; margin-top: 56px; font: 300 clamp(22px, 3vw, 40px)/1.2 var(--serif); letter-spacing: -0.02em; border-bottom: 1px solid var(--line); transition: border-color .4s; overflow-wrap: anywhere; }
.mail:hover { border-color: var(--fg); }
.socials { margin-top: 40px; display: flex; justify-content: center; gap: 40px; }

.foot { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 28px var(--pad); border-top: 1px solid var(--line); }

/* Entrata dei titoli: partono già visibili se il JS non gira */
.js .reveal { opacity: 0; translate: 0 40px; filter: blur(8px); transition: opacity 1.2s var(--ease), translate 1.2s var(--ease), filter 1.2s var(--ease); }
.js .reveal.in { opacity: 1; translate: 0 0; filter: none; }
.hero__title .reveal:nth-child(2) { transition-delay: .12s; }

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .pillars li, .services li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pillars h3, .services h3 { font-size: clamp(36px, 10.5vw, 64px); }
  .gallery img { filter: none; clip-path: none; } /* niente hover su touch: foto sempre a colori */
  .services li img { display: block; margin-top: 12px; aspect-ratio: 3 / 2; object-fit: cover; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .how__media { display: none; }
  .services li { min-height: 0; opacity: 1; }
  .band { height: 50vh; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 40px 14px; }
  .gallery li:nth-child(3n+2) { translate: none; }
  .gallery li:nth-child(even) { translate: 0 40px; }
  .gallery b { font-size: 17px; }
  .gallery span { flex-direction: column; gap: 2px; }
  .hero__foot { flex-direction: column; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100dvh; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Vernici (temi del sito) ---------- */
[data-palette="avorio"]   { --bg: #efebe3; --bg-2: #e4dfd4; --fg: #161513; }
[data-palette="grafite"]  { --bg: #26282b; --bg-2: #303337; --fg: #e9e6df; }
[data-palette="blu"]      { --bg: #0c1426; --bg-2: #142039; --fg: #e8e4da; --blend: normal; --blend-fg: var(--fg); }
[data-palette="verde"]    { --bg: #0f261c; --bg-2: #173326; --fg: #ece5d3; --blend: normal; --blend-fg: var(--fg); }
[data-palette="rosso"]    { --bg: #5e0f13; --bg-2: #6f161b; --fg: #f6ebe1; --blend: normal; --blend-fg: var(--fg); }
[data-palette="sabbia"]   { --bg: #c9b99c; --bg-2: #bdac8d; --fg: #1d1a15; --blend: normal; --blend-fg: var(--fg); }

/* ---------- Colore del sito ---------- */
/* In alto a destra, accanto a "Contattaci": fuori dalla barra perché la barra si inverte sulle foto */
.paint { position: fixed; top: 13px; right: var(--pad); z-index: 45; }
.paint__toggle {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); transition: transform .4s var(--ease), border-color .3s;
}
.paint__toggle:hover, .paint__toggle[aria-expanded="true"] { transform: scale(1.1); border-color: var(--fg); }
.paint__panel, .consent {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent); color: var(--fg);
  border: 1px solid var(--line); border-radius: 20px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform-origin: top right; animation: paint-pop .5s var(--ease);
}
.paint__panel { padding: 16px 18px 18px; }
.paint__panel[hidden], .consent[hidden] { display: none; }
.paint__panel > p { min-height: 2em; white-space: nowrap; }
.paint__dot, .paint__swatches button {
  display: block; border-radius: 50%;
  /* sfera di vernice: riflesso in alto a sinistra, ombra in basso */
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--a) 60%, #fff) 0, var(--a) 45%, color-mix(in srgb, var(--a) 65%, #000) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent);
}
.paint__dot { width: 22px; height: 22px; }
.paint__swatches { display: flex; gap: 12px; margin-top: 6px; }
.paint__swatches button { width: 34px; height: 34px; transition: transform .4s var(--ease); }
.paint__swatches button:hover { transform: scale(1.15); }
.paint__swatches button[aria-pressed="true"] { outline: 1px solid var(--fg); outline-offset: 3px; }
.paint__forget { margin-top: 14px; }

.consent { width: min(340px, calc(100vw - 2 * var(--pad))); padding: 18px 20px 20px; }
.consent p:not(.label) { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.consent__actions { display: flex; gap: 24px; margin-top: 16px; }
@keyframes paint-pop { from { opacity: 0; transform: translateY(-8px) scale(.96); } }

/* Il nuovo colore si allarga a cerchio dal punto cliccato (browser con View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: paint-in 1s var(--ease); }
@keyframes paint-in { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); } }

@media (max-width: 860px) {
  .paint { top: 11px; }
  .bar .label { letter-spacing: .16em; }
  .paint__swatches { gap: 8px; }
  .paint__swatches button { width: 30px; height: 30px; }
}

/* Senza JavaScript niente schermata d'ingresso: il sito resta sempre leggibile */
html:not(.js) .gate { display: none; }
html:not(.js) body.locked { overflow: auto; }

/* ---------- WhatsApp e telefono ---------- */
.reach { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.wa, .wa-float {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--fg); color: var(--bg); border-radius: 999px;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.wa { padding: 16px 28px 16px 22px; font: 300 clamp(18px, 2vw, 22px)/1 var(--serif); letter-spacing: -0.01em; }
.wa:hover, .wa-float:hover { transform: scale(1.04); }
.wa svg, .wa-float svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.outro .mail { margin-top: 36px; }
.wa-float {
  position: fixed; right: var(--pad); bottom: 20px; z-index: 20; padding: 12px 18px 12px 14px;
  opacity: 0; transform: translateY(16px); pointer-events: none;
}
.wa-float.show { opacity: 1; transform: none; pointer-events: auto; }
.wa-float.show:hover { transform: scale(1.04); }
@media (max-width: 860px) { .wa-float { bottom: 14px; padding: 12px; } .wa-float .label { display: none; } }
.review { margin-top: 48px; font-size: 15px; }
.review a { color: var(--fg); }