/* Bar Viscuso — menu digitale.
   Identità "Riviera di basalto": il castello normanno di Aci Castello, nero di lava, sulla
   rupe a cuscini; lo Ionio dall'acqua bassa al largo; il sole sul mare.
   Testata e piede sono sempre di giorno (cielo azzurro, sole); il listino segue il tema
   del telefono (chiaro o basalto).
   Il mare apre la pagina e la chiude nel piede. Il listino usa la coppia della landing:
   basalto e arancio.
   Per cambiare i colori modifica solo i token qui sotto. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Territorio: stessi nomi in ogni tema */
  --abisso: #06192a;
  --notte: #0a2c48;
  --ionio: #0c3d63;
  --largo: #13557f;
  --riva: #6fc0d2;
  --schiuma: #e9f2f4;
  /* Stessi valori della landing */
  --sole: #c98a3c;
  --basalto-900: #0a0f12;
  --basalto-800: #111a1f;
  --basalto-700: #18242a;
  --basalto-600: #22313a;
  --sole-chiaro: #f0c06a;

  /* Scena di giorno */
  --cielo-alto: #4fa9d8;
  --cielo-medio: #8dcdea;
  --cielo-basso: #d9f0f8;
  --scena-testo: var(--abisso);
  --scena-testo-2: #0a3556;
  --onda-1: #86c8e3;
  --onda-2: #55aad5;
  --onda-3: #2f8dc2;
  --onda-4: #1d6ea3;
  --cresta: rgb(255 255 255 / 0.6);
  --scintilla: #ffffff;
  --mare-fondo: #0c4f7e;
  --piede-testo: #e3f1f7;
  --astro: radial-gradient(circle, #fffdf3 0 36%, #fff1bd 50%, #ffd67e 66%, rgb(255 214 126 / 0) 70%);
  --astro-alone: radial-gradient(circle, rgb(255 238 175 / 0.6) 0, rgb(255 222 140 / 0.24) 32%, rgb(255 222 140 / 0) 68%);
  --riflesso: #fff4cf;
  --finestre: #151515;
  --aperture: #121212;

  /* Pietra lavica e orizzonte, di giorno */
  --rupe-alto: #3a3e41;
  --rupe-basso: #121416;
  --cuscino-luce: #575c5f;
  --cuscino-mezzo: #33383b;
  --cuscino-ombra: #16191b;
  --cuscino-bordo: #0e1012;
  --muro-luce-alto: #6f6964;
  --muro-luce-basso: #4c4845;
  --muro-ombra-alto: #3d3a38;
  --muro-ombra-basso: #2a2827;
  --giunti: rgb(214 204 188 / 0.3);
  --cornice: #807973;
  --etna: #93bfd4;
  --etna-neve: #eef7fb;
  --pennacchio: rgb(255 255 255 / 0.6);
  --faraglioni: #5f8ca5;

  /* Listino, tema chiaro: schiuma sulla pietra (grigio-azzurro freddo, non crema),
     inchiostro di basalto, arancio bruciato (scurito rispetto a --sole: contrasto ≥ 4.5:1) */
  --bg: #edf1f2;
  --surface: #ffffff;
  --text: #14191c;
  --muted: #55616a;
  --line: #d5dee1;
  --dots: #9fb0b6;
  --accent: #9a5a14;
  --accent-contrast: #f7fafb;
  --chip: #dfe7ea;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --max: 1080px;
  --price-col: 64px;
  --tap: 44px;
  --ease: 180ms ease-out;
  --out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --sea-h: clamp(64px, 9vw, 112px);
  /* Il castello è il protagonista: alto quasi quanto la testata */
  --castle-h: clamp(124px, 24vw, 250px);
  --castle-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  --sun-size: clamp(40px, 5vw, 60px);
  --sun-right: calc(var(--castle-right) + var(--castle-h) * 1.62);
  color-scheme: light dark;
}

/* Col telefono in modalità scura cambia solo il listino: testata e piede restano di giorno */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--basalto-900);
    --surface: var(--basalto-800);
    --text: var(--schiuma);
    --muted: #93a8b0;
    --line: #27373f;
    --dots: #3a4a52;
    --accent: var(--sole);
    --accent-contrast: var(--basalto-900);
    --chip: var(--basalto-700);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

/* Colonna a tutta altezza: con un menu corto il mare del piede resta comunque in fondo */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font-body);
}

a {
  color: inherit;
}

/* Anello di focus uniforme per chi naviga da tastiera; si vede anche sulle pillole piene */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* Per chi usa la tastiera: compare solo quando riceve il focus */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

#listino:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Un nome di prodotto lunghissimo e tutto attaccato non deve sfondare lo schermo */
.line-name,
.line-desc,
.special-name,
.special-desc {
  overflow-wrap: anywhere;
}

/* ---------- Testata: cielo, Etna, sole, castello, mare ---------- */

.masthead {
  position: relative;
  overflow: hidden;
  min-height: calc(var(--castle-h) + var(--sea-h) * 0.4 + 56px);
  padding-bottom: var(--sea-h);
  color: var(--scena-testo);
  background: linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo-medio) 58%, var(--cielo-basso) 100%);
}

.masthead-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px var(--gutter) 0;
}

.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.masthead-side {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--scena-testo-2);
}

.masthead-title {
  max-width: calc(100% - var(--castle-h) * 1.9);
  padding: 4px 0 24px;
}

.masthead-logo {
  display: block;
  width: clamp(150px, 40vw, 220px);
  height: auto;
  margin: 0 0 10px;
}

h1 {
  margin: 0;
  font: 600 clamp(2.15rem, 8vw, 4.2rem) / 1 var(--font-display);
  letter-spacing: -0.015em;
}

.tagline {
  margin: 8px 0 0;
  max-width: 34ch;
  font: italic 400 clamp(1rem, 2.2vw, 1.2rem) / 1.35 var(--font-display);
  color: var(--scena-testo-2);
}

/* Telefono: il castello non ci sta accanto al testo, quindi va sotto, grande */
@media (max-width: 699px) {
  .masthead {
    min-height: 0;
    padding-bottom: calc(var(--castle-h) + var(--sea-h) * 0.4 - 8px);
  }

  .masthead-title {
    max-width: none;
    padding-bottom: 0;
  }

  :root {
    --sun-right: 28px;
    /* Bassa abbastanza da far vedere i primi prodotti appena si apre il QR */
    --castle-h: clamp(104px, 28vw, 132px);
  }

  .masthead .sun {
    top: 70px;
  }
}

.table-badge {
  background: var(--sole);
  color: var(--abisso);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.lang {
  display: flex;
  border: 1px solid color-mix(in srgb, var(--scena-testo) 35%, transparent);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
}

.lang a,
.lang span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 10px;
  text-decoration: none;
}

/* La pillola ha overflow: hidden, quindi l'anello va disegnato all'interno */
.lang a:focus-visible {
  outline-offset: -3px;
}

.lang [aria-current] {
  background: var(--scena-testo);
  color: var(--cielo-alto);
}

/* Sole: disco sfumato e un alone che respira piano */
.sun {
  position: absolute;
  top: 34px;
  right: var(--sun-right);
  width: var(--sun-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--astro);
}

.sun::before {
  content: "";
  position: absolute;
  inset: -150%;
  border-radius: 50%;
  background: var(--astro-alone);
}

/* Orizzonte: Etna e Faraglioni velati dalla foschia */
.horizon {
  position: absolute;
  left: 0;
  bottom: calc(var(--sea-h) * 0.74);
  width: 100%;
  height: clamp(56px, 12vw, 150px);
}

.etna {
  fill: var(--etna);
}

.etna-neve {
  fill: var(--etna-neve);
}

.plume {
  fill: var(--pennacchio);
}

.faraglioni {
  fill: var(--faraglioni);
  transform: translateX(-190px);
}

/* Castello sulla rupe: la base affonda nel mare, le onde passano davanti */
.castle {
  position: absolute;
  right: var(--castle-right);
  bottom: calc(var(--sea-h) * 0.4);
  height: var(--castle-h);
  aspect-ratio: 440 / 235;
  overflow: visible;
}

.rupe-alto {
  stop-color: var(--rupe-alto);
}

.rupe-basso {
  stop-color: var(--rupe-basso);
}

.cuscino-luce {
  stop-color: var(--cuscino-luce);
}

.cuscino-mezzo {
  stop-color: var(--cuscino-mezzo);
}

.cuscino-ombra {
  stop-color: var(--cuscino-ombra);
}

.pillows {
  stroke: var(--cuscino-bordo);
  stroke-width: 1.2;
}

.muro-luce-alto {
  stop-color: var(--muro-luce-alto);
}

.muro-luce-basso {
  stop-color: var(--muro-luce-basso);
}

.muro-ombra-alto {
  stop-color: var(--muro-ombra-alto);
}

.muro-ombra-basso {
  stop-color: var(--muro-ombra-basso);
}

.giunti {
  stroke: var(--giunti);
  stroke-width: 0.8;
}

.cornice {
  fill: var(--cornice);
}

.gradini {
  stroke: var(--giunti);
  stroke-width: 1.4;
}

.aperture {
  fill: var(--aperture);
}

.windows {
  fill: var(--finestre);
}

/* ---------- Mare: testata e piede ---------- */

.sea {
  display: block;
  width: 100%;
  height: var(--sea-h);
  overflow: hidden;
}

.sea-top {
  position: absolute;
  left: 0;
  bottom: -1px;
}

.sea .wave-1 {
  fill: var(--onda-1);
}

.sea .wave-2 {
  fill: var(--onda-2);
}

.sea .wave-3 {
  fill: var(--onda-3);
}

.sea .wave-4 {
  fill: var(--onda-4);
}

/* In alto l'ultima onda ha il colore della pagina: il mare si versa nel listino */
.sea-top .wave-5 {
  fill: var(--bg);
}

.sea-bottom .wave-5 {
  fill: var(--mare-fondo);
}

/* Creste: un filo di schiuma sul bordo di ogni onda */
.crest {
  fill: none;
  stroke: var(--cresta);
  stroke-width: 1.2;
}

.sea-top .wave-5 .crest {
  stroke: color-mix(in srgb, var(--onda-4) 35%, transparent);
}

.glints {
  fill: none;
  stroke: var(--scintilla);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.7;
}

/* Riflesso dell'astro: scaglie di luce sull'acqua, sotto il sole */
.glitter {
  position: absolute;
  right: calc(var(--sun-right) - var(--sun-size) * 0.3);
  bottom: calc(var(--sea-h) * 0.2);
  width: calc(var(--sun-size) * 1.6);
  height: calc(var(--sea-h) * 0.7);
  fill: none;
  stroke: var(--riflesso);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

.glitter path {
  vector-effect: non-scaling-stroke;
}

/* ---------- Scelta del menu (Colazione, Bar & Pasticceria, Tavola calda) ---------- */

.menu-switch ul {
  list-style: none;
  max-width: var(--max);
  margin: 0 auto;
  padding: 4px var(--gutter) 0;
  display: flex;
  gap: 4px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.menu-switch a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--tap);
  padding: 6px 0 8px;
  white-space: nowrap;
  text-decoration: none;
  font: 600 1.05rem/1.2 var(--font-display);
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.menu-switch small {
  font: 500 0.75rem/1.3 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.menu-switch [aria-current] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

@media (hover: hover) {
  .menu-switch a:not([aria-current]):hover {
    color: var(--text);
  }
}

/* ---------- Barra fissa: castellino e categorie ---------- */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Bordo a onda: scorre con lo scroll della pagina (variabile --sy da menu-ui.js) */
.toolbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 8px;
  background: var(--accent);
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask: url("/patterns/onda.svg") repeat-x;
  mask: url("/patterns/onda.svg") repeat-x;
  -webkit-mask-size: 40px 8px;
  mask-size: 40px 8px;
  -webkit-mask-position: calc(var(--sy, 0) * -0.35px) 0;
  mask-position: calc(var(--sy, 0) * -0.35px) 0;
}

.toolbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: calc(var(--gutter) - 6px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  align-items: center;
  transition: grid-template-columns 320ms var(--out);
}

/* In alto il castellino non occupa spazio: le categorie restano allineate al listino */
.is-stuck .toolbar-inner {
  grid-template-columns: var(--tap) minmax(0, 1fr);
}

/* Castellino: torna in cima. Appena accennato in alto, pieno quando la testata è passata */
.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--accent);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 320ms var(--out),
    transform 320ms var(--out);
}

.is-stuck .mark {
  opacity: 1;
  transform: none;
}

.mark-svg {
  width: 36px;
  height: 21px;
  fill: currentColor;
}

.mark-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
}

.cat-nav {
  min-width: 0;
}

.cat-nav ul {
  list-style: none;
  margin: 0;
  padding: 10px var(--gutter) 10px 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Sfumatura a destra: fa capire che la barra continua di lato */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.cat-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  white-space: nowrap;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  background: var(--chip);
  transition:
    background-color var(--ease),
    color var(--ease);
}

.cat-nav a.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

/* Hover solo dove esiste un puntatore: su telefono resterebbe "appiccicato" dopo il tocco */
@media (hover: hover) {
  .cat-nav a:not(.is-active):hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--chip));
  }

  .lang a:hover {
    background: color-mix(in srgb, var(--scena-testo) 12%, transparent);
  }

  .back:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ---------- Impaginazione: elenco a sinistra, specialità a destra ---------- */

/* width: 100% serve perché il body è una colonna flex: senza, i margini auto stringerebbero
   il listino alla larghezza del contenuto */
.board {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--gutter) 48px;
  display: grid;
  gap: 8px 56px;
}

.board-list {
  min-width: 0;
}

.specials {
  order: -1;
}

@media (min-width: 900px) {
  .board {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }

  .specials {
    order: 0;
    position: sticky;
    top: 92px;
  }
}

/* ---------- Categorie ---------- */

.category {
  padding-top: 28px;
}

.cat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.cat-label {
  margin: 0;
  font: 600 clamp(1.35rem, 4.5vw, 1.6rem) / 1.15 var(--font-display);
  color: var(--accent);
}

.cat-desc {
  margin: 8px 0 0;
  font: italic 400 0.98rem/1.45 var(--font-display);
  color: var(--muted);
}

.price-head {
  display: flex;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.price-head span {
  width: var(--price-col);
  text-align: right;
}

/* Righe di listino: Nome ........ 1,20 € */
.lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.line {
  padding: 12px 0 10px;
  border-bottom: 1px dashed var(--line);
}

.line:last-child {
  border-bottom: 0;
}

.line-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.line-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  min-width: 0;
}

.leader {
  flex: 1;
  min-width: 16px;
  border-bottom: 2px dotted var(--dots);
  transform: translateY(-4px);
}

.price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
  text-align: right;
}

.has-table .price {
  width: var(--price-col);
  flex: none;
}

.price-table {
  color: var(--muted);
  font-weight: 600;
}

.unit {
  font-size: max(0.75rem, 0.78em);
  font-weight: 500;
  color: var(--muted);
}

.has-table .unit {
  display: block;
  font-size: 0.75rem;
}

.frozen {
  text-decoration: none;
  color: var(--accent);
  margin-left: 2px;
}

.line-desc {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chip);
}

.tag-vegan,
.tag-vegetarian {
  background: color-mix(in srgb, #6e8f3a 22%, var(--surface));
}

.tag-seasonal {
  background: color-mix(in srgb, var(--sole) 30%, var(--surface));
}

.allergens {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Solo testo, niente emoji: cambiano da telefono a telefono e alcune non hanno significato */
.allergen:not(:last-child)::after {
  content: ",";
}

/* Maiuscola solo sul primo: "Glutine, latte, uova". Il primo figlio è l'etichetta nascosta
   "Allergeni:", quindi :first-child non funziona */
.allergen + .allergen {
  text-transform: lowercase;
}

/* ---------- Specialità della casa: un tratto di mare dentro il listino ---------- */

.specials {
  margin-top: 4px;
  padding: 22px 20px 6px;
  border-radius: 20px;
  color: var(--schiuma);
  background: linear-gradient(165deg, var(--basalto-600) 0%, var(--basalto-800) 70%, var(--basalto-900) 100%);
  border: 1px solid var(--basalto-600);
  /* Ridefiniti qui: chip e allergeni dentro la pietra scura */
  --muted: #a3b4bb;
  --chip: rgb(233 242 244 / 0.1);
  --surface: var(--basalto-800);
  --line: rgb(233 242 244 / 0.12);
}

.specials-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font: 600 1.45rem/1.2 var(--font-display);
}

/* Il sole di Aci Castello, in piccolo */
.specials-title::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sole-chiaro);
  box-shadow: 0 0 0 5px rgb(240 192 106 / 0.18);
}

.special-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.special {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.special:last-child {
  border-bottom: 0;
}

.special-body {
  flex: 1;
  min-width: 0;
}

.special-name {
  margin: 0;
  font: 600 1.2rem/1.2 var(--font-display);
}

.special-desc {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.special-rule {
  display: block;
  width: 48px;
  height: 2px;
  margin: 10px 0 8px;
  border-radius: 2px;
  background: var(--sole);
}

.special-price {
  margin: 0;
  font: 600 1.25rem/1.2 var(--font-display);
  color: var(--sole-chiaro);
  font-variant-numeric: tabular-nums;
}

.special-price .unit {
  color: var(--muted);
}

.special-price-table {
  margin-left: 12px;
  font: 600 0.85rem/1 var(--font-body);
  color: var(--muted);
}

.special-img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sole);
  flex: none;
}

.empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
}

/* ---------- Piede: lo stesso mare chiude la pagina ---------- */

.site-footer {
  margin-top: auto;
  padding-top: 8px;
  color: var(--piede-testo);
  font-size: 0.85rem;
  text-align: center;
}

.footer-inner {
  margin-top: -1px;
  padding: 8px var(--gutter) calc(36px + env(safe-area-inset-bottom));
  background: var(--mare-fondo);
}

.footer-inner p {
  max-width: 60ch;
  margin: 0 auto 6px;
}

.footer-inner a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
}

.site-footer :focus-visible {
  outline-color: var(--piede-testo);
}

/* ---------- Movimento: solo per chi non ha chiesto di ridurlo ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Mare: ogni fila scorre di un periodo intero (le lontane più piano, a file alterne in
     senso opposto, come il mare incrociato sotto costa) e beccheggia su e giù. */
  .wave {
    animation: beccheggio 6s ease-in-out infinite alternate;
  }

  .wave-loop {
    animation: risacca 30s linear infinite;
  }

  .wave-1 { animation-duration: 7.4s; animation-delay: -2s; }
  .wave-2 { animation-duration: 6.2s; animation-delay: -4s; }
  .wave-3 { animation-duration: 5.4s; animation-delay: -1s; }
  .wave-4 { animation-duration: 6.8s; animation-delay: -3s; }
  .wave-5 { animation-duration: 5.8s; animation-delay: -5s; }

  .sea-top .wave-1 .wave-loop { --period: -180px; animation-duration: 64s; }
  .sea-top .wave-2 .wave-loop { --period: -260px; animation-duration: 48s; animation-direction: reverse; }
  .sea-top .wave-3 .wave-loop { --period: -220px; animation-duration: 34s; }
  .sea-top .wave-4 .wave-loop { --period: -320px; animation-duration: 30s; animation-direction: reverse; }
  .sea-top .wave-5 .wave-loop { --period: -200px; animation-duration: 20s; }

  .sea-bottom .wave-1 .wave-loop { --period: -200px; animation-duration: 64s; }
  .sea-bottom .wave-2 .wave-loop { --period: -320px; animation-duration: 48s; animation-direction: reverse; }
  .sea-bottom .wave-3 .wave-loop { --period: -220px; animation-duration: 34s; }
  .sea-bottom .wave-4 .wave-loop { --period: -260px; animation-duration: 30s; animation-direction: reverse; }
  .sea-bottom .wave-5 .wave-loop { --period: -180px; animation-duration: 20s; }

  /* Scintille sparse: si accendono e spengono a tempi sfalsati */
  .glints path {
    opacity: 0;
    animation: luccica 3.8s ease-in-out infinite;
  }

  .glints path:nth-child(2n) { animation-delay: -1.3s; animation-duration: 4.6s; }
  .glints path:nth-child(3n) { animation-delay: -2.5s; }
  .glints path:nth-child(5n) { animation-delay: -0.7s; animation-duration: 3.1s; }
  .glints path:nth-child(7n) { animation-delay: -3.2s; }

  .glitter path {
    animation: luccica 2.4s ease-in-out infinite;
  }

  .glitter path:nth-child(2n) { animation-delay: -0.8s; }
  .glitter path:nth-child(3n) { animation-delay: -1.6s; animation-duration: 3s; }

  .sun::before {
    animation: respiro 7s ease-in-out infinite alternate;
  }

  /* Apertura: il sole sale, il castello emerge dal mare, poi il nome e la riga sotto */
  .sun {
    animation: alba 1600ms var(--out) both;
  }

  .horizon {
    animation: dissolvenza 1400ms ease-out both;
  }

  .castle {
    animation: emerge 1300ms var(--out) 120ms both;
  }

  h1 {
    animation: affiora-testo 1000ms var(--out) 320ms both;
  }

  .tagline {
    animation: affiora-testo 1000ms var(--out) 500ms both;
  }

  .masthead-top {
    animation: dissolvenza 800ms ease-out 700ms both;
  }
}

/* Fuori dallo schermo il mare si ferma (classe messa da menu-ui.js) */
.is-offscreen *,
.is-offscreen *::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

@keyframes risacca {
  to {
    transform: translateX(var(--period));
  }
}

@keyframes beccheggio {
  from {
    transform: translateY(-1.5px);
  }

  to {
    transform: translateY(2.5px);
  }
}

@keyframes luccica {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 0.85;
  }
}

@keyframes respiro {
  from {
    opacity: 0.75;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes alba {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.85);
  }
}

@keyframes emerge {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

@keyframes affiora-testo {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
}

@keyframes dissolvenza {
  from {
    opacity: 0;
  }
}