/* Ficopalo — la homepage.
 *
 * Un foglio a parte perché serve solo qui: le altre pagine non lo scaricano.
 *
 * Il principio è uno: profondità. Il murale sta in fondo e scorre più lento, il
 * contenuto galleggia sopra su un foglio di carta crema, le pale di fico d'India
 * si muovono a una terza velocità. Non è decorazione fine a sé stessa — è il modo
 * di far sembrare vicino un locale che chi guarda non ha mai visto.
 */

:root { --mono-home: "JetBrains Mono", ui-monospace, Consolas, monospace; }

/* ---------------------------------------------------------------- comparsa */

@media (prefers-reduced-motion: no-preference) {
  [data-rivela] .riga > *,
  [data-rivela] blockquote {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  }
  [data-rivela].visto .riga > *,
  [data-rivela].visto blockquote { opacity: 1; transform: none; }
  [data-rivela].visto .riga > *:nth-child(2) { transition-delay: .08s; }
  [data-rivela].visto .riga > *:nth-child(3) { transition-delay: .16s; }

  [data-rivela] .piatto,
  [data-rivela] .materie li,
  [data-rivela] .nomi li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease var(--ritardo, 0ms),
                transform .6s cubic-bezier(.2,.7,.3,1) var(--ritardo, 0ms);
  }
  [data-rivela].visto .piatto,
  [data-rivela].visto .materie li,
  [data-rivela].visto .nomi li { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- copertina */

.copertina {
  position: relative;
  overflow: hidden;
  min-height: min(88vh, 780px);
  display: grid;
  align-items: center;
  isolation: isolate;
}

.copertina-sfondo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Alta almeno quanto la finestra: mentre la sezione scorre, l'immagine viene
     spinta in giu della stessa quantita per restare ferma, e quello che entra
     dal basso dev'essere ancora immagine. */
  height: max(100vh, 100%);
  z-index: -2;
  will-change: transform;
}
/* Le foto stanno una sopra l'altra, tutte a piena misura: la dissolvenza è
   solo l'opacità che si scambia, e il browser non ridisegna il layout. */
.copertina-sfondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.copertina-sfondo.alterna img {
  opacity: 0;
  animation-name: fp-copertina;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* Prima del proprio turno l'immagine sta al fotogramma zero, cioè invisibile:
     senza questo, all'apertura si vedrebbero tutte insieme. */
  animation-fill-mode: backwards;
}

/* Chi ha chiesto meno movimento vede la prima foto e basta. Una sequenza che si
   alterna da sola è esattamente ciò da cui quella preferenza vuole difendere. */
@media (prefers-reduced-motion: reduce) {
  .copertina-sfondo.alterna img { animation: none; opacity: 0; }
  .copertina-sfondo.alterna img:first-child { opacity: 1; }
}

/* Il murale è vivace e pieno di segni: senza un velo sopra non si legge niente.
   Il velo è caldo e non grigio, così i colori del muro restano i loro. */
.copertina-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    rgba(247,237,217,.96) 0%,
    rgba(247,237,217,.87) 34%,
    rgba(247,237,217,.18) 62%,
    rgba(30,78,107,.30) 100%);
}

.copertina-dentro { padding-block: clamp(3rem, 9vw, 6rem); }

.copertina-carta {
  max-width: 34rem;
  background: rgba(255, 251, 242, .84);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(224, 208, 178, .8);
  border-radius: 6px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 24px 60px -28px rgba(20, 33, 42, .45);
  will-change: transform;
}

/* Niente display qui: lo decidono .solo-chiaro e .solo-scuro in sito.css, e una
   regola come questa vincerebbe per specificita mostrando tutti e due i loghi. */
.copertina-marchio {
  width: clamp(150px, 22vw, 210px);
  height: auto;
  margin-bottom: 1.2rem;
}

.copertina h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: .7rem;
  max-width: 15ch;
}
.copertina .sommario { max-width: 40ch; }
.copertina .azioni { margin-top: 1.6rem; }

.copertina-pale {
  position: absolute;
  right: -3%;
  bottom: -14%;
  width: clamp(180px, 26vw, 320px);
  z-index: -1;
  opacity: .5;
  pointer-events: none;
  will-change: transform;
}
.copertina-pale svg { width: 100%; height: auto; display: block; }

@media (max-width: 720px) {
  .copertina-velo {
    background: linear-gradient(180deg,
      rgba(247,237,217,.93) 0%,
      rgba(247,237,217,.9) 55%,
      rgba(30,78,107,.36) 100%);
  }
  .copertina-pale { opacity: .26; }
}

/* ---------------------------------------------------------------- momenti */

.momenti { padding-block: clamp(3rem, 7vw, 5rem); }
.momenti h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-variation-settings: "wdth" 112, "wght" 760;
  margin-bottom: .6rem;
}
.momenti .sommario { margin-bottom: 2rem; }

.griglia-momenti { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.momento {
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  padding: 1.2rem 1.25rem;
  background: var(--carta);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.momento:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(20,33,42,.5); }
.momento .ore {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--smorzato);
  font-variant-numeric: tabular-nums;
}
.momento h3 { font-size: 1.2rem; font-variation-settings: "wdth" 108, "wght" 750; }
.momento p { font-size: .9rem; color: var(--smorzato); }

/* Il momento in corso è l'unico punto della pagina in cui il sito sa qualcosa
   che il visitatore non ha detto. Vale la pena mostrarlo. */
.momento.adesso {
  border-color: var(--fico);
  background: linear-gradient(180deg, rgba(222,82,39,.07), transparent 60%), var(--carta);
}
.momento .ora-adesso {
  position: absolute;
  top: -.6rem;
  right: 1rem;
  background: var(--fico);
  color: var(--carta);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .16rem .55rem;
  border-radius: 99px;
}

/* ---------------------------------------------------------------- citazione */

.citazione {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(4rem, 12vw, 8rem);
  /*color: var(--carta);*/
  text-align: center;
}
.citazione-sfondo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: max(100vh, 100%);
  z-index: -2;
  will-change: transform;
}
.citazione-sfondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.citazione::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,33,42,.74), rgba(30,78,107,.68));
}
.citazione blockquote { margin: 0; }
.citazione blockquote p {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-style: italic;
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  line-height: 1.15;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.citazione cite {
  display: block;
  margin-top: 1.4rem;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, .72);
}

/* ---------------------------------------------------------------- assaggio */

.assaggio {
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--carta);
  border-block: 1px solid var(--filo);
}
.assaggio-testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.assaggio h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-variation-settings: "wdth" 112, "wght" 760;
  margin-bottom: .5rem;
}

.griglia-assaggio { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.piatto {
  border-top: 3px solid var(--petrolio);
  padding-top: .9rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.piatto:nth-child(3n+2) { border-top-color: var(--ocra); }
.piatto:nth-child(3n+3) { border-top-color: var(--cactus); }
.piatto .categoria { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--smorzato); }
.piatto h3 { font-size: 1.12rem; font-variation-settings: "wdth" 106, "wght" 720; }
.piatto p { font-size: .87rem; color: var(--smorzato); }
.piatto .prezzo {
  margin-top: auto;
  padding-top: .5rem;
  font-weight: 700;
  color: var(--petrolio);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- fornitori */

.fornitori { padding-block: clamp(3rem, 7vw, 5rem); }
.fornitori-dentro {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.fornitori h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-variation-settings: "wdth" 112, "wght" 760;
  margin-bottom: .6rem;
}

.materie { list-style: none; margin: 0; padding: 0; }
.materie li {
  padding-block: .75rem;
  border-bottom: 1px solid var(--filo);
  font-family: var(--display);
  font-variation-settings: "wdth" 104, "wght" 600;
  font-size: clamp(1rem, 2vw, 1.18rem);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.materie li::before {
  content: "";
  width: 8px;
  height: 11px;
  flex: none;
  border-radius: 60% 60% 55% 55%;
  background: var(--cactus);
}
.materie li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- cocktail */

.cocktail {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--petrolio);
  color: var(--crema);
}
.cocktail h2 {
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
  font-variation-settings: "wdth" 114, "wght" 780;
  margin-bottom: .6rem;
  max-width: 18ch;
}
.cocktail .sommario { color: rgba(247, 237, 217, .74); margin-bottom: 2rem; }

.nomi { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.nomi li {
  counter-increment: c;
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding-block: .85rem;
  border-bottom: 1px solid rgba(247, 237, 217, .18);
}
.nomi li::before {
  content: counter(c, decimal-leading-zero);
  font-family: var(--mono-home);
  font-size: .76rem;
  color: var(--ocra);
  min-width: 2ch;
}
.nomi li span {
  font-family: var(--display);
  font-variation-settings: "wdth" 116, "wght" 700;
  font-size: clamp(1.2rem, 3.4vw, 2rem);
  letter-spacing: -.01em;
}
.nomi li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- dove */

.dove {
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--carta);
  border-top: 1px solid var(--filo);
}
.dove-dentro {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.dove h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-variation-settings: "wdth" 112, "wght" 760;
  margin-bottom: .6rem;
}
.dove .pillola { display: inline-block; margin: 1rem 0; }
.dove .distanze li { font-family: var(--display); font-variation-settings: "wdth" 102, "wght" 600; }
.dove .distanze em { font-family: var(--testo); font-variant-numeric: tabular-nums; font-size: .9rem; }