/* ══════════════════════════════════════════════════════════════════
   IL GALEONE — San Prospero (MO)
   Identità: taverna di un galeone, sera. Legno scuro, candele,
   pergamena; il rosso pomodoro del video come atto di apertura.
   Font: Caprasimo (display) + Figtree (testo) — dal DS "Organic".
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;600;700&display=swap');

:root {
  /* tavolozza */
  --wood: #1a1510;
  --wood-2: #14100b;
  --parchment: #f5ead8;
  --parchment-2: #ebddc5;
  --ink: #201e1d;
  --candle: #f6a06b;
  --candle-hi: #ffc6a5;
  --accent: #c67139;
  --accent-600: #b2622d;
  --accent-700: #8c491a;
  --accent-800: #643312;
  --accent-900: #402310;
  --sage: #aebf92;
  --sage-700: #56633f;
  /* il rosso: campionato dall'ultimo frame del video */
  --sauce: #841302;
  --sauce-hi: #a32a0e;
  --sauce-deep: #5c0d01;
  --ink-on-wood: rgba(238, 231, 219, .92);
  --ink-dim: rgba(192, 182, 165, .88);
  --font-heading: "Caprasimo", "Georgia", serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --radius-md: 16px;
  --radius-lg: 28px;
  --edge: clamp(20px, 5vw, 88px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: var(--wood);
  color: var(--ink-on-wood);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
  text-wrap: pretty;
}
a { color: var(--candle); text-decoration: none; }
a:hover { color: var(--candle-hi); }
::selection { background: rgba(198, 113, 57, .45); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.08; }
img, video { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--candle); outline-offset: 3px; }

/* grana pellicola */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* vignettatura a lume di candela */
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(5, 3, 1, .5) 100%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* ═════ navigazione ═════ */
.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 26px;
  padding: 14px var(--edge);
  background: rgba(20, 16, 11, .78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(100, 51, 18, .45);
}
.js .nav-bar { transform: translateY(-110%); }
.brand { font-family: var(--font-heading); font-size: 22px; color: var(--parchment); display: flex; align-items: center; gap: 10px; }
.brand svg { color: var(--candle); }
.nav-links { display: flex; gap: clamp(14px, 2.5vw, 32px); margin-left: auto; }
.nav-links a { color: var(--ink-dim); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.nav-links a:hover { color: var(--candle-hi); }
.btn-call {
  display: inline-flex; align-items: center; gap: 9px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 15px;
  padding: 11px 22px; border: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 24px rgba(198, 113, 57, .35);
  transition: background .25s, box-shadow .25s;
}
.btn-call:hover { background: var(--accent-600); box-shadow: 0 0 36px rgba(198, 113, 57, .55); color: #fff; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px; border-radius: 999px;
  background: transparent; color: var(--parchment); font-weight: 600; font-size: 15px;
  padding: 11px 22px; border: 1.5px solid rgba(245, 234, 216, .4);
  cursor: pointer; transition: border-color .25s, background .25s;
}
.btn-ghost:hover { border-color: var(--candle); background: rgba(198, 113, 57, .14); color: var(--parchment); }
@media (max-width: 860px) { .nav-links { display: none; } .brand { margin-right: auto; } }

/* ═════ ATTO 1 · HERO — il varo (video scrub) ═════ */
.hero { position: relative; height: 100svh; overflow: clip; display: grid; place-items: center; }
.hero-media { position: absolute; inset: 0; z-index: 0; background: #0d0a07; }
.hero-media canvas,
.hero-media .hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero-fallback { background: url("../assets/img/hero-poster.jpg") center / cover no-repeat; }
/* velo che si fonde col rosso della sezione successiva */
.red-wash { position: absolute; inset: 0; z-index: 3; background: var(--sauce); opacity: 0; pointer-events: none; }
.hero-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 7, 4, .62) 0%, rgba(10, 7, 4, .18) 38%, rgba(10, 7, 4, .05) 60%, rgba(10, 7, 4, .38) 100%);
}
.hero-inner { position: relative; z-index: 4; text-align: center; padding: 110px var(--edge) 90px; }
.hero-kicker {
  font-size: 14px; letter-spacing: .34em; text-transform: uppercase; font-weight: 600;
  color: var(--candle-hi); margin-bottom: 18px; text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.hero-title {
  font-size: clamp(64px, 12vw, 180px); line-height: .96; color: var(--parchment);
  text-shadow: 0 6px 60px rgba(0, 0, 0, .55), 0 0 80px rgba(198, 113, 57, .3);
}
.hero-title .char { display: inline-block; }
.hero-sub {
  font-size: clamp(16px, 1.6vw, 21px); color: rgba(245, 234, 216, .88);
  margin: 26px auto 0; max-width: 46ch; text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
.hero-sub strong { color: #fff; font-weight: 600; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.hero-place { margin-top: 26px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(245, 234, 216, .75); }
/* beccheggio della nave all'ormeggio */
.rocking { transform-origin: 50% 130%; animation: rock 9s ease-in-out infinite; }
@keyframes rock { 0%, 100% { transform: rotate(-.5deg); } 50% { transform: rotate(.5deg); } }
.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; translate: -50% 0; z-index: 4;
  color: rgba(245, 234, 216, .8); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  display: grid; justify-items: center; gap: 8px; text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.scroll-hint::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(var(--candle), transparent); animation: sink 2s ease-in-out infinite;
}
@keyframes sink { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }

/* timone che segna la rotta (avanzamento pagina) */
.wheel-progress {
  position: fixed; right: 26px; bottom: 26px; z-index: 90; width: 52px; height: 52px;
  color: var(--candle); opacity: .55; pointer-events: none;
}
@media (max-width: 720px) { .wheel-progress { display: none; } }

/* ═════ struttura comune ═════ */
section { position: relative; z-index: 2; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.kick {
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700;
  color: var(--candle); margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
}
.kick::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--accent-700); }
.h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.06; color: var(--parchment); }
.lead { color: var(--ink-dim); max-width: 60ch; font-size: 17.5px; }

/* ═════ ATTO 2 · LA STORIA — nel cuore del pomodoro (sezione rossa) ═════ */
.storia {
  padding: clamp(110px, 14vw, 190px) 0 clamp(150px, 18vw, 260px);
  /* parte esattamente dal rosso dell'ultimo frame, poi digrada nel legno */
  background: linear-gradient(180deg,
    var(--sauce) 0%, var(--sauce) 34%,
    #6f1002 68%, #3a0a02 88%, rgba(26, 21, 16, 0) 100%);
}
.storia::before {
  /* riflessi caldi dentro il rosso, come sugo che luccica */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 50% at 18% 12%, rgba(214, 84, 34, .5) 0%, transparent 55%),
    radial-gradient(70% 45% at 85% 30%, rgba(163, 42, 14, .55) 0%, transparent 60%);
}
.storia .wrap { position: relative; }
.storia .kick { color: #ffd9b8; }
.storia .kick::before { background: #ffb98a; }
.storia .h2 { color: #fdf3e3; text-shadow: 0 4px 40px rgba(60, 8, 0, .55); }
.storia .lead { color: rgba(255, 233, 214, .88); }
.storia-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 90px); align-items: center; }
.storia-copy .h2 { margin-bottom: 22px; }
.storia-copy .lead { margin-bottom: 14px; }
.log-card {
  position: relative; background: var(--parchment); color: var(--ink);
  border-radius: var(--radius-lg); padding: clamp(28px, 3.5vw, 52px);
  box-shadow: 0 30px 80px rgba(40, 5, 0, .55), 0 0 0 1px rgba(100, 51, 18, .3);
  rotate: 1.6deg;
  background-image:
    radial-gradient(140% 100% at 8% 0%, rgba(255, 225, 208, .55) 0%, transparent 46%),
    radial-gradient(120% 120% at 100% 100%, rgba(255, 198, 165, .4) 0%, transparent 40%);
}
.log-card h3 { font-size: 25px; margin-bottom: 14px; }
.log-card p { margin-bottom: 14px; font-size: 16px; line-height: 1.7; color: rgba(32, 30, 29, .85); }
.log-card p:last-of-type { margin-bottom: 0; }
.wax {
  position: absolute; right: 30px; bottom: -26px; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--sauce-hi), var(--sauce-deep) 72%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4); display: grid; place-items: center;
  color: #ffd9b8; font-family: var(--font-heading); font-size: 26px; rotate: -8deg;
}

/* ═════ ATTO 3 · LE QUATTRO ANIME — traversata orizzontale ═════ */
.anime-head { padding: clamp(80px, 10vw, 130px) 0 30px; }
.voyage { overflow: clip; }
.deck-track { display: grid; gap: clamp(20px, 3vw, 44px); padding: 40px var(--edge) 90px; }
@media (min-width: 861px) {
  .deck-track { display: flex; width: max-content; align-items: stretch; padding-bottom: 110px; }
}
.cabin {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #0f0c08; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
@media (min-width: 861px) { .cabin { width: clamp(300px, 34vw, 480px); flex: none; } }
.cabin figure { height: clamp(220px, 24vw, 320px); overflow: hidden; }
.cabin figure img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) brightness(.84) contrast(.97);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.cabin:hover figure img { transform: scale(1.06); }
.cabin-body { padding: 26px 28px 30px; }
.cabin-num {
  position: absolute; top: 18px; left: 18px; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(20, 16, 11, .8); backdrop-filter: blur(4px);
  border: 1.5px solid var(--accent-600);
  display: grid; place-items: center; font-family: var(--font-heading); font-size: 20px; color: var(--candle-hi);
}
.cabin h3 { font-size: 27px; color: var(--parchment); margin-bottom: 10px; }
.cabin p { font-size: 15.5px; color: var(--ink-dim); line-height: 1.65; }
.cabin-tag {
  display: inline-block; margin-top: 16px; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: var(--sage);
}
.rope {
  height: 3px; margin: 0 var(--edge); border-radius: 3px;
  background: repeating-linear-gradient(-45deg, var(--accent-800) 0 6px, var(--accent-900) 6px 12px); opacity: .8;
}

/* ═════ ATTO 4 · MENÙ — la cambusa ═════ */
.menu { padding: clamp(90px, 12vw, 170px) 0; }
.menu-board {
  background: var(--parchment); color: var(--ink); border-radius: calc(var(--radius-lg) * 1.4);
  padding: clamp(30px, 5vw, 72px); box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 225, 208, .6) 0%, transparent 42%),
    radial-gradient(130% 110% at 0% 100%, rgba(225, 238, 204, .55) 0%, transparent 45%);
}
.menu-board .kick { color: var(--accent-700); }
.menu-board .kick::before { background: var(--accent); }
.menu-title { font-size: clamp(32px, 4vw, 54px); color: var(--ink); }
.menu-note { color: rgba(32, 30, 29, .7); font-size: 15px; margin-top: 12px; max-width: 62ch; }
.menu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: clamp(30px, 4vw, 54px); }
.menu-col h4 {
  font-size: 21px; margin-bottom: 6px; color: var(--accent-800);
  display: flex; align-items: center; gap: 10px;
}
.menu-col h4 svg { color: var(--accent-600); flex: none; }
.menu-col .sub {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--sage-700); margin-bottom: 18px;
}
.dish { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.dish + .dish { border-top: 1px dashed rgba(32, 30, 29, .18); }
.dish b { font-weight: 700; font-size: 16px; }
.dish i { font-style: normal; display: block; font-size: 13.5px; color: rgba(32, 30, 29, .62); }
.dish .dots { flex: 1; }
.dish .price { font-weight: 700; color: var(--accent-700); font-feature-settings: "tnum" 1; white-space: nowrap; }
.dish .dots { position: relative; align-self: center; height: 1px; }
.dish .dots::before { content: ""; position: absolute; inset: 0; border-bottom: 1px dotted rgba(32, 30, 29, .28); }

/* menù esteso */
.menu-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.menu-nav a {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-800); border: 1px solid rgba(140, 73, 26, .32); border-radius: 999px;
  padding: 7px 14px; transition: background .2s, color .2s, border-color .2s;
}
.menu-nav a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.menu-group { margin-top: clamp(38px, 5vw, 64px); scroll-margin-top: 90px; }
.menu-group > h3 {
  font-size: clamp(24px, 3vw, 34px); color: var(--accent-800);
  display: flex; align-items: center; gap: 16px; margin-bottom: 4px;
}
.menu-group > h3::after { content: ""; flex: 1; height: 1px; background: rgba(32, 30, 29, .16); }
.menu-group .group-sub { font-size: 13.5px; color: rgba(32, 30, 29, .6); margin: 0 0 4px; }
.menu-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(22px, 2.6vw, 40px); align-items: start; margin-top: 26px;
}
.mcard { break-inside: avoid; }
.mcard h4 { font-size: 20px; color: var(--accent-800); margin-bottom: 3px; }
.mcard .sub {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--sage-700); margin-bottom: 14px;
}
.menu-legend {
  margin-top: clamp(34px, 4vw, 52px); padding-top: 20px;
  border-top: 1px dashed rgba(32, 30, 29, .2);
  font-size: 13px; color: rgba(32, 30, 29, .62);
}
.menu-legend strong { color: var(--accent-800); font-weight: 700; }

/* ═════ ATTO 5 · GALLERIA — sotto coperta ═════ */
.galleria { padding: clamp(80px, 11vw, 160px) 0; }
.gal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.8vw, 22px); margin-top: clamp(30px, 4vw, 50px); }
.gal-item { border-radius: var(--radius-md); overflow: hidden; position: relative; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.gal-item img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.85);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s;
}
.gal-item:hover img { transform: scale(1.07); filter: saturate(.9) brightness(1); }
.g1 { grid-column: span 4; aspect-ratio: 16/9; } .g2 { grid-column: span 2; aspect-ratio: 4/5; }
.g3, .g4, .g5 { grid-column: span 2; aspect-ratio: 1; }
@media (max-width: 720px) { .g1, .g2, .g3, .g4, .g5 { grid-column: span 6; aspect-ratio: 16/10; } }

/* ═════ ATTO 6 · EVENTI — feste a bordo ═════ */
.eventi { padding: clamp(90px, 12vw, 160px) 0; overflow: clip; }
.eventi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.eventi .h2 { margin-bottom: 20px; }
.evt-list { list-style: none; margin-top: 28px; display: grid; gap: 14px; }
.evt-list li { display: flex; gap: 14px; align-items: center; font-size: 16.5px; }
.evt-list li::before {
  content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 14px rgba(198, 113, 57, .6);
}
.porthole {
  position: relative; width: min(420px, 82vw); aspect-ratio: 1; justify-self: center;
  border-radius: 50%; overflow: hidden;
  border: 14px solid #3a2410;
  box-shadow: 0 0 0 3px var(--accent-900), 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 60px rgba(0, 0, 0, .6);
}
.porthole img { width: 100%; height: 118%; object-fit: cover; filter: saturate(.72) brightness(.85); will-change: transform; }

/* ═════ ATTO 7 · VOCI DALLA CIURMA ═════ */
.voci { padding: clamp(90px, 12vw, 160px) 0; }
.voci-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: clamp(30px, 4vw, 54px); }
.voce {
  background: rgba(15, 12, 8, .82); border-radius: var(--radius-lg);
  padding: 32px 30px; border: 1px solid rgba(100, 51, 18, .4);
}
.voce blockquote { font-family: var(--font-heading); font-size: 21px; line-height: 1.4; color: var(--parchment); }
.voce figcaption { margin-top: 18px; font-size: 14px; color: var(--ink-dim); display: flex; align-items: center; gap: 10px; }
.voce figcaption::before { content: ""; width: 26px; height: 2px; background: var(--accent-700); border-radius: 2px; }
.stars { color: var(--candle); letter-spacing: 3px; font-size: 14px; margin-bottom: 14px; }

/* ═════ ATTO 8 · CONTATTI — l'approdo ═════ */
.contatti { padding: clamp(90px, 12vw, 170px) 0 60px; }
.cont-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 100px); }
.cont-big { font-size: clamp(38px, 5vw, 72px); line-height: 1.04; color: var(--parchment); margin-bottom: 26px; }
.cont-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid rgba(100, 51, 18, .4); }
.cont-item svg { color: var(--candle); flex: none; margin-top: 3px; }
.cont-item a, .cont-item span { color: var(--ink-on-wood); font-size: 17px; }
.cont-item a:hover { color: var(--candle-hi); }
.cont-item small { display: block; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 3px; }
.orari-card {
  background: rgba(15, 12, 8, .82); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 44px); border: 1px solid rgba(100, 51, 18, .4);
}
.orari-card h3 { font-size: 24px; color: var(--parchment); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.orari-card h3 svg { color: var(--candle); }
.orario {
  display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 15.5px;
  border-bottom: 1px dashed rgba(130, 121, 106, .4);
}
.orario:last-child { border-bottom: none; }
.orario span { color: var(--ink-dim); }
.orario b { color: var(--ink-on-wood); font-weight: 600; font-feature-settings: "tnum" 1; text-align: right; }
.orario.oggi span, .orario.oggi b { color: var(--candle-hi); }

footer {
  padding: 46px var(--edge) 40px; text-align: center; color: var(--ink-dim); font-size: 13px;
  border-top: 1px solid rgba(64, 35, 16, .6); background: var(--wood-2); position: relative; z-index: 2;
}
footer a { color: var(--ink-dim); text-decoration: underline; }

@media (max-width: 900px) {
  .storia-grid, .eventi-grid, .cont-grid { grid-template-columns: 1fr; }
  .log-card { rotate: .8deg; margin-top: 10px; }
  .porthole { order: -1; }
}

/* ═════ motion off ═════ */
@media (prefers-reduced-motion: reduce) {
  .rocking, .vignette, .scroll-hint::after { animation: none !important; }
  .cabin figure img, .gal-item img { transition: none; }
}