/* ==========================================================================
   Ottica Parioli — "Messa a fuoco"
   Palette dal negozio: noce, ottone, travertino. Motion: sfocato → nitido.
   ========================================================================== */

:root {
  --noce: #1b120e;
  --noce-2: #22170f;
  --noce-3: #302118;
  --noce-4: #4a3526;
  --ottone: #c9a45c;
  --ottone-2: #e2c690;
  --ottone-3: #8f6d2e;
  --travertino: #efe8dc;
  --travertino-2: #e2d8c8;
  --panna: #f4ede3;
  --fumo: #b8a896;
  --fumo-2: #8c7c6b;
  --inchiostro: #1b120e;
  --inchiostro-2: #5f4f42;
  --rosso: #b8322a;
  --verde: #2e6a3c;
  --line-dark: rgba(244, 237, 227, .12);
  --line-light: rgba(27, 18, 14, .14);

  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --sans: 'Jost', Futura, 'Century Gothic', system-ui, sans-serif;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  --gutter: clamp(16px, 4vw, 48px);
  --wrap: min(1240px, 100% - 2 * var(--gutter));
  --header-h: 76px;
  --section-y: clamp(5.5rem, 4rem + 7vw, 10rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--noce);
  color: var(--panna);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { background: var(--ottone); color: var(--noce); }
:focus-visible { outline: 2px solid var(--ottone); outline-offset: 4px; border-radius: 6px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.skip {
  position: fixed; left: 16px; top: 16px; z-index: 200;
  padding: .8rem 1.2rem; border-radius: 999px;
  background: var(--panna); color: var(--noce);
  font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip:focus { transform: none; }

/* Barra di avanzamento lettura */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; pointer-events: none; }
.progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ottone-3), var(--ottone-2));
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}

/* Grana leggera, come carta fotografica */
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%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)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Pulsanti e link ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .8rem 1.35rem;
  border: 1px solid transparent; border-radius: 999px;
  font: 500 .95rem/1 var(--sans); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  cursor: pointer; isolation: isolate; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    scale .16s var(--ease-out),
    translate .5s var(--ease-out),
    background-color .25s ease, color .25s ease,
    border-color .25s ease, box-shadow .35s ease;
}
.btn:active { scale: .97; }
.btn--sm { min-height: 42px; padding: .6rem 1.05rem; font-size: .88rem; }
.btn--lg { min-height: 56px; padding: 1rem 1.65rem; font-size: 1rem; }

.btn--brass {
  color: var(--noce);
  background: linear-gradient(180deg, #dcbd79 0%, #c29a50 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 30px -14px rgba(201, 164, 92, .6);
}
.btn--brass::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 250, 235, .6) 50%, transparent 70%);
  translate: -120% 0;
  transition: translate .8s var(--ease-out);
}
.btn--ghost {
  color: var(--panna);
  border-color: rgba(244, 237, 227, .26);
  background: rgba(27, 18, 14, .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.link {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding-block: .35rem;
  color: var(--ottone-2); font-weight: 500; text-decoration: none;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(.3); transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.link .icon { transition: translate .35s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn--brass:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 40px -14px rgba(201, 164, 92, .8); }
  .btn--brass:hover::after { translate: 120% 0; }
  .btn--ghost:hover { border-color: var(--ottone); color: var(--ottone-2); }
  .link:hover::after { transform: scaleX(1); }
  .link:hover .icon { translate: 2px -2px; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition:
    translate .5s var(--ease-drawer),
    background-color .4s ease, border-color .4s ease;
}
.site-header.is-scrolled {
  background: rgba(27, 18, 14, .74);
  border-color: var(--line-dark);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.site-header.is-hidden { translate: 0 -100%; }
.menu-open .site-header { translate: none; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.nav { height: 100%; display: flex; align-items: center; gap: 1.25rem; }

.brand { display: flex; align-items: center; gap: .8rem; margin-right: auto; text-decoration: none; }
.brand__mark {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ottone-2);
  border: 1px solid rgba(201, 164, 92, .45);
  background: radial-gradient(circle at 30% 25%, rgba(226, 198, 144, .2), transparent 62%);
  transition: rotate .6s var(--ease-out), border-color .3s ease;
}
.brand__mark svg { width: 26px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.brand__name {
  display: block;
  font-family: var(--serif); font-size: 1.38rem; font-weight: 500; line-height: 1;
  font-variation-settings: "opsz" 28;
}
.brand__place { display: block; margin-top: .32rem; font-size: .74rem; line-height: 1; color: var(--fumo); letter-spacing: .03em; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand__mark { rotate: -12deg; border-color: var(--ottone); }
}

.nav__links { position: relative; display: none; gap: .2rem; }
.nav__links a {
  padding: .55rem .95rem;
  font-size: .93rem; color: rgba(244, 237, 227, .72); text-decoration: none;
  border-radius: 999px;
  transition: color .25s ease;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--panna); }
.nav__indicator {
  position: absolute; left: 0; bottom: 3px;
  width: 1px; height: 1px;
  background: var(--ottone);
  transform-origin: 0 0;
  opacity: 0;
  transition: transform .55s var(--ease-in-out), opacity .3s ease;
}
.nav__call { display: none; }

.menu-btn {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(244, 237, 227, .22); border-radius: 50%;
  background: rgba(27, 18, 14, .35);
  cursor: pointer;
  transition: scale .16s var(--ease-out), border-color .25s ease;
}
.menu-btn:active { scale: .94; }
.menu-btn span {
  position: absolute; left: 14px; right: 14px; height: 1.5px;
  background: var(--panna); border-radius: 2px;
  transition: transform .4s var(--ease-in-out);
}
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

@media (min-width: 640px) { .nav__call { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .menu-btn { display: none; }
}

/* ---------- Menu mobile: si apre come un diaframma dal pulsante ---------- */
.menu {
  --mx: calc(100% - 40px);
  --my: 38px;
  position: fixed; inset: 0; z-index: 90;
  overflow-y: auto;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 164, 92, .12), transparent 60%),
    var(--noce-2);
  clip-path: circle(0px at var(--mx) var(--my));
  visibility: hidden;
  transition: clip-path .5s var(--ease-in-out), visibility 0s linear .5s;
}
.menu.is-open {
  clip-path: circle(150vmax at var(--mx) var(--my));
  visibility: visible;
  transition: clip-path .75s var(--ease-in-out), visibility 0s;
}
.menu__inner {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  padding-block: calc(var(--header-h) + 1rem) 2.5rem;
}
.menu__link, .menu__foot {
  opacity: 0; filter: blur(8px); translate: 0 18px;
  transition: opacity .25s ease, filter .25s ease, translate .25s ease;
}
.menu__link {
  width: fit-content;
  font-family: var(--serif); font-size: clamp(2.5rem, 11vw, 4.2rem); line-height: 1.2;
  font-variation-settings: "opsz" 72;
  color: var(--panna); text-decoration: none;
}
.menu__foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
  margin-top: 2.2rem; padding-top: 1.8rem;
  border-top: 1px solid var(--line-dark);
  color: var(--fumo); font-size: .95rem;
}
.menu.is-open .menu__link, .menu.is-open .menu__foot {
  opacity: 1; filter: blur(0); translate: 0 0;
  transition:
    opacity .7s var(--ease-out) calc(.2s + var(--i) * 70ms),
    filter .7s var(--ease-out) calc(.2s + var(--i) * 70ms),
    translate .8s var(--ease-out) calc(.2s + var(--i) * 70ms);
}
html.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  --pos: 50% 50%;
  --r: 96px;
  position: relative; isolation: isolate;
  min-height: max(100svh, 660px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: var(--noce);
}
.hero__media {
  position: absolute; inset: 0 0 -14% 0; z-index: -2;
  overflow: hidden;
  will-change: translate;
}
.hero__soft {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos);
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(20, 13, 10, .97) 0%, rgba(20, 13, 10, .82) 42%, rgba(20, 13, 10, .2) 78%, rgba(20, 13, 10, .55) 100%);
}

/* La lente: un disco che mostra la foto nitida e ingrandita */
.lens {
  position: absolute; left: 0; top: 0;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transition: opacity .9s ease;
  will-change: translate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.lens picture { display: contents; }
.lens__img {
  position: absolute; left: 0; top: 0;
  max-width: none;
  object-fit: cover; object-position: var(--pos);
  transform-origin: 0 0;
  will-change: transform;
}
.lens::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .22), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(20, 13, 10, .5) 100%);
}
.lens-rim {
  position: absolute; left: 0; top: 0;
  width: calc(var(--r) * 2.4); height: calc(var(--r) * 2.4);
  pointer-events: none;
  opacity: 0; scale: .86;
  transition: opacity .9s ease, scale 1.2s var(--ease-out);
  will-change: translate;
}
.lens-rim::after {
  /* riflesso del trattamento antiriflesso: verde e viola */
  content: ""; position: absolute; inset: 17%; border-radius: 50%;
  background: conic-gradient(from 210deg, transparent 0 8%, rgba(120, 205, 165, .2) 15%, rgba(175, 125, 225, .18) 23%, transparent 31% 100%);
  mix-blend-mode: screen;
}
.lens-rim svg { width: 100%; height: 100%; overflow: visible; }
.lens-rim__ring { fill: none; stroke: url(#rim-grad); stroke-width: 2.6; }
.lens-rim__inner { fill: none; stroke: rgba(244, 237, 227, .25); stroke-width: .6; }
.lens-rim__ticks { fill: none; stroke: rgba(226, 198, 144, .6); stroke-width: 3.2; stroke-dasharray: .5 5.1; }
.lens-rim__text { fill: rgba(226, 198, 144, .78); font: 500 5.4px var(--sans); letter-spacing: 1.6px; }
.hero.lens-ready .lens, .hero.lens-ready .lens-rim { opacity: 1; scale: 1; }

.hero__content {
  position: relative;
  padding-block: calc(var(--header-h) + 3rem) 2.4rem;
  will-change: translate, opacity;
}
.chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .65rem;
  margin-bottom: 1.8rem; padding: .5rem 1rem .5rem .85rem;
  border: 1px solid rgba(201, 164, 92, .32); border-radius: 999px;
  background: rgba(27, 18, 14, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .84rem; line-height: 1.2; color: var(--fumo);
}
.chip strong { color: var(--panna); font-weight: 600; }
.chip__stars { display: flex; gap: 2px; color: var(--ottone); }
.chip__stars .icon { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.chip__label { padding-left: .7rem; border-left: 1px solid rgba(244, 237, 227, .18); }

.hero__title {
  max-width: 11ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.1rem, 1rem + 7.8vw, 7.8rem);
  line-height: .96; letter-spacing: -.025em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.hero__lead {
  max-width: 42ch; margin-top: 1.6rem;
  font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); font-weight: 300; line-height: 1.7;
  color: rgba(244, 237, 227, .82);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__foot {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.3rem calc(1.3rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-dark);
  font-size: .86rem; color: var(--fumo);
}
.hero__hint { display: none; align-items: center; gap: .75rem; }
.hero__hint-ring { position: relative; width: 16px; height: 16px; border: 1px solid var(--ottone); border-radius: 50%; }
.hero__hint-ring::after {
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--ottone); border-radius: 50%;
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

@media (hover: hover) and (pointer: fine) {
  .hero__hint { display: inline-flex; }
}
@media (min-width: 768px) {
  .hero { --pos: 50% 50%; --r: 150px; }
  .hero__shade {
    background:
      linear-gradient(90deg, rgba(20, 13, 10, .94) 0%, rgba(20, 13, 10, .74) 36%, rgba(20, 13, 10, .12) 72%, rgba(20, 13, 10, .3) 100%),
      linear-gradient(0deg, rgba(20, 13, 10, .92) 0%, rgba(20, 13, 10, 0) 42%),
      linear-gradient(180deg, rgba(20, 13, 10, .6) 0%, rgba(20, 13, 10, 0) 24%);
  }
  .hero__content { padding-bottom: 3.5rem; }
}

/* Sequenza d'apertura: diaframma che si apre + messa a fuoco con piccola "caccia" dell'autofocus */
.js .hero__media {
  animation:
    iris 1.7s var(--ease-in-out) backwards,
    focus-pull 2.3s var(--ease-out) backwards;
}
@keyframes iris {
  from { clip-path: circle(7% at 64% 46%); }
  to { clip-path: circle(125% at 64% 46%); }
}
@keyframes focus-pull {
  0% { filter: blur(28px) brightness(.55); scale: 1.16; }
  55% { filter: blur(1.5px) brightness(1); }
  68% { filter: blur(5px); }
  100% { filter: blur(0); scale: 1; }
}
.js .intro { animation: intro-in 1.2s var(--ease-out) var(--d, 0s) backwards; }
@keyframes intro-in {
  from { opacity: 0; filter: blur(10px); translate: 0 18px; }
}

/* Titoli scomposti in parole */
.js [data-split]:not(.is-split) { opacity: 0; }
.w { display: inline-block; }
.punct { font-variation-settings: "opsz" 14; }
.js [data-split="intro"] .w {
  animation: word-in 1.3s var(--ease-out) calc(.8s + var(--i) * 95ms) backwards;
}
@keyframes word-in {
  from { opacity: 0; filter: blur(18px); translate: 0 .2em; }
}

/* ==========================================================================
   Rivelazione "a fuoco": gli elementi entrano passando da sfocati a nitidi
   ========================================================================== */
.js [data-focus] {
  opacity: 0;
  filter: blur(12px);
  translate: 0 22px;
  transition:
    opacity 1s var(--ease-out) var(--d, 0ms),
    filter 1.1s var(--ease-out) var(--d, 0ms),
    translate 1.2s var(--ease-out) var(--d, 0ms);
}
.js [data-focus].is-in { opacity: 1; filter: none; translate: none; }

.js [data-split="scroll"] .w {
  opacity: 0; filter: blur(14px); translate: 0 .25em;
  transition:
    opacity 1s var(--ease-out) calc(var(--i) * 80ms),
    filter 1.1s var(--ease-out) calc(var(--i) * 80ms),
    translate 1.2s var(--ease-out) calc(var(--i) * 80ms);
}
.js [data-split="scroll"].is-in .w { opacity: 1; filter: none; translate: none; }

/* Titoli di sezione */
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 1.35rem + 3.6vw, 4.6rem);
  line-height: 1.03; letter-spacing: -.02em;
  font-variation-settings: "opsz" 80;
  text-wrap: balance;
}
.lead { max-width: 44ch; color: var(--fumo); font-size: 1.08rem; font-weight: 300; }
.kicker {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 2.2rem;
  font: 500 .98rem/1 var(--sans); color: var(--ottone-2);
}
.kicker::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--ottone);
  box-shadow: inset 0 0 0 3px var(--noce), inset 0 0 0 8px rgba(201, 164, 92, .45);
}

/* ---------- Chi siamo ---------- */
.about {
  position: relative;
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--noce) 0%, var(--noce-2) 100%);
}
.manifesto {
  max-width: 1100px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.95rem, 1.05rem + 3.3vw, 4.2rem);
  line-height: 1.16; letter-spacing: -.015em;
  font-variation-settings: "opsz" 72;
  text-wrap: pretty;
}
.about__lead { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) {
  .about__lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: clamp(2.5rem, 6vw, 5.5rem); }
}
.about__photo { margin: 0; }
.about__photo img {
  width: 100%; height: auto;
  border-radius: 3px;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(201, 164, 92, .28),
    0 0 0 8px var(--noce-2),
    0 40px 70px -34px rgba(0, 0, 0, .95);
}

.mw { display: inline-block; }
.js .manifesto.is-split .mw {
  opacity: .14; filter: blur(3.5px);
  transition: opacity .7s ease, filter .7s ease;
}
.js .manifesto.is-split .mw.on { opacity: 1; filter: none; }

.pillars { display: grid; gap: 3rem; margin-top: clamp(4rem, 8vw, 7.5rem); }
.pillar { position: relative; padding-top: 2.2rem; border-top: 1px solid var(--line-dark); }
.pillar::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--ottone), rgba(201, 164, 92, 0));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.6s var(--ease-in-out) calc(var(--d, 0ms) + 200ms);
}
.pillar.is-in::before { transform: scaleX(1); }
.pillar__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  color: var(--ottone-2);
  border: 1px solid rgba(201, 164, 92, .35);
  background: radial-gradient(circle at 30% 25%, rgba(226, 198, 144, .16), transparent 62%);
  transition: border-color .3s ease, background-color .3s ease;
}
.pillar__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.js .pillar__icon svg * {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease-in-out) calc(var(--d, 0ms) + 450ms);
}
.pillar.is-in .pillar__icon svg * { stroke-dashoffset: 0; }
.pillar h3 {
  margin-top: 1.6rem;
  font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.15;
  font-variation-settings: "opsz" 40;
}
.pillar p { max-width: 34ch; margin-top: .8rem; color: var(--fumo); font-weight: 300; }
@media (hover: hover) and (pointer: fine) {
  .pillar:hover .pillar__icon { border-color: var(--ottone); background-color: rgba(201, 164, 92, .08); }
}
@media (min-width: 860px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* ==========================================================================
   Servizi: ottotipo
   ========================================================================== */
.services { position: relative; padding-top: var(--section-y); background: var(--noce-2); }
.section-head { display: grid; gap: 1.2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
@media (min-width: 960px) {
  .section-head { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 4rem; }
}
.services__grid { display: grid; gap: 3rem; }
@media (min-width: 960px) {
  .services__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(3rem, 6vw, 6.5rem); }
}

/* Pannello luminoso */
.chart {
  position: relative;
  margin: 11px;
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2rem);
  border-radius: 4px;
  color: var(--inchiostro);
  background: radial-gradient(120% 90% at 50% 0%, #fcf9f3 0%, var(--travertino) 55%, var(--travertino-2) 100%);
  box-shadow:
    0 0 0 10px var(--noce-3),
    0 0 0 11px rgba(201, 164, 92, .4),
    0 0 90px -10px rgba(226, 198, 144, .28),
    0 50px 90px -30px rgba(0, 0, 0, .85);
}
.js .chart::before {
  /* il pannello si accende quando entra in vista */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: #2a1f18;
  opacity: .9;
}
.js .chart.is-in::before { animation: power-on 1.6s ease-out .45s forwards; }
@keyframes power-on {
  0% { opacity: .9; }
  30% { opacity: .45; }
  40% { opacity: .7; }
  100% { opacity: 0; }
}

.chart__board {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: clamp(.3rem, 1.2vw, .8rem);
}
.chart__row {
  position: relative;
  display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center;
  width: 100%; padding: .4rem 0; margin: 0;
  border: 0; border-radius: 4px; background: none;
  color: var(--inchiostro);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .55s var(--ease-out), opacity .55s var(--ease-out);
}
.chart__row::after {
  content: ""; justify-self: end;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(27, 18, 14, .35);
  transition: background-color .3s ease, border-color .3s ease, scale .4s var(--ease-out);
}
.chart__row[aria-selected="true"]::after { background: var(--ottone-3); border-color: var(--ottone-3); scale: 1.3; }
.chart__row[aria-selected="false"] { filter: blur(2.4px); opacity: .45; }
.chart__row:focus-visible { filter: none; opacity: 1; outline-offset: 2px; outline-color: var(--ottone-3); }
.chart__row:active .chart__letters { scale: .98; }
@media (hover: hover) and (pointer: fine) {
  .chart__row:hover { filter: none; opacity: 1; }
}
.chart__acuity {
  justify-self: start;
  font-size: .72rem; font-weight: 500; line-height: 1;
  color: var(--inchiostro-2);
  font-variant-numeric: tabular-nums;
}
.chart__letters {
  position: relative; justify-self: center;
  padding-left: .14em;
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--s) * .28rem);
  font-size: calc(var(--s) * 1cqi);
  line-height: 1.08; letter-spacing: .14em;
  white-space: nowrap;
  transition: scale .16s var(--ease-out);
}
.chart__letters::after {
  content: ""; position: absolute; left: .14em; right: .14em; bottom: -.08em;
  height: max(2px, .04em);
  background: var(--ottone-3);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease-out);
}
.chart__row[aria-selected="true"] .chart__letters::after { transform: scaleX(1); }

.chart__duo {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 250px; margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  overflow: hidden; border-radius: 2px;
}
.chart__duo span {
  display: grid; place-items: center; padding: .45rem 0;
  font-size: .95rem; font-weight: 500; letter-spacing: .32em; color: #0d0907;
}
.chart__duo span:first-child { background: var(--rosso); }
.chart__duo span:last-child { background: var(--verde); }
.chart__fine { margin-top: .9rem; text-align: center; font-size: .74rem; line-height: 1.4; color: var(--inchiostro-2); }

/* Pannelli descrittivi */
.panels { display: grid; }
.panel {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0; visibility: hidden;
  filter: blur(10px); translate: 0 14px;
  transition: opacity .25s ease, filter .25s ease, translate .25s ease, visibility 0s linear .25s;
}
.panel.is-active {
  opacity: 1; visibility: visible; filter: none; translate: none;
  transition:
    opacity .6s var(--ease-out) .12s,
    filter .7s var(--ease-out) .12s,
    translate .8s var(--ease-out) .12s,
    visibility 0s;
}
.panel:focus-visible { outline-offset: 12px; }
.panel__photo {
  width: clamp(160px, 22vw, 260px);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 1.8rem;
  border-radius: 3px;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(201, 164, 92, .3),
    0 0 0 7px var(--noce),
    0 30px 60px -28px rgba(0, 0, 0, .95);
  opacity: 0; filter: blur(8px); scale: 1.05;
  transition: opacity .6s var(--ease-out), filter .8s var(--ease-out), scale 1s var(--ease-out);
}
.panel.is-active .panel__photo {
  opacity: 1; filter: none; scale: 1;
  transition-delay: .2s;
}
.panel__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.6rem); line-height: 1.04;
  font-variation-settings: "opsz" 72;
}
.panel p { max-width: 36ch; margin-top: 1rem; color: var(--fumo); font-size: 1.1rem; font-weight: 300; }
.panel .link { margin-top: 1.8rem; }

/* ---------- Marchi: nastro continuo ---------- */
.brands {
  margin-top: var(--section-y);
  padding-block: 2.4rem 2.8rem;
  border-block: 1px solid var(--line-dark);
  overflow: hidden;
}
.brands__caption { margin-bottom: 1.1rem; font-size: .92rem; color: var(--fumo); }
.marquee {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; flex: none; animation: marquee 40s linear infinite; }
.marquee__group { display: flex; flex: none; align-items: center; }
.marquee span {
  padding-inline: clamp(1.2rem, 2.6vw, 2.6rem);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5.6rem); line-height: 1.15;
  font-variation-settings: "opsz" 96;
  white-space: nowrap;
}
.marquee .marquee__more { font-style: italic; color: var(--fumo); }
.marquee i {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--ottone);
  box-shadow: inset 0 0 0 4px var(--noce-2), inset 0 0 0 9px rgba(201, 164, 92, .5);
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}

/* ==========================================================================
   Recensioni
   ========================================================================== */
.reviews { position: relative; padding-block: var(--section-y); background: var(--noce); }
.reviews__grid { display: grid; gap: 3.5rem; }
@media (min-width: 960px) {
  .reviews__grid { grid-template-columns: .7fr 1.3fr; align-items: start; gap: clamp(3rem, 7vw, 8rem); }
  .score { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.score__num {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(6rem, 3.5rem + 9vw, 12rem); line-height: .85; letter-spacing: -.04em;
  font-variation-settings: "opsz" 96;
}
.stars { display: flex; gap: .4rem; margin-top: 1.4rem; color: var(--ottone); }
.stars .icon { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.js .stars .icon {
  opacity: 0; scale: .6; rotate: -35deg;
  transition:
    opacity .4s ease calc(.5s + var(--i) * 110ms),
    scale .7s cubic-bezier(.34, 1.56, .64, 1) calc(.5s + var(--i) * 110ms),
    rotate .8s var(--ease-out) calc(.5s + var(--i) * 110ms);
}
.score.is-in .stars .icon { opacity: 1; scale: 1; rotate: 0deg; }
.score__label { margin-top: 1rem; color: var(--fumo); }
.score .link { margin-top: 1.4rem; }

.quotes .h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.quote { position: relative; padding-top: 2rem; border-top: 1px solid var(--line-dark); }
.quote p {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); line-height: 1.3;
  font-variation-settings: "opsz" 30;
  text-wrap: pretty;
}
.quote p::before { content: "“"; }
.quote p::after { content: "”"; }
.quote--lg { padding-top: 2.6rem; }
.quote--lg p { max-width: 24ch; font-size: clamp(1.9rem, 1.15rem + 2.5vw, 3.3rem); line-height: 1.16; }
.quote figcaption {
  display: flex; align-items: center; flex-wrap: wrap; gap: .8rem;
  margin-top: 1.4rem;
  font-size: .95rem; font-weight: 500;
}
.quote figcaption::before { content: ""; width: 28px; height: 1px; background: var(--ottone); }
.quote figcaption span { color: var(--fumo-2); font-weight: 400; }
.quotes__pair { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 700px) { .quotes__pair { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* ==========================================================================
   Dove siamo + orari
   ========================================================================== */
.visit { padding-bottom: var(--section-y); background: var(--noce); }
.visit__grid { display: grid; gap: 4rem; }
@media (min-width: 1000px) {
  .visit__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(3rem, 6vw, 6.5rem); }
}
.visit__place {
  display: grid; align-content: start;
  border-radius: 6px; overflow: hidden;
  background: var(--noce-2);
  box-shadow: 0 0 0 1px var(--line-dark), 0 50px 90px -40px rgba(0, 0, 0, .9);
}
.visit__photo { position: relative; }
.visit__photo img {
  display: block;
  width: 100%; height: auto;      /* la vetrina si vede intera, senza tagli */
}
.visit__photo::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 28%;
  background: linear-gradient(0deg, var(--noce-2) 8%, rgba(34, 23, 15, 0) 100%);
  pointer-events: none;
}
.visit__card { padding: 0 clamp(1.6rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); margin-top: -1.5rem; position: relative; }
.visit__card .h2 { max-width: 12ch; font-size: clamp(2.3rem, 1.4rem + 3vw, 3.8rem); }
.visit address { display: grid; gap: 1.2rem; margin-top: 2rem; color: var(--fumo); }
.visit__line { display: flex; align-items: flex-start; gap: 1rem; }
.visit__line .icon { margin-top: .3rem; color: var(--ottone); }
.visit__line strong { display: block; color: var(--panna); font-weight: 500; }
.visit__line a {
  color: var(--panna);
  text-decoration: underline; text-decoration-color: rgba(201, 164, 92, .5);
  text-underline-offset: 4px;
  transition: text-decoration-color .25s ease;
}
.visit__line a:hover { text-decoration-color: var(--ottone); }
.visit__card .btn { margin-top: 2.2rem; }

.hours__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); line-height: 1.1;
  font-variation-settings: "opsz" 60;
}
.status {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 1.2rem; padding: .45rem 1rem .45rem .85rem;
  border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: .92rem; color: var(--fumo);
  transition: color .4s ease, border-color .4s ease;
}
.status__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--fumo-2); }
.status.is-open { color: var(--panna); border-color: rgba(127, 192, 142, .35); }
.status.is-open .status__dot { background: #7fc08e; }
.status.is-open .status__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #7fc08e;
  animation: pulse 2.2s var(--ease-out) infinite;
}
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

.timeline { margin-top: 2.6rem; }
.timeline__bar {
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(244, 237, 227, .06);
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.timeline__seg {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--from) / 11 * 100%);
  width: calc((var(--to) - var(--from)) / 11 * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ottone-3), var(--ottone-2));
  transform-origin: 0 50%;
  transition: opacity .4s ease;
}
.js .timeline__seg { transform: scaleX(0); transition: transform 1.4s var(--ease-in-out) .5s, opacity .4s ease; }
.js .timeline__seg:nth-child(2) { transition-delay: .85s, 0s; }
.hours.is-in .timeline__seg { transform: scaleX(1); }
.timeline.is-off .timeline__seg { opacity: .28; }
.timeline__now {
  position: absolute; top: 50%; left: 0;
  width: 2px; height: 26px; margin: -13px 0 0 -1px;
  border-radius: 2px;
  background: var(--panna);
  box-shadow: 0 0 0 3px var(--noce);
  opacity: 0;
  transition: opacity .6s ease 1.8s;
}
.timeline__now::before {
  content: "adesso"; position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0;
  font-size: .72rem; color: var(--panna); white-space: nowrap;
}
.hours.is-in .timeline.has-now .timeline__now, html:not(.js) .timeline.has-now .timeline__now { opacity: 1; }
.timeline__scale {
  position: relative; height: 1.2rem; margin-top: .7rem;
  font-size: .74rem; line-height: 1; color: var(--fumo-2);
  font-variant-numeric: tabular-nums;
}
.timeline__scale span { position: absolute; top: 0; translate: -50% 0; }
.timeline__scale span:nth-child(1) { left: 0; translate: 0 0; }
.timeline__scale span:nth-child(2) { left: 27.273%; }
.timeline__scale span:nth-child(3) { left: 54.545%; }
.timeline__scale span:nth-child(4) { left: 81.818%; }
.timeline__scale span:nth-child(5) { left: 100%; translate: -100% 0; }

.week { margin-top: 2rem; border-top: 1px solid var(--line-dark); }
.week li {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem 1rem;
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--line-dark);
  font-size: .97rem;
}
.week li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--ottone);
  transform: scaleY(0);
  transition: transform .6s var(--ease-out) 1s;
}
.week li span:first-child { font-weight: 500; }
.week li span:last-child { color: var(--fumo); font-variant-numeric: tabular-nums; }
.week li.is-closed span:last-child { color: var(--ottone-2); }
.week li.is-today { background: linear-gradient(90deg, rgba(201, 164, 92, .12), rgba(201, 164, 92, 0) 80%); }
.week li.is-today::before { transform: scaleY(1); }
.week li.is-today span:first-child::after {
  content: "oggi";
  margin-left: .6rem; padding: .18rem .55rem;
  border-radius: 999px;
  background: rgba(201, 164, 92, .16);
  color: var(--ottone-2);
  font-size: .72rem; font-weight: 500;
  vertical-align: .12em;
}
.js .week li {
  opacity: 0; translate: 0 10px;
  transition:
    opacity .7s var(--ease-out) calc(.35s + var(--i, 0) * 55ms),
    translate .8s var(--ease-out) calc(.35s + var(--i, 0) * 55ms);
}
.hours.is-in .week li { opacity: 1; translate: none; }
.hours__note { max-width: 48ch; margin-top: 1.4rem; font-size: .88rem; color: var(--fumo-2); }

/* ==========================================================================
   Invito finale
   ========================================================================== */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(7rem, 14vw, 12rem);
  text-align: center;
  border-top: 1px solid var(--line-dark);
  background:
    radial-gradient(circle closest-side at 50% 50%, rgba(201, 164, 92, .15), transparent 100%),
    var(--noce-2);
}
.cta__ring {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(86vw, 640px); height: auto; aspect-ratio: 1; max-height: 84%;
  translate: -50% -50%;
  fill: none; overflow: visible;
  will-change: rotate;
}
.cta__ring-a { stroke: rgba(201, 164, 92, .35); stroke-width: 1; }
.cta__ring-b { stroke: rgba(201, 164, 92, .3); stroke-width: 8; stroke-dasharray: 1 9.6; }
.cta__ring-c { stroke: rgba(244, 237, 227, .1); stroke-width: 1; }
.js .cta__ring-a, .js .cta__ring-c {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s var(--ease-in-out);
}
.js .cta__ring-c { transition-delay: .35s; }
.js .cta__ring-b { opacity: 0; transition: opacity 1.6s ease .6s; }
.cta.is-in .cta__ring-a, .cta.is-in .cta__ring-c { stroke-dashoffset: 0; }
.cta.is-in .cta__ring-b { opacity: 1; }
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta__title {
  max-width: 13ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 1.3rem + 6.2vw, 7.2rem); line-height: .98; letter-spacing: -.025em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.cta__lead { max-width: 44ch; margin-top: 1.6rem; color: var(--fumo); font-size: 1.1rem; font-weight: 300; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.4rem; }

/* ==========================================================================
   Footer e barra di chiamata mobile
   ========================================================================== */
.footer {
  padding-block: 4.5rem calc(3rem + 88px + env(safe-area-inset-bottom));
  background: #140d0a;
  color: var(--fumo);
  border-top: 1px solid var(--line-dark);
}
.footer__grid { display: grid; gap: 2.6rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); }
.footer__brand { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--panna); font-variation-settings: "opsz" 48; }
.footer__text { max-width: 32ch; margin-top: 1rem; font-size: .95rem; line-height: 1.7; }
.footer__title { font: 500 .95rem/1 var(--sans); color: var(--ottone-2); }
.footer a { color: var(--panna); text-decoration: none; transition: color .25s ease; }
.footer a:hover { color: var(--ottone-2); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tags li { padding: .4rem .85rem; border: 1px solid var(--line-dark); border-radius: 999px; font-size: .82rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; font-size: .85rem; }
.footer__top {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1.15rem;      /* bersaglio comodo da toccare col dito */
  border: 1px solid var(--line-dark); border-radius: 999px;
  transition: border-color .25s ease, scale .16s var(--ease-out);
}
.footer__top .icon { width: 1em; height: 1em; }
.footer__top:active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  .footer__top:hover { border-color: var(--ottone); }
}
@media (min-width: 640px) { .footer { padding-bottom: 2rem; } }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.callbar {
  position: fixed; inset: auto 0 0; z-index: 80;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(27, 18, 14, .84);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-dark);
  translate: 0 110%;
  transition: translate .5s var(--ease-drawer);
}
.callbar.is-visible { translate: none; }
.callbar .btn { width: 100%; }
.menu-open .callbar { translate: 0 110%; }
@media (min-width: 640px) { .callbar { display: none; } }

/* ==========================================================================
   Movimento ridotto: meno e più delicato, non zero
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__media,
  .js .intro,
  .js [data-split="intro"] .w { animation: fade-in .6s ease backwards; }
  .js [data-focus],
  .js [data-split="scroll"] .w { filter: none; translate: none; transition: opacity .6s ease; }
  .js .manifesto.is-split .mw { filter: none; opacity: 1; }
  .lens-rim { scale: 1; }
  .marquee__track,
  .hero__hint-ring::after,
  .status.is-open .status__dot::after { animation: none; }
  .js .chart.is-in::before { animation: fade-out .4s ease forwards; }
  .panel, .menu__link, .menu__foot { filter: none; translate: none; }
  .panel__photo { filter: none; scale: 1; }
  .menu, .menu.is-open { clip-path: none; transition: opacity .3s ease, visibility 0s linear .3s; }
  .menu { opacity: 0; }
  .menu.is-open { opacity: 1; transition: opacity .3s ease, visibility 0s; }
  .js .timeline__seg { transform: none; }
  .js .stars .icon { scale: 1; rotate: 0deg; }
  .js .week li { translate: none; }
  .js .cta__ring-a, .js .cta__ring-c { stroke-dashoffset: 0; }
  .site-header.is-hidden { translate: none; }
  .btn, .btn--brass::after, .link::after, .link .icon { transition-property: background-color, color, border-color, box-shadow; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }


/* ==========================================================================
   Dispositivi touch: si tolgono gli effetti che costano frame durante lo
   scorrimento (sfocature di sfondo, grana, livelli sempre promossi).
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
  .site-header.is-scrolled {
    background: rgba(24, 16, 11, .93);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .chip, .btn--ghost, .callbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .chip { background: rgba(24, 16, 11, .78); }
  .btn--ghost { background: rgba(24, 16, 11, .55); }
  .callbar { background: rgba(24, 16, 11, .95); }
  .grain { display: none; }
  .hero__media { will-change: auto; }
  .js [data-focus] { filter: blur(6px); translate: 0 16px; }
  .js [data-split="scroll"] .w { filter: blur(7px); }
  .panel__photo { filter: blur(5px); }
  .visit__photo img, .about__photo img, .panel__photo { will-change: auto; }
}


/* ---------- Nastro dei marchi: si puo' spostare col dito ---------- */
.marquee {
  cursor: grab;
  touch-action: pan-y;               /* la pagina scorre in verticale, il nastro in orizzontale */
  -webkit-user-select: none; user-select: none;
}
.marquee.is-dragging { cursor: grabbing; }
.marquee__track { will-change: transform; }
.marquee span { -webkit-user-drag: none; }

/* ---------- Immagini ingrandibili ---------- */
.zoom {
  display: block; width: 100%; padding: 0;
  border: 0; background: none;
  cursor: zoom-in;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.zoom img { transition: scale .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .zoom:hover img { scale: 1.015; }
}
.zoom:focus-visible { outline: 2px solid var(--ottone); outline-offset: 6px; }

.lightbox {
  width: min(94vw, 1100px);
  max-width: 94vw;
  max-height: 92svh;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  overflow: visible;
  color: var(--panna);
}
.lightbox::backdrop {
  background: rgba(14, 9, 6, .9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox img {
  width: 100%; height: auto;
  max-height: 92svh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(201, 164, 92, .3), 0 40px 90px -30px rgba(0, 0, 0, .9);
}
.lightbox__close {
  position: absolute; top: -52px; right: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(244, 237, 227, .28); border-radius: 50%;
  background: rgba(27, 18, 14, .6);
  color: var(--panna);
  cursor: pointer;
  transition: scale .16s var(--ease-out), border-color .25s ease;
}
.lightbox__close:active { scale: .94; }
@media (hover: hover) and (pointer: fine) {
  .lightbox__close:hover { border-color: var(--ottone); color: var(--ottone-2); }
}
@media (max-width: 600px) {
  .lightbox__close { top: auto; bottom: -56px; right: 50%; translate: 50% 0; }
}
/* entrata: sfocato -> nitido, come il resto del sito */
.lightbox[open] { animation: lightbox-in .4s var(--ease-out); }
@keyframes lightbox-in {
  from { opacity: 0; filter: blur(10px); scale: .97; }
}
.lightbox[open]::backdrop { animation: backdrop-in .35s ease; }
@keyframes backdrop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: fade-in .3s ease; }
  .zoom img { transition: none; }
}