:root {
  --ink: #241C15;
  --paper: #F5EEDC;
  --paper-2: #E8DFCB;
  --brick: #A03324;
  --brick-dark: #7E2417;
  --gold: #C9A227;
  --night: #1A1410;
  --muted-dark: #C4B79E;
  --muted-light: #6E6152;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  overscroll-behavior: none;
}

body {
  font-family: var(--sans);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: #E3C24F; }
::selection { background: var(--brick); color: var(--paper); }

@keyframes odsHint {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(5px); }
}

/* ---------- palco ---------- */

.frame {
  --dissolve: 1100ms; /* niente style inline: era una variabile CSS impostata da App.jsx */
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  background: var(--night);
}

.stage {
  position: absolute;
  inset: 0;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--night);
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  z-index: 1;
  transition: opacity var(--dissolve, 1100ms) cubic-bezier(.33, 0, .15, 1),
              transform calc(var(--dissolve, 1100ms) * 1.35) cubic-bezier(.33, 0, .15, 1);
  will-change: opacity, transform;
}
.scene.is-past { transform: scale(1.05); }
.scene.is-active { opacity: 1; pointer-events: auto; transform: scale(1); z-index: 3; }

.scene__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene--hero .scene__img { object-position: 50% 62%; }

.scene__scrim { position: absolute; inset: 0; }
.scrim--bottom { background: linear-gradient(to bottom, rgba(26,18,12,.7) 0%, rgba(26,18,12,.25) 40%, rgba(26,18,12,.9) 100%); }
.scrim--dish { background: linear-gradient(to bottom, rgba(26,18,12,.35) 0%, rgba(26,18,12,.2) 35%, rgba(26,18,12,.92) 100%); }
.scrim--quote { background: linear-gradient(to bottom, rgba(26,18,12,.5) 0%, rgba(26,18,12,.25) 45%, rgba(26,18,12,.88) 100%); }
.scrim--flat { background: rgba(20,14,10,.78); }
.scrim--flat-strong { background: rgba(20,14,10,.8); }

/* ---------- colonne di contenuto ---------- */

.col {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.col--bottom { justify-content: flex-end; padding: 0 26px 96px; }
.col--top { justify-content: flex-start; padding: 64px 26px 96px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--dark { color: #8A7A63; }
.rule { width: 38px; height: 1px; background: var(--gold); }

/* ---------- hero ---------- */

.hero__title {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: .94;
  color: #F8F3E6;
}
.hero__title em { font-style: italic; }
.hero__lead {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #E5DAC2;
  max-width: 310px;
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.hero__hint {
  margin-top: 30px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-dark);
  animation: odsHint 2.6s ease-in-out infinite;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: none;
}
.btn--solid { background: var(--brick); color: #F8F3E6; }
.btn--solid:hover { background: var(--brick-dark); color: #F8F3E6; }
.btn--ghost { background: none; border: 1px solid rgba(232,223,203,.55); color: #F8F3E6; }
.btn--ghost:hover { background: rgba(248,243,230,.12); color: #F8F3E6; }
.btn--wide { min-height: clamp(44px, 9vh, 52px); font-size: 14px; letter-spacing: .12em; }

/* ---------- testo / piatti / citazione ---------- */

.text__title {
  margin: 18px 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 31px;
  line-height: 1.14;
  text-wrap: pretty;
}
.text__body { margin: 0 0 14px; font-size: 16px; line-height: 1.62; color: #DCCFB8; text-wrap: pretty; }
.text__body:last-child { margin-bottom: 0; }

.dish__title {
  margin: 14px 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.08;
}
.dish__desc { margin: 0; font-size: 16px; line-height: 1.55; color: #DCCFB8; max-width: 330px; text-wrap: pretty; }

.quote__line {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 27px;
  line-height: 1.3;
  color: #F8F3E6;
  text-wrap: pretty;
}
.quote__place { margin: 14px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* ---------- menù ---------- */

.scene--menu { background: var(--paper); color: var(--ink); }
.menu__photo { display: none; }
.menu__title {
  margin: clamp(4px, 1.2vh, 10px) 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 5.4vh, 30px);
  color: var(--brick);
}
.menu__hr { height: 1px; background: #D6C9AE; margin-bottom: clamp(9px, 2.6vh, 16px); }
.menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(7px, 2.1vh, 13px); }
.menu__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.menu__name { flex: 1 1 auto; min-width: 0; font-size: clamp(14px, 2.9vh, 16px); line-height: 1.3; }
.menu__desc { display: block; font-size: clamp(11px, 2.3vh, 13px); color: var(--muted-light); margin-top: 1px; }
.menu__price { font-family: var(--serif); font-size: clamp(15px, 3vh, 17px); white-space: nowrap; }
.menu__note { margin: clamp(12px, 3vh, 20px) 0 0; font-size: clamp(11px, 2.3vh, 13px); line-height: 1.45; color: var(--muted-light); }

/* ---------- recensioni ---------- */

.reviews__stats { display: flex; gap: 22px; margin: 22px 0 26px; flex-wrap: wrap; }
.reviews__score { font-family: var(--serif); font-size: 36px; line-height: 1; }
.reviews__src { font-size: 12px; color: var(--muted-dark); margin-top: 4px; }
.reviews__quote {
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--brick);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
  font-style: italic;
  color: #F3EADA;
  text-wrap: pretty;
}
.reviews__foot { margin: 12px 0 0 18px; font-size: 12px; color: #9C8F7B; }

/* ---------- contatti ---------- */

.scene--contact { background: var(--night); }
.contact__title {
  margin: clamp(8px, 2.4vh, 16px) 0 clamp(12px, 3.4vh, 24px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 5.2vh, 29px);
  line-height: 1.15;
}
.contact__hours {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 2.1vh, 12px);
  padding-bottom: clamp(12px, 3.2vh, 22px);
  border-bottom: 1px solid rgba(245,238,220,.18);
}
.contact__row { display: flex; justify-content: space-between; gap: 12px; font-size: clamp(14px, 2.9vh, 16px); }
.contact__row span:first-child { color: var(--muted-dark); }
.contact__note { font-size: clamp(12px, 2.6vh, 14px); line-height: 1.45; color: var(--muted-dark); }
.contact__actions { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(12px, 3.2vh, 22px); }
.contact__social { display: flex; gap: 18px; margin-top: clamp(12px, 3.2vh, 24px); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.contact__legal { margin-top: clamp(10px, 2.6vh, 18px); font-size: clamp(11px, 2.3vh, 12px); line-height: 1.5; color: #8A7D6B; }

/* ---------- barra alta e puntini ---------- */

.topbar {
  position: absolute;
  top: 18px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 20;
  pointer-events: none;
}
.topbar__mark {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 400ms ease;
}
.topbar__mark.is-visible { opacity: 1; }
.langs { display: flex; gap: 2px; pointer-events: auto; }
.lang {
  min-width: 34px;
  min-height: 34px;
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
  background: rgba(26,18,12,.35);
  border: 1px solid rgba(232,223,203,.4);
  color: var(--paper-2);
}
.lang:hover { background: rgba(248,243,230,.2); }
.lang.on { background: var(--brick); border-color: var(--brick); color: #F8F3E6; }
.is-light .lang { background: rgba(245,238,220,.5); border-color: rgba(59,48,38,.3); color: #3B3026; }
.is-light .lang.on { background: var(--brick); border-color: var(--brick); color: #F8F3E6; }
.is-light .topbar__mark { color: #574B3D; }

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 20;
}
.dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dot i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .3;
  transition: opacity 400ms ease, transform 400ms ease;
}
.dot.on i { opacity: 1; transform: scale(1.6); }
.is-light .dot i { background: var(--brick); }

/* ---------- desktop ---------- */

@media (min-width: 900px) {
  .stage { max-width: none; }
  .topbar { top: 30px; left: 46px; right: 46px; }
  .dots {
    left: auto;
    right: 34px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 10px;
  }

  .scene__scrim:not(.scrim--flat):not(.scrim--flat-strong) {
    background: linear-gradient(103deg, rgba(20,14,10,.92) 0%, rgba(20,14,10,.78) 36%, rgba(20,14,10,.18) 74%);
  }

  .col--bottom { padding: 0 8vw 13vh; }
  .col--top { padding: 0 8vw; justify-content: center; max-width: 780px; }

  .hero__title { font-size: clamp(76px, 7.4vw, 112px); }
  .hero__lead { font-size: 21px; max-width: 470px; }

  .text__title { font-size: clamp(30px, 6.2vh, 46px); margin-bottom: clamp(14px, 3.4vh, 26px); }
  .text__body { font-size: 19px; line-height: 1.68; max-width: 620px; }

  .dish__title { font-size: clamp(48px, 4.6vw, 68px); }
  .dish__desc { font-size: 19px; max-width: 520px; }

  .quote__line { font-size: clamp(34px, 3.2vw, 46px); max-width: 900px; }

  .scene--menu .col { right: 46%; padding: 7vh 5vw; justify-content: center; max-width: none; }
  .menu__photo {
    display: block;
    position: absolute;
    inset: 0 0 0 54%;
    width: 46%;
    height: 100%;
    object-fit: cover;
  }
  .menu__title { font-size: clamp(30px, 6.4vh, 48px); }
  .menu__list { gap: clamp(10px, 2.6vh, 20px); }
  .menu__name { font-size: clamp(15px, 3vh, 20px); }
  .menu__desc { font-size: clamp(12px, 2.3vh, 15px); }
  .menu__price { font-size: clamp(16px, 3.2vh, 22px); }
  .menu__note { font-size: clamp(12px, 2.3vh, 15px); margin-top: clamp(14px, 3.6vh, 30px); }

  .scene--reviews .col { max-width: 860px; }
  .reviews__quote { font-size: 30px; padding-left: 24px; }

  .scene--contact .col { max-width: 760px; }
  .contact__title { font-size: clamp(30px, 6.2vh, 46px); }
  .contact__row { font-size: 19px; }
  .contact__actions { flex-direction: row; }
  .contact__actions .btn { min-width: 260px; }
}

/* ---------- movimento ridotto ---------- */

@media (prefers-reduced-motion: reduce) {
  .scene { transition: opacity 1ms linear; }
  .scene.is-past { transform: none; }
  .hero__hint { animation: none; }
}