/* =====================================================================
   FRESCO GELATERIE ARTIGIANALI — Design System
   Static multipage · GSAP scrub · sage/aqua palette
   Sections: 1.Tokens 2.Reset 3.Header/Nav 4.Buttons 5.Hero
   6.Sections 7.Home 8.Storia 9.Prodotti/Gusti 10.Gallery
   11.Contatti 12.Footer 13.Reveal/Anim 14.Page transition 15.Responsive
   ===================================================================== */

/* -------------------- 1. TOKENS -------------------- */
:root {
  --sage: #94aa92;
  --sage-dark: #6f8a6c;
  --aqua: #61b8c7;
  --aqua-soft: #8ed6df;
  --black: #030303;
  --white: #ffffff;
  --paper: #f7f8f4;
  --cream: #eef1e9;
  --ink-soft: #4b4f48;
  --line: rgba(3, 3, 3, 0.12);
  --shadow: 0 24px 70px rgba(3, 3, 3, 0.12);
  --shadow-soft: 0 12px 40px rgba(3, 3, 3, 0.06);
  --radius: 8px;
  --radius-lg: 22px;
  --container: min(1160px, calc(100vw - 40px));
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------- 2. RESET -------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* Lenis owns scrolling when active */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.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;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--aqua);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* -------------------- 3. HEADER / NAV -------------------- */
.site-header {
  position: fixed;
  z-index: 40;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: var(--container);
  margin: 18px auto 0;
  min-height: 92px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(3, 3, 3, 0.1);
  backdrop-filter: blur(18px);
  transition: transform 220ms var(--ease-out), background 220ms ease, min-height 220ms ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  min-height: 76px;
  transform: translateY(-4px);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.brand img {
  display: block;
  width: clamp(96px, 10vw, 132px);
  height: 72px;
  object-fit: contain;
  object-position: left center;
  transition: height 220ms ease;
}
.site-header.is-scrolled .brand img { height: 60px; }

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.site-nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 180ms ease;
}
.site-nav a.is-cursor-active { color: var(--white); }
.site-nav a[aria-current="page"] { color: var(--aqua); }
.site-nav a[aria-current="page"].is-cursor-active { color: var(--white); }

.nav-cursor {
  position: absolute;
  z-index: 0;
  top: 50%; left: 0;
  width: 0; height: 42px;
  border-radius: 999px;
  background: var(--black);
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  transition: width 260ms var(--ease-out), transform 260ms var(--ease-out), opacity 160ms ease;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle span:not(.sr-only) {
  display: block;
  width: 18px; height: 2px;
  margin: 4px auto;
  background: var(--black);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------- 4. BUTTONS -------------------- */
.nav-cta, .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--black);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.button::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: skewX(-18deg);
  transition: left 560ms var(--ease-out);
}
.button:hover, .button:focus-visible {
  box-shadow: 0 18px 42px rgba(3, 3, 3, 0.28);
  outline: none;
  transform: translateY(-6px) scale(1.03);
}
.button:hover::after, .button:focus-visible::after { left: 118%; }
.button.primary { background: var(--aqua); color: var(--black); }
.button.primary:hover, .button.primary:focus-visible { background: var(--aqua-soft); }
.button.ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.72);
  color: var(--white);
}
.button.ghost:hover, .button.ghost:focus-visible {
  background: rgba(97, 184, 199, 0.22);
  border-color: var(--white);
}
.button.dark { background: var(--black); color: var(--white); }
.button.dark:hover, .button.dark:focus-visible { background: #1a1a1a; }
.nav-cta { background: var(--aqua); }

.text-link {
  width: fit-content;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--aqua);
  transition: text-underline-offset 180ms ease;
}
.text-link:hover { text-underline-offset: 9px; }

/* -------------------- 5. HERO (scrub) -------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: radial-gradient(120% 120% at 70% 10%, #10201f 0%, #050807 60%, #030303 100%);
  color: var(--white);
}
/* animated conic swirl behind everything */
.hero-swirl {
  position: absolute;
  z-index: 0;
  top: 50%; left: 62%;
  width: 78vmax; height: 78vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(97,184,199,0.00), rgba(97,184,199,0.22),
    rgba(148,170,146,0.10), rgba(97,184,199,0.30),
    rgba(148,170,146,0.06), rgba(97,184,199,0.00));
  border-radius: 50%;
  filter: blur(28px);
  mask: radial-gradient(closest-side, transparent 26%, #000 34%, #000 62%, transparent 72%);
  -webkit-mask: radial-gradient(closest-side, transparent 26%, #000 34%, #000 62%, transparent 72%);
  opacity: 0.9;
  animation: heroSpin 34s linear infinite;
  will-change: transform;
}
@keyframes heroSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* frame-sequence canvas (rotating gelato) */
.hero-gelato {
  position: absolute;
  z-index: 1;
  top: 50%; left: 64%;
  width: min(52vw, 620px);
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* travelling gelato: detaches from the hero and scrolls the whole page */
.hero-gelato.is-travel {
  position: fixed;
  z-index: 2;
  top: 0; left: 0;
  will-change: transform, opacity;
}
/* Occluding sections: the gelato (z-index 2) scrolls BEHIND these at full opacity,
   so it is only ever visible over the hero and the "Il nostro gelato" (.feature) bg.
   Opaque background is required so nothing shows through. */
.intro, .stats, .products, .gallery, .cta-band, .site-footer-full {
  position: relative;
  z-index: 3;
}
/* gallery / cta / footer are already full-width and opaque.
   intro / stats / products are container-width, so give them a full-bleed opaque
   backdrop — otherwise the gelato shows through the side gutters (body background). */
.intro::before, .stats::before, .products::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  z-index: -1;
  pointer-events: none;
}
.hero-gelato canvas,
.hero-gelato img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 44px 64px rgba(0, 0, 0, 0.6));
}
.hero-glow {
  position: absolute;
  z-index: 0;
  top: 50%; left: 64%;
  width: 40vmax; height: 40vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(97,184,199,0.30), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(3, 3, 3, 0.80), rgba(3, 3, 3, 0.42) 50%, rgba(3, 3, 3, 0.62)),
    linear-gradient(180deg, rgba(3, 3, 3, 0.18), rgba(3, 3, 3, 0.60)),
    url("../assets/hero-swirl-bg.jpg") center / cover no-repeat;
  transform: scale(1.04);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: var(--container);
  margin: 0 auto;
  padding: 128px 0 40px;
}
.hero h1 {
  margin: 0;
  max-width: 720px;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 0.94;
  font-size: clamp(52px, 7.4vw, 96px);
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }
.hero p:not(.eyebrow) {
  max-width: 520px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.scroll-cue span {
  width: 1px; height: 40px;
  background: linear-gradient(rgba(255,255,255,0.7), transparent);
  animation: cueDrop 1.8s var(--ease-out) infinite;
}
@keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* dock */
.hero-dock {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  width: var(--container);
  max-width: calc(100vw - 32px);
  margin: 0 auto 22px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  box-shadow: 0 24px 70px rgba(3, 3, 3, 0.28);
  backdrop-filter: blur(18px);
}
.dock-item {
  display: grid;
  grid-template-columns: 40px max-content;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 16px 7px 8px;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transform-origin: bottom center;
  transition: background 200ms ease, color 200ms ease, transform 220ms var(--ease-out);
}
.dock-item:hover, .dock-item:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  outline: none;
  transform: translateY(-10px) scale(1.12);
}
.dock-item:hover + .dock-item,
.dock-item:has(+ .dock-item:hover) { transform: translateY(-4px) scale(1.04); }
.dock-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--aqua);
  color: var(--black);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 800;
}

/* -------------------- 6. SECTIONS -------------------- */
.section {
  width: var(--container);
  margin: 0 auto;
  padding: 112px 0;
}
.section-copy {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 52px;
}
.section h2, .page-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 0.96;
  font-size: clamp(38px, 5vw, 74px);
}
.lead { color: var(--ink-soft); font-size: 18px; max-width: 60ch; }

/* generic page hero (inner pages) */
.page-head {
  position: relative;
  padding: 168px 0 64px;
  background: radial-gradient(120% 140% at 80% 0%, #10201f, #050807 70%);
  color: var(--white);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 46vmax; height: 46vmax;
  background: conic-gradient(from 0deg, transparent, rgba(97,184,199,0.28), transparent 60%);
  border-radius: 50%;
  filter: blur(30px);
  animation: heroSpin 40s linear infinite;
}
.page-head .inner { position: relative; width: var(--container); margin: 0 auto; }
.page-head .eyebrow { color: var(--aqua); }
.page-head p { max-width: 56ch; margin: 18px 0 0; color: rgba(255,255,255,0.82); font-size: 18px; }
.breadcrumb { display: flex; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--aqua); }

/* -------------------- 7. HOME sections -------------------- */
.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.intro-card {
  position: relative;
  min-height: 260px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 220ms var(--ease-out), border-color 220ms ease, box-shadow 220ms ease;
}
.intro-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--aqua);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: bottom;
  transition: opacity 220ms ease, transform 220ms var(--ease-out);
}
.intro-card:hover {
  border-color: rgba(97, 184, 199, 0.5);
  box-shadow: 0 22px 58px rgba(3, 3, 3, 0.12);
  transform: translateY(-10px);
}
.intro-card:hover::before { opacity: 1; transform: scaleY(1); }
.intro-card span {
  display: inline-block;
  color: var(--aqua);
  font-weight: 800;
  transition: transform 220ms ease, color 220ms ease;
}
.intro-card:hover span { color: var(--sage); transform: translateX(6px); }
.intro-card h3, .contact h3 {
  margin: 44px 0 12px;
  font-family: var(--serif);
  font-size: 28px;
}
.intro-card p, .feature-copy p, .contact-panel p { color: var(--ink-soft); }

.feature {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 0;
  padding: 0;
  background: var(--sage);
  overflow: hidden;
}
.feature.reverse { grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); }
.feature.reverse .feature-image { order: 2; }
.feature-image { min-height: 620px; overflow: hidden; }
.feature-image img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px max(40px, calc((100vw - 1160px) / 2)) 70px 70px;
  position: relative;
  z-index: 3; /* keep text above the travelling gelato */
}
.feature.reverse .feature-copy { padding: 70px 70px 70px max(40px, calc((100vw - 1160px) / 2)); }
.feature-copy .eyebrow { color: var(--white); }
.feature-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(36px, 4.6vw, 68px); line-height: 1; }
.feature-copy p { max-width: 560px; margin: 24px 0; color: rgba(3, 3, 3, 0.72); font-size: 18px; }

/* stat band */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: var(--container);
  margin: 0 auto;
  padding: 80px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat { text-align: center; }
.stat .num {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
  color: var(--black);
}
.stat .num sup { color: var(--aqua); font-size: 0.5em; }
.stat .label { margin-top: 10px; color: var(--ink-soft); font-size: 14px; letter-spacing: 0.04em; }

/* -------------------- 8. STORIA (timeline) -------------------- */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 18px;
  width: 2px;
  background: linear-gradient(var(--aqua), var(--sage));
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 26px;
  padding: 26px 0;
}
.timeline-item .dot {
  position: relative;
  z-index: 1;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--aqua);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 800;
  color: var(--aqua);
}
.timeline-item .year { font-family: var(--serif); font-size: 22px; margin: 0 0 6px; }
.timeline-item p { margin: 0; color: var(--ink-soft); max-width: 60ch; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.value-card {
  padding: 30px;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.value-card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; }
.value-card p { margin: 0; color: var(--ink-soft); }

/* -------------------- 9. PRODOTTI / GUSTI -------------------- */
.product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  isolation: isolate;
  perspective: 1200px;
}
.product-card {
  position: relative;
  display: flex;
  min-height: 560px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 3, 3, 0.12);
  cursor: pointer;
  outline: none;
  transform: translateX(var(--stack-offset, 0)) rotate(var(--stack-rotate, 0deg)) scale(0.96);
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease, filter 260ms ease;
  z-index: var(--stack-index, 1);
  text-decoration: none;
}
.product-card:nth-child(1) { --stack-offset: 32px; --stack-rotate: -2deg; --stack-index: 1; }
.product-card:nth-child(2) { --stack-offset: 0; --stack-rotate: 0deg; --stack-index: 2; }
.product-card:nth-child(3) { --stack-offset: -32px; --stack-rotate: 2deg; --stack-index: 1; }
.product-list:hover .product-card,
.product-list:focus-within .product-card { filter: saturate(0.82) brightness(0.96); }
.product-card:hover, .product-card:focus-visible {
  z-index: 5;
  box-shadow: 0 28px 72px rgba(3, 3, 3, 0.22);
  filter: saturate(1) brightness(1);
  transform: translateY(-22px) rotate(0deg) scale(1.03);
}
.product-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}
.product-card:hover img, .product-card:focus-visible img { transform: scale(1.06); }
.product-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3, 3, 3, 0.03), rgba(3, 3, 3, 0.78));
}
.product-card > div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 34px;
  color: var(--white);
}
.product-card h3 {
  margin: 0 0 12px;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 0.95;
}
.product-card p { max-width: 360px; margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 17px; }

/* gusti filters */
.gusti-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 40px;
}
.chip {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms var(--ease-out);
}
.chip:hover { transform: translateY(-2px); border-color: var(--aqua); }
.chip.is-active { background: var(--black); color: var(--white); border-color: var(--black); }

/* gusti grid */
.gusti-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.gusto-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease;
}
.gusto-card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(3,3,3,0.16); }
.gusto-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.gusto-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.gusto-card:hover .gusto-media img { transform: scale(1.07); }
.gusto-tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.92);
  color: var(--black);
  backdrop-filter: blur(6px);
}
.gusto-tag.crema { color: var(--sage-dark); }
.gusto-tag.frutta { color: var(--aqua); }
.gusto-tag.specialita { color: #b06a3a; }
.gusto-body { padding: 18px 20px 22px; }
.gusto-body h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; }
.gusto-body p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.gusto-card.is-hidden { display: none; }

/* -------------------- 10. GALLERY -------------------- */
.gallery {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--black);
}
.gallery-track { display: flex; transition: transform 520ms ease; will-change: transform; }
.gallery-slide { flex: 0 0 25%; margin: 0; }
.gallery-slide img { width: 100%; height: 34vw; min-height: 360px; max-height: 520px; object-fit: cover; }
.gallery-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  padding: 0;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(3, 3, 3, 0.18);
  border-radius: 50%;
  color: var(--black);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background 160ms ease, transform 160ms ease;
}
.gallery-arrow:hover { background: var(--aqua); transform: translateY(-50%) scale(1.04); }
.gallery-arrow-prev { left: 28px; }
.gallery-arrow-next { right: 28px; }

/* masonry gallery (gallery page) */
.masonry {
  columns: 3 260px;
  column-gap: 16px;
}
.masonry figure {
  margin: 0 0 16px;
  break-inside: avoid;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.masonry img { width: 100%; height: auto; transition: transform 600ms var(--ease-out); }
.masonry figure:hover img { transform: scale(1.05); }
.masonry figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px;
  color: var(--white);
  font-family: var(--serif);
  font-size: 18px;
  background: linear-gradient(transparent, rgba(3,3,3,0.7));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms var(--ease-out);
}
.masonry figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* marquee strip */
.marquee {
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  padding: 22px 0;
  border-block: 1px solid rgba(255,255,255,0.1);
}
.marquee-track {
  display: inline-flex;
  gap: 40px;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 26s linear infinite;
}
.marquee-track span {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 40px;
}
.marquee-track span::after { content: "•"; color: var(--aqua); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* -------------------- 11. CONTATTI -------------------- */
.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: start;
  color: var(--white);
}
.texture-zone {
  background:
    linear-gradient(rgba(247, 248, 244, 0.48), rgba(247, 248, 244, 0.48)),
    url("../assets/fresco-texture.png") center top / 683px 384px repeat,
    var(--paper);
}
.texture-zone .eyebrow { color: var(--aqua); }
.texture-zone .contact h2 { color: var(--black); }
.contact-panel { display: grid; gap: 12px; }
.location-card {
  padding: 26px;
  background: rgba(3, 3, 3, 0.82);
  color: var(--white);
  border: 1px solid rgba(148, 170, 146, 0.35);
  border-radius: var(--radius);
  backdrop-filter: blur(2px);
  transition: transform 220ms var(--ease-out), border-color 220ms ease;
}
.location-card:hover { transform: translateY(-6px); border-color: var(--aqua); }
.location-card h3 { margin: 0 0 8px; color: var(--aqua); font-family: var(--serif); font-size: 26px; }
.location-card p { margin: 0 0 10px; color: rgba(255, 255, 255, 0.72); }
.location-card strong { display: block; }
.location-card strong + strong { margin-top: 4px; }
.location-card .card-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.location-card .mini-link {
  font-size: 13px; font-weight: 800; color: var(--aqua);
  text-decoration: none; letter-spacing: 0.04em;
}
.location-card .mini-link:hover { text-decoration: underline; }

/* full contatti page layout */
.locations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.loc-full {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease;
}
.loc-full:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(3,3,3,0.14); }
.loc-full .map { aspect-ratio: 16 / 10; background: var(--cream); }
.loc-full .map iframe { width: 100%; height: 100%; border: 0; display: block; }
.loc-full .body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.loc-full h3 { margin: 0; font-family: var(--serif); font-size: 26px; color: var(--black); }
.loc-full .addr { color: var(--ink-soft); margin: 0; }
.loc-full .hours { margin: 0; font-size: 14px; color: var(--ink-soft); }
.loc-full .hours strong { color: var(--black); display: block; }
.loc-full .cta-row { margin-top: auto; padding-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }

/* contact CTA band */
.cta-band {
  text-align: center;
  padding: 96px 0;
  background: radial-gradient(120% 140% at 50% 0%, #10201f, #050807 75%);
  color: var(--white);
}
.cta-band .inner { width: var(--container); margin: 0 auto; }
.cta-band h2 { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(34px, 5vw, 64px); }
.cta-band p { margin: 0 auto 30px; max-width: 52ch; color: rgba(255,255,255,0.82); }
.cta-band .hero-actions { justify-content: center; }

/* -------------------- 12. FOOTER -------------------- */
.site-footer-full {
  background: var(--black);
  color: rgba(255, 255, 255, 0.72);
  padding: 72px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  width: var(--container);
  margin: 0 auto;
  padding-bottom: 56px;
}
.footer-grid img { width: 120px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer-grid h4 { margin: 0 0 16px; color: var(--white); font-family: var(--serif); font-size: 18px; }
.footer-grid a { display: block; text-decoration: none; padding: 5px 0; transition: color 160ms ease; }
.footer-grid a:hover { color: var(--aqua); }
.footer-grid p { margin: 0 0 14px; max-width: 34ch; }
.footer-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: var(--container);
  margin: 0 auto;
  padding: 24px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
}
.footer-bar a { text-decoration: none; }
.footer-bar a:hover { color: var(--aqua); }

/* simple footer (kept for compatibility) */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: var(--container);
  margin: 0 auto;
  padding: 28px 0 42px;
  border-top: 1px solid rgba(3, 3, 3, 0.14);
  color: rgba(3, 3, 3, 0.68);
}
.site-footer p { margin: 0; }

/* -------------------- 13. REVEAL / ANIM -------------------- */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-visible { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); }

/* JS-off safety: show everything if no reveal engine ran */
.no-js [data-reveal],
.no-js [data-reveal-stagger] > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hero-swirl, .page-head::before { animation: none; }
}

/* -------------------- 14. PAGE TRANSITION -------------------- */
/* Native cross-document page transitions (Chrome/Safari).
   Where unsupported (e.g. Firefox) the browser just swaps pages
   instantly via paint-holding — no black screen either way. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
/* legacy transition veil neutralised (markup kept inert) */
.page-veil { display: none !important; }

/* -------------------- 15. RESPONSIVE -------------------- */
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .locations-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --container: min(100vw - 24px, 1160px); }
  .site-header { margin-top: 10px; min-height: 78px; }
  .brand img { height: 60px; }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    display: grid;
    gap: 0;
    padding: 10px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform-origin: top;
    transform: scaleY(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
  }
  .nav-cursor { display: none; }
  .site-nav a { min-height: auto; padding: 13px 10px; }
  .site-nav a.is-cursor-active { color: inherit; }
  .site-nav.is-open { transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .nav-cta { margin-top: 6px; }

  .hero-gelato { left: 50%; top: 42%; width: min(70vw, 380px); opacity: 0.9; }
  .hero-swirl, .hero-glow { left: 50%; top: 40%; }
  .hero-content { padding: 132px 0 44px; }
  .hero p:not(.eyebrow) { font-size: 17px; }

  .intro-grid, .section-copy, .feature, .feature.reverse, .contact,
  .values-grid, .stats, .locations-grid { grid-template-columns: 1fr; }
  .feature.reverse .feature-image { order: 0; }
  .stats { gap: 34px; padding: 60px 0; }

  .hero-dock { width: var(--container); border-radius: 28px; }
  .dock-item { grid-template-columns: 36px 1fr; min-height: 50px; padding-right: 12px; }
  .dock-icon { width: 36px; height: 36px; font-size: 18px; }

  .section { padding: 76px 0; }
  .intro-card { min-height: 220px; }
  .feature-image { min-height: 430px; }
  .feature-copy, .feature.reverse .feature-copy { padding: 54px 20px 64px; }

  .product-list { grid-template-columns: 1fr; gap: 16px; perspective: none; }
  .product-card, .product-card:nth-child(1), .product-card:nth-child(2), .product-card:nth-child(3) {
    min-height: 420px; transform: none;
  }
  .product-card:hover, .product-card:focus-visible { transform: translateY(-6px); }

  .gallery-slide img { height: 92vw; min-height: 420px; }
  .gallery-slide { flex-basis: 50%; }
  .gallery-arrow { width: 46px; height: 46px; font-size: 34px; }
  .gallery-arrow-prev { left: 12px; }
  .gallery-arrow-next { right: 12px; }
  .masonry { columns: 2 200px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .hero h1 { font-size: clamp(46px, 15vw, 70px); }
  .hero-actions .button { width: 100%; }
  .hero-gelato { width: 66vw; opacity: 0.8; }
  .hero-dock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
  .dock-item {
    display: flex; flex-direction: column; gap: 5px;
    justify-content: center; min-height: 82px; padding: 8px;
    text-align: center; font-size: 13px;
  }
  .dock-item:hover, .dock-item:focus-visible,
  .dock-item:hover + .dock-item, .dock-item:has(+ .dock-item:hover) {
    transform: translateY(-4px) scale(1.03);
  }
  .section h2, .feature-copy h2, .page-head h1 { font-size: 38px; }
  .gallery-slide img { height: 116vw; }
  .gallery-slide { flex-basis: 100%; }
  .masonry { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; }
  .timeline-item { grid-template-columns: 44px 1fr; gap: 16px; }
}