/* ============================================================
   Sezioni della home, nell'ordine della pagina.
   Animazioni: tutte dentro "prefers-reduced-motion: no-preference";
   quelle legate allo scorrimento solo dove il browser le sa fare
   (animation-timeline), altrimenti la pagina resta ferma e completa.
   ============================================================ */

/* i disegni della locandina (vedi .tratto in base.css) */
.raggi    { --disegno: url("../assets/img/raggi.webp"); }
.vespa    { --disegno: url("../assets/img/vespa.webp"); }
.cartello { --disegno: url("../assets/img/cartello.webp"); }

/* ============ HERO ============ */
.hero {
  /* quanto vino c'è a riposo: deve coincidere con RIPOSO in js/vino.js (34% di --vino-h) */
  --vino-h: clamp(220px, 34vh, 400px);
  position: relative;
  min-height: max(620px, 100dvh);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3.5rem));
  padding-bottom: calc(var(--vino-h) * .34 + clamp(1.5rem, 4vh, 3rem));
  display: grid; align-items: end;    /* tutto in basso: la foto deve arrivare fino al vino */
  overflow: hidden;
}
.raggi {
  position: absolute; top: calc(var(--header-h) - 6px); left: 0;
  width: clamp(90px, 11vw, 150px); aspect-ratio: 224 / 296;
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--s-6); align-items: center;
}
.hero__titolo {
  font-size: clamp(2.9rem, 1.3rem + 5vw, 5.5rem);
  line-height: 1.02;
  padding-bottom: .1em;               /* le code del pennello (g, q) non si tagliano */
}
.hero__titolo span { display: block; }
.hero__titolo span:nth-child(2) { padding-left: .55em; }
.hero__sotto { margin-top: var(--s-4); max-width: 34ch; font-size: 1.1875rem; color: var(--c-muted); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
/* la foto scende fin dentro il vino (che le sta sopra) */
.hero__foto {
  justify-self: end; align-self: end; width: min(100%, 420px);
  margin-bottom: calc(var(--vino-h) * -.2 - clamp(1.5rem, 4vh, 3rem));
  rotate: 2.5deg;
}

/* il vino: sopra a tutto l'hero, così quando sale copre anche la foto */
.vino {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-vino);
  height: var(--vino-h);
  pointer-events: none;
}
.vino canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vino__fermo {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 48%;           /* l'onda arriva a ~34% dell'altezza, come il vino vivo a riposo */
  fill: var(--c-vino);
}
.vino.is-vivo .vino__fermo { display: none; }
.vino__invito {
  position: absolute; left: max(var(--gutter), env(safe-area-inset-left)); bottom: clamp(14px, 3vh, 26px);
  color: var(--c-on-vino); font-size: 1.35rem; rotate: -4deg;
  opacity: 0; transition: opacity 400ms ease 1.6s;
}
.vino.is-vivo .vino__invito { opacity: .92; }
.vino.is-toccato .vino__invito,
.vino.is-pieno .vino__invito { opacity: 0; transition-delay: 0s; }

@media (max-width: 860px) {
  .hero { --vino-h: clamp(170px, 26vh, 260px); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero__titolo span:nth-child(2) { padding-left: .35em; }
  /* più piccola, al centro: così il vino si vede già nella prima schermata */
  /* affonda meno che su computer: il panino in fondo alla foto deve restare fuori dal vino */
  .hero__foto { justify-self: center; width: min(54%, 300px); rotate: 3deg; margin-bottom: calc(var(--vino-h) * -.06 - clamp(1.5rem, 4vh, 3rem)); }
  .raggi { width: 70px; opacity: .8; }
}
@media (max-width: 480px) {
  .hero__azioni .btn { flex: 1 1 auto; padding-inline: 1rem; font-size: 1rem; }
}

/* ============ LA SETTIMANA: la fascia rossa dove finisce il vino ============ */
.settimana {
  background: var(--c-vino); color: var(--c-on-vino);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
  margin-top: -1px;                   /* nessuna riga di carta tra il vino e la fascia */
}
.settimana__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; }
.settimana .pennello { color: var(--c-on-vino); }
.settimana__sotto { margin-top: var(--s-3); max-width: 38ch; color: #f6d3cf; }
.settimana__sotto a { color: inherit; }

/* "Stasera": il biglietto attaccato sopra il titolo */
.stasera {
  display: inline-grid; gap: .1rem;
  margin-bottom: var(--s-4); padding: .7rem 1.1rem .8rem;
  background: var(--c-adesivo); color: #1f1c1b;   /* il biglietto resta bianco anche col tema scuro: testo sempre scuro */
  border-radius: var(--r-foto);
  rotate: -2deg;
  box-shadow: 0 14px 26px -18px rgb(20 0 0 / .7);
}
.stasera:empty { display: none; }
.stasera__quando { font-size: .9375rem; font-weight: 600; color: #6b2421; }
.stasera__cosa { font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }

.giorni { display: grid; }
.giorno {
  position: relative;
  display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s-3);
  padding: .9rem 0;
  border-top: 1px solid rgb(251 251 248 / .22);
}
.giorno:last-child { border-bottom: 1px solid rgb(251 251 248 / .22); }
.giorno__nome {
  position: relative; align-self: start;
  font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #f6d3cf;
}
.giorno__cosa b { display: block; font-size: 1.125rem; }
.giorno__testo { display: block; color: #f6d3cf; }
.giorno.is-chiuso b { color: #f6d3cf; }
/* oggi: il cerchio fatto a mano intorno al giorno, come sulle locandine */
.giorno.is-oggi .giorno__nome { color: var(--c-on-vino); }
.cerchio {
  position: absolute; left: -.85rem; top: 50%; translate: 0 -50%;
  width: calc(100% + 1.4rem); height: 2.6rem;
  overflow: visible; fill: none; stroke: var(--c-on-vino); stroke-width: 2.6; stroke-linecap: round;
}
.domicilio-tag {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem;
  font-size: .875rem; font-weight: 600;
  padding: .1rem .55rem; border: 1.5px solid rgb(251 251 248 / .55); border-radius: 999px;
}
/* giovedì: le barre della musica dal vivo */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; margin-left: .45rem; vertical-align: -1px; }
.eq i { width: 3px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; }
.eq i:nth-child(2) { scale: 1 .55; }
.eq i:nth-child(3) { scale: 1 .8; }

@media (max-width: 860px) {
  .settimana__inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .giorno { grid-template-columns: 7.2rem 1fr; }
}

/* ============ MENÙ ============ */
.menu { padding-block: clamp(4rem, 9vw, 7rem); }
.menu__testa { display: grid; gap: var(--s-3); justify-items: start; max-width: 62ch; }
.menu__testa > p { color: var(--c-muted); }

/* "Traduci dal siciliano" */
.traduci {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--s-1); padding: .45rem .95rem;
  border: 2px dashed var(--c-accent); border-radius: 999px; background: none;
  color: var(--c-accent); font-weight: 700; font-size: .9375rem;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.traduci:active { transform: scale(.97); }
.traduci[aria-pressed="true"] { background: var(--c-accent); color: var(--c-bg); border-style: solid; }
/* le parole che cambiano lingua: sfocate per un attimo, così il cambio si vede */
[data-it] { transition: filter 160ms ease, opacity 160ms ease; }
.is-cambio { filter: blur(3px); opacity: .25; }

/* le schede */
.schede {
  display: flex; gap: var(--s-1); margin-top: var(--s-5);
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: .4rem;
  scroll-snap-type: x proximity;
}
.schede::-webkit-scrollbar { display: none; }
.schede button {
  position: relative; flex: none; scroll-snap-align: start;
  min-height: 44px; padding: .5rem .9rem;
  background: none; border: 0; border-radius: 999px;
  font-weight: 700; color: var(--c-muted); white-space: nowrap;
  transition: color 160ms ease;
}
/* la sottolineatura a pennello della scheda scelta */
.schede button::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .25rem; height: 4px;
  background: var(--c-accent); border-radius: 4px; rotate: -1.5deg;
  scale: 0 1; transform-origin: left;
  transition: scale 220ms var(--ease-out);
}
.schede button[aria-selected="true"] { color: var(--c-text); }
.schede button[aria-selected="true"]::after { scale: 1 1; }
@media (hover: hover) and (pointer: fine) {
  .schede button:hover { color: var(--c-text); }
  .traduci:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
  .traduci[aria-pressed="true"]:hover { background: var(--c-accent); }
}

.pannelli { margin-top: var(--s-4); }
.pannello { display: grid; gap: var(--s-6); align-items: start; }
.pannello + .pannello { margin-top: var(--s-6); }     /* senza JavaScript i pannelli sono tutti di fila */
.pannello:has(.pannello__foto) { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.pannello__titolo { font-family: var(--f-pennello); font-weight: 400; color: var(--c-accent); font-size: 2rem; grid-column: 1 / -1; }
.js .pannello__titolo {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.js .pannello + .pannello { margin-top: 0; }
.pannello.is-entra { animation: entra 220ms var(--ease-out); }
@keyframes entra { from { opacity: 0; translate: 0 6px; } }
.pannello__foto { rotate: 2deg; position: sticky; top: calc(var(--header-h) + 1.5rem); }

.piatti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
.pannello:has(.pannello__foto) .piatti { grid-template-columns: 1fr; }
@media (min-width: 1100px) {
  .pannello:has(.pannello__foto) .piatti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.piatto {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: .5rem;
  align-items: baseline;
  align-content: start;               /* accanto a un piatto più lungo la riga non si allunga (e i puntini restano al loro posto) */
}
.piatto--largo { grid-column: 1 / -1; }
/* i puntini del menù tra nome e prezzo */
.piatto::before {
  content: ""; grid-column: 2; grid-row: 1; align-self: end;
  margin-bottom: .42em; border-bottom: 2px dotted var(--c-line);
}
.piatto__nome { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 1.125rem; }
.piatto__prezzo { grid-column: 3; grid-row: 1; font-weight: 700; color: var(--c-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.piatto__desc { grid-column: 1 / -1; color: var(--c-muted); font-size: .9688rem; line-height: 1.5; max-width: 62ch; }
.menu__nota { margin-top: var(--s-6); font-size: .9375rem; color: var(--c-muted); max-width: 70ch; }

@media (max-width: 860px) {
  .pannello:has(.pannello__foto) { grid-template-columns: 1fr; }
  .pannello__foto { position: static; width: min(80%, 320px); justify-self: center; order: -1; }
  .piatti { grid-template-columns: 1fr; }
}

/* ============ A DOMICILIO ============ */
.domicilio { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem); overflow: hidden; }
.domicilio__testo { display: grid; gap: var(--s-3); justify-items: start; max-width: 46ch; }
.domicilio__testo .btn { margin-top: var(--s-2); }
/* la strada: una riga tratteggiata, e la Vespa che la percorre */
.strada {
  position: relative; margin-top: var(--s-5);
  height: clamp(120px, 16vw, 180px);
  container-type: inline-size;
  background: linear-gradient(90deg, var(--c-tratto) 0 60%, transparent 0) bottom 6px left / 26px 3px repeat-x;
}
.vespa {
  position: absolute; bottom: 10px; left: 62%;
  height: 100%; aspect-ratio: 246 / 260;
}

/* ============ RECENSIONI ============ */
.voci { padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--c-line); }
.voci__voto { margin-top: var(--s-2); font-size: 1.125rem; color: var(--c-muted); }
.voci__voto strong { color: var(--c-text); }
.voci__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); align-items: start; }
/* le recensioni come foglietti appoggiati sulla carta */
.voce { background: var(--c-surface); padding: var(--s-4) var(--s-4) var(--s-3); border-radius: var(--r-foto); box-shadow: var(--shadow-adesivo); rotate: -1.2deg; }
.voce:nth-child(2) { rotate: 1deg; margin-top: var(--s-6); }
.voce:nth-child(3) { rotate: -.4deg; margin-top: var(--s-3); }
.voce blockquote p { font-size: 1.0625rem; line-height: 1.55; }
.voce__chi { margin-top: var(--s-3); font-size: .9375rem; font-weight: 600; color: var(--c-muted); }
@media (max-width: 860px) {
  .voci__lista { grid-template-columns: 1fr; }
  .voce:nth-child(n) { margin-top: 0; }
}

/* ============ DOVE SIAMO ============ */
.contatti { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--c-line); }
.contatti__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.indirizzo { margin-top: var(--s-3); font-size: 1.375rem; font-weight: 700; line-height: 1.35; }
.contatti__nota { margin-top: var(--s-2); color: var(--c-muted); }
.contatti__sotto { margin-top: var(--s-5); font-size: 1.125rem; font-weight: 800; }
.orari { margin-top: var(--s-2); display: grid; max-width: 26rem; }
.orari li { display: flex; justify-content: space-between; gap: var(--s-3); padding: .45rem 0; border-bottom: 1px dotted var(--c-line); }
.orari .is-oggi { font-weight: 800; color: var(--c-accent); }
.orari .is-chiuso span:last-child { color: var(--c-muted); }
.contatti .todo { margin-top: var(--s-2); }
.contatti__azioni { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

.mappa {
  position: relative;
  display: grid; place-content: center; justify-items: center; gap: var(--s-3);
  aspect-ratio: 4 / 3; padding: var(--s-5);
  background: var(--c-surface); border-radius: var(--r-foto);
  text-align: center; color: var(--c-muted); font-size: .9375rem;
}
.mappa .cartello { width: 110px; aspect-ratio: 240 / 244; }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-foto); }
@media (max-width: 860px) {
  .contatti__inner { grid-template-columns: 1fr; }
}

/* ============ PRIVACY ============ */
.legale { max-width: 70ch; padding-block: calc(var(--header-h) + var(--s-6)) var(--s-7); }
.legale h1 { font-size: clamp(2.6rem, 2rem + 3vw, 3.75rem); }
.legale h2 { margin-top: var(--s-5); font-size: 1.25rem; font-weight: 800; }
.legale p { margin-top: var(--s-2); }
.legale a { color: var(--c-accent); text-underline-offset: 3px; }
.legale__lead { font-size: 1.1875rem; color: var(--c-muted); }
.legale__nota { margin-top: var(--s-5); font-size: .9375rem; color: var(--c-muted); }

/* ============ MOVIMENTO ============ */
@media (prefers-reduced-motion: no-preference) {
  /* all'apertura: il titolo si dipinge riga per riga, la foto si attacca */
  .hero__titolo span { animation: dipingi 900ms var(--ease-out) both; }
  .hero__titolo span:nth-child(2) { animation-delay: 140ms; }
  .hero__titolo span:nth-child(3) { animation-delay: 280ms; }
  .hero__sotto, .hero__azioni { animation: sale 500ms var(--ease-out) 520ms both; }
  .hero__foto { animation: attacca 700ms var(--ease-out) 200ms both; }

  /* giovedì: la musica suona per qualche secondo quando la lista entra nello schermo */
  .giorni.is-visibile .eq i { animation: eq 900ms ease-in-out 5 alternate; }
  .giorni.is-visibile .eq i:nth-child(2) { animation-delay: -300ms; }
  .giorni.is-visibile .eq i:nth-child(3) { animation-delay: -600ms; }

  /* il cerchio intorno a oggi si disegna quando lo vedi */
  .cerchio path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-in-out) 200ms; }
  .giorni.is-visibile .cerchio path { stroke-dashoffset: 0; }

  @supports (animation-timeline: view()) {
    /* i titoli di sezione si dipingono mentre entrano nello schermo */
    h2.pennello {
      animation: dipingi linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    /* la Vespa attraversa la strada mentre scorri */
    .vespa {
      left: 0;
      animation: corsa linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes dipingi { from { clip-path: inset(-10% 100% -20% 0); } to { clip-path: inset(-10% -2% -20% 0); } }
@keyframes sale { from { opacity: 0; translate: 0 10px; } }
@keyframes attacca { from { opacity: 0; rotate: 7deg; scale: .94; } }
@keyframes eq { from { scale: 1 .3; } to { scale: 1 1; } }
/* 100cqw = la larghezza della strada (.strada è un contenitore) */
@keyframes corsa { from { translate: -100% 0; } to { translate: 100cqw 0; } }