/* ============================================================
   THEMA SITO — UI kit layout styles.
   Loads on top of styles.css (tokens + components). Editorial,
   asymmetric, image-led. "La versione digitale della veranda."
   ============================================================ */

.site { background: var(--surface-base); overflow-x: clip; }

/* ---------------- HEADER ---------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  background: rgba(250, 250, 248, 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header[data-scrolled="true"] { border-color: var(--border-hair); box-shadow: var(--shadow-sm); }
.site-header__brand { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; background: none; border: none; padding: 0; }
.site-header__brand img { height: 50px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 0.3rem; }
.site-nav__link {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500;
  color: var(--text-body); background: none; border: none; cursor: pointer;
  padding: 0.5em 0.85em; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { background: var(--mare-100); color: var(--mare-700); }
.site-nav__link[aria-current="true"] { color: var(--mare-700); font-weight: 600; }
.site-header__right { display: flex; align-items: center; gap: 0.6rem; }
.lang { display: inline-flex; gap: 2px; font-size: var(--fs-caption); color: var(--text-muted); border: 1px solid var(--border-hair); border-radius: var(--radius-pill); overflow: hidden; }
.lang button { border: none; background: none; padding: 0.35em 0.7em; cursor: pointer; color: inherit; font: inherit; }
.lang button[data-on="true"] { background: var(--mare-500); color: #fff; }
.site-burger { display: none; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-header__right .thm-btn { display: none; }
  .site-burger { display: inline-flex; }
}

/* ---------------- HERO (Aria di mare · carta nautica · onde) ---------------- */
.hero { position: relative; min-height: min(96vh, 940px); display: flex; align-items: flex-end; overflow: hidden; background: var(--mare-100); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 118%; object-fit: cover; object-position: center 40%; will-change: transform; }
/* light protection only — no dark overlay (brand rule) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(86deg, rgba(250,250,248,0.5) 0%, rgba(250,250,248,0.18) 34%, rgba(250,250,248,0) 58%);
}
/* faint sea-chart grid + framing */
.hero__chart { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(var(--mare-600) 1px, transparent 1px), linear-gradient(90deg, var(--mare-600) 1px, transparent 1px);
  background-size: 78px 78px; opacity: 0.06; }
.hero__coord { position: absolute; top: clamp(5.5rem,9vw,7rem); left: clamp(1.25rem,5vw,5rem); z-index: 3; font-size: var(--fs-caption); letter-spacing: 0.2em; color: var(--mare-700); display: flex; align-items: center; gap: 10px; }
.hero__coord::before { content:""; width: 26px; height: 1.5px; background: var(--vino-500); }
.hero__compass { position: absolute; top: clamp(5rem,9vw,7rem); right: clamp(1.25rem,5vw,5rem); z-index: 3; width: clamp(70px,8vw,104px); height: clamp(70px,8vw,104px); opacity: 0.85; }
.hero__inner { position: relative; z-index: 3; margin: 0 0 clamp(4rem,7vw,7rem) clamp(1.25rem, 5vw, 5rem); max-width: 640px;
  background: linear-gradient(180deg, rgba(250,250,248,0.44), rgba(250,250,248,0.3));
  backdrop-filter: blur(26px) saturate(1.5) brightness(1.04); -webkit-backdrop-filter: blur(26px) saturate(1.5) brightness(1.04);
  border: 1px solid rgba(255,255,255,0.55); overflow: hidden;
  border-radius: var(--radius-xl); padding: clamp(1.9rem,3vw,2.9rem) clamp(1.9rem,3.4vw,3.2rem);
  box-shadow: 0 34px 90px -34px rgba(35,79,96,0.5), inset 0 1px 0 rgba(255,255,255,0.8); }
.hero__inner::before { content:""; position:absolute; top:-40%; left:-10%; width:70%; height:140%; background:linear-gradient(120deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 60%); transform:rotate(8deg); pointer-events:none; }
.hero__inner > * { position: relative; }
/* animated wave bottom edge */
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 4; line-height: 0; pointer-events: none; }
.hero__wave svg { width: 100%; height: clamp(56px, 8vw, 120px); display: block; }
.hero__kicker { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mare-700); display: inline-flex; align-items: center; gap: 0.7em; white-space: nowrap; }
.hero__kicker::before { content:""; width: 2.2em; height: 2px; background: var(--vino-500); }
.hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(4.5rem, 3rem + 7vw, 9rem); line-height: 0.9; letter-spacing: 0.01em; color: var(--inchiostro); margin: 0.12em 0 0.02em; }
.hero__title em { font-style: italic; color: var(--mare-600); }
.hero__desc { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; color: var(--mare-800); margin-bottom: 0.2rem; }
.hero__sub { font-family: var(--font-script); font-style: italic; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); color: var(--vino-500); margin-bottom: 1.1rem; line-height: 1.1; }
.hero__lead { font-size: var(--fs-lead); color: #2b3b42; font-weight: 500; max-width: 42ch; margin-bottom: 1.8rem; }
.hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--mare-700); font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.8; }
.hero__scroll svg { animation: bob 1.8s var(--ease-soft) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@media (prefers-reduced-motion: reduce){ .hero__scroll svg{animation:none} }

/* ---------------- GENERIC SECTION ---------------- */
.section { padding: var(--section-y) 0; }
.section--sand { background: var(--surface-sand-soft); }
.section--sky { background: var(--surface-sky); }
.wrap { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--container-wide); }

/* ---------------- TRE ANIME — expanding panels, proportional importance ---------------- */
.anime-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: end; }
.anime-intro__aside { padding-bottom: 6px; }
.anime-intro__aside p { color: var(--text-body); }
@media (max-width: 820px){ .anime-intro { grid-template-columns: 1fr; align-items: start; } }

.anime { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); height: clamp(380px, 44vw, 520px); }
.anima {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  box-shadow: var(--shadow-md); cursor: pointer; border: none; text-align: left; padding: 0;
  flex: 1 1 0; min-width: 96px; container-type: inline-size;
  transition: flex-grow var(--dur-slow) var(--ease-sea), box-shadow var(--dur-base) var(--ease-out);
}
.anima img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--dur-slow) var(--ease-out); }
/* 3 sfumature — un colore per anima */
.anima::after { content: ""; position: absolute; inset: 0; z-index: 1; transition: opacity var(--dur-base); }
.anima--mare::after { background: linear-gradient(0deg, rgba(35,79,96,0.9) 0%, rgba(35,79,96,0.28) 52%, rgba(35,79,96,0.05) 100%); }
.anima--vino::after { background: linear-gradient(0deg, rgba(77,29,51,0.9) 0%, rgba(123,48,80,0.3) 52%, rgba(123,48,80,0.05) 100%); }
.anima--gold::after { background: linear-gradient(0deg, rgba(108,77,18,0.9) 0%, rgba(169,121,31,0.3) 52%, rgba(200,148,58,0.05) 100%); }
.anima__ring { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(255,255,255,0); transition: box-shadow var(--dur-base) var(--ease-out); pointer-events: none; }
.anima__icon { position: absolute; top: var(--space-md); left: var(--space-md); z-index: 3; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.16); backdrop-filter: blur(4px); color: #fff; animation: seaBob 3.2s var(--ease-in-out) infinite; }
.anime:hover .anima { flex-grow: 0.7; }
.anime .anima:hover { flex-grow: 4; box-shadow: var(--shadow-lg); }
.anima:hover img { transform: scale(1.06); }
.anima:hover .anima__ring { box-shadow: inset 0 0 0 3px rgba(255,255,255,0.75); }
.anima__body { position: relative; z-index: 3; padding: var(--space-lg); }
.anima__k { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; opacity: 0.92; white-space: nowrap; }
.anima__name { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 400; line-height: 1; margin: 0.1em 0; white-space: nowrap; }
.anima__ore { font-size: var(--fs-small); opacity: 0.92; white-space: nowrap; }
@keyframes seaBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
/* narrow (collapsed) panel: rotate the label vertically so it never overflows */
@container (max-width: 280px) {
  /* collapsed: name vertical, daypart + hours written normally beside it */
  .anima__body { writing-mode: horizontal-tb; transform: none; display: flex; flex-direction: row; gap: 12px; align-items: flex-end; padding: var(--space-lg) var(--space-md); align-self: flex-start; }
  .anima__name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(1.5rem, 7cqi, 2.1rem); margin: 0; letter-spacing: 0.02em; }
  .anima__meta { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; }
  .anima__k { display: block; font-size: var(--fs-caption); letter-spacing: 0.16em; opacity: 0.92; }
  .anima__ore { display: block; font-size: var(--fs-caption); opacity: 0.85; }
  .anima__icon { left: 50%; transform: translateX(-50%); }
}
.anima__meta { display: flex; gap: 0.5em; align-items: baseline; flex-wrap: wrap; }
/* animated marine background for the section (visible on every viewport) */
.anime-section { position: relative; overflow: hidden; }
.anime-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; }
.anime-bg svg { width: 100%; height: 100%; }
.anime-bg .ab-wave { animation: abDrift 14s var(--ease-in-out) infinite; }
.anime-bg .ab-w2 { animation-duration: 18s; animation-direction: reverse; }
.anime-bg .ab-w3 { animation-duration: 22s; }
@keyframes abDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-60px); } }
.anime-section .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){ .anime-bg .ab-wave { animation: none; } }
/* extra hover motion */
.anime .anima:hover .anima__icon { transform: scale(1.18) translateY(-3px); }
.anime .anima:hover .anima__body { animation: animaRise 0.5s var(--ease-out); }
@keyframes animaRise { from { transform: translateY(14px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .anima__icon { animation: none; } .anime .anima:hover .anima__body { animation: none; } }
@media (max-width: 760px){
  /* creative mobile: full-width image bands, color tint, big icon, name */
  .anime { flex-direction: column; height: auto; gap: var(--space-md); }
  .anima { min-height: 168px; flex: none; container-type: normal; }
  .anime:hover .anima, .anime .anima:hover { flex-grow: 0; }
  .anima__body { writing-mode: horizontal-tb; transform: none; align-self: auto; }
  .anima__k, .anima__ore { display: block; }
  .anima__icon { width: 46px; height: 46px; animation: seaBob 3.2s var(--ease-in-out) infinite; left: auto; right: var(--space-md); transform: none; }
  .anima:nth-child(even) { transform: translateX(0); }
}

/* ---------------- EDITORIAL FEATURE (image escapes frame) ---------------- */
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feature--flip { grid-template-columns: 0.95fr 1.05fr; }
.feature--flip .feature__media { order: 2; }
.feature__media { position: relative; }
.feature__media .thm-frame { aspect-ratio: 4 / 5; }
.feature__media .float {
  position: absolute; width: 46%; aspect-ratio: 1; right: -8%; bottom: -10%;
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--bianco);
}
.feature--flip .feature__media .float { right: auto; left: -8%; }
.feature__media .float img { width: 100%; height: 100%; object-fit: cover; }
.feature__body p { margin-top: var(--space-sm); color: var(--text-body); }
.feature__body .thm-btn { margin-top: var(--space-md); }
@media (max-width: 820px){ .feature, .feature--flip{grid-template-columns:1fr} .feature--flip .feature__media{order:0} .feature__media .float{width:38%; right:4%} }

/* ---------------- MENU ---------------- */
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem); margin-top: var(--space-xl); }
.menu-block__head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: var(--space-xs); }
.menu-block__title { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--text-strong); font-weight: 500; }
.menu-block__rule { flex: 1; height: 1px; background: var(--border-soft); }
@media (max-width: 760px){ .menu-grid{grid-template-columns:1fr} }

.menu-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: var(--space-md); }
.menu-tab { font-family: var(--font-body); font-size: var(--fs-small); padding: 0.5em 1em; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: transparent; cursor: pointer; color: var(--text-body); transition: all var(--dur-fast) var(--ease-out); }
.menu-tab[data-on="true"] { background: var(--mare-500); border-color: var(--mare-500); color: #fff; }
.menu-tab:hover:not([data-on="true"]) { border-color: var(--mare-400); color: var(--mare-700); }

/* ---------------- PANINI ISOLE ---------------- */
.panini { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--grid-gap); margin-top: var(--space-xl); }
.panino {
  background: var(--bianco-pure); border-radius: var(--radius-lg); padding: var(--space-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-hair);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.panino:hover { transform: translateY(-5px); box-shadow: var(--shadow-mare); }
.panino__isola { display: flex; align-items: baseline; gap: 0.5rem; }
.panino__num { font-family: var(--font-display); font-size: var(--fs-caption); color: var(--mare-400); font-style: italic; }
.panino__name { font-family: var(--font-display); font-size: var(--fs-dish); font-weight: 600; color: var(--mare-700); }
.panino__desc { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-normal); margin-top: 0.6rem; }
.panino__tag { font-size: var(--fs-caption); color: var(--vino-500); font-style: italic; margin-top: 0.8rem; font-family: var(--font-display); }

/* ---------------- ENOTECA (the one darker moment) ---------------- */
.enoteca-dark { background: var(--surface-enoteca); color: var(--text-on-dark); }
.enoteca-dark .menu-block__title, .enoteca-dark .thm-dish__name { color: var(--bianco); }
.enoteca-dark .thm-dish { border-color: rgba(232,223,200,0.16); }
.enoteca-dark .thm-dish__price { color: var(--oro-300); }
.enoteca-dark .menu-block__rule { background: rgba(232,223,200,0.2); }

/* ---------------- CHI SIAMO TIMELINE ---------------- */
.story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.story__quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h2); line-height: 1.3; color: var(--text-strong); }
.story__quote span { color: var(--mare-600); }
.story__by { font-family: var(--font-body); font-style: normal; font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-sm); letter-spacing: 0.04em; }
@media (max-width:820px){ .story{grid-template-columns:1fr} }

.dedica { text-align: center; max-width: 40ch; margin: var(--space-2xl) auto 0; padding-top: var(--space-xl); border-top: 1px solid var(--border-hair); }
.dedica__label { font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--vino-500); }
.dedica__name { font-family: var(--font-display); font-size: var(--fs-h3); font-style: italic; color: var(--text-strong); margin-top: 0.5rem; }

/* ---------------- CONTATTI ---------------- */
.contatti { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.info-row { display: flex; gap: 0.9rem; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-hair); }
.info-row__icon { color: var(--mare-600); flex: none; margin-top: 2px; }
.info-row__k { font-size: var(--fs-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.info-row__v { font-size: var(--fs-body); color: var(--text-strong); font-weight: 500; }
.map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-hair); min-height: 320px; background: var(--mare-100); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; min-height: 320px; }
.resv-form { background: var(--bianco-pure); border-radius: var(--radius-lg); padding: clamp(1.5rem,3vw,2.5rem); box-shadow: var(--shadow-sm); border: 1px solid var(--border-hair); display: grid; gap: var(--space-md); }
.resv-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width:820px){ .contatti{grid-template-columns:1fr} }

/* ---------------- FOOTER ---------------- */
.site-footer { background: var(--mare-800); color: var(--sabbia-200); padding: var(--space-2xl) 0 var(--space-lg); margin-top: var(--space-2xl); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); }
.site-footer h4 { font-family: var(--font-body); font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mare-300); margin-bottom: var(--space-sm); font-weight: 600; }
.site-footer a { color: var(--sabbia-200); }
.site-footer a:hover { color: #fff; }
.site-footer__brand img { height: 78px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.site-footer__note { font-family: var(--font-script); font-style: italic; font-size: var(--fs-lead); color: var(--sabbia-300); margin-top: var(--space-sm); max-width: 30ch; }
.footer-bottom { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid rgba(232,223,200,0.16); display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; font-size: var(--fs-caption); color: var(--mare-300); }
@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; gap:var(--space-lg); text-align:center; justify-items:center; }
  .site-footer__brand{ display:flex; justify-content:center; }
  .site-footer__note{ max-width:36ch; }
  .site-footer__social{ justify-content:center; }
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* ---------------- SECTION HEADING IN-KIT TWEAKS ---------------- */
.lead-wide { max-width: 52ch; }
.center { text-align: center; }
.center .thm-heading { align-items: center; margin-inline: auto; }

/* ---------------- WAVE DIVIDER (tema delle onde) ---------------- */
.wave-rule { position: relative; line-height: 0; overflow: hidden; }
.wave-rule svg { display: block; width: 200%; height: clamp(40px, 6vw, 80px); }
.wave-rule .w1 { animation: waveDrift 18s linear infinite; }
.wave-rule .w2 { animation: waveDrift 26s linear infinite reverse; opacity: 0.5; }
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .wave-rule svg{ animation: none !important; } .wave-rule .w1,.wave-rule .w2{ animation: none !important; } }
/* inline label sitting on a wave rule */
.wave-band { background: var(--mare-600); color: var(--bianco); text-align: center; padding: var(--space-md) 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); }

/* ---------------- IL PESCATO DEL GIORNO — big fish photography ---------------- */
.catch { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(140px, 16vw, 230px); gap: var(--grid-gap); margin-top: var(--space-2xl); }
.catch__cell { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.catch__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.catch__cell:hover img { transform: scale(1.06); }
/* asymmetric, magazine-ish placement */
.catch__a { grid-column: 1 / 7; grid-row: 1 / 3; }   /* big hero dish */
.catch__b { grid-column: 7 / 13; grid-row: 1 / 2; }
.catch__c { grid-column: 7 / 10; grid-row: 2 / 3; }
.catch__d { grid-column: 10 / 13; grid-row: 2 / 3; }
.catch__cap { position: absolute; left: var(--space-sm); bottom: var(--space-sm); display: flex; flex-direction: column; gap: 2px; }
.catch__cap .nm { font-family: var(--font-display); font-size: var(--fs-dish); color: #fff; font-weight: 600; line-height: 1.05; text-shadow: 0 2px 14px rgba(35,79,96,0.5); }
.catch__cap .co { font-size: var(--fs-caption); color: rgba(255,255,255,0.92); letter-spacing: 0.14em; text-shadow: 0 1px 8px rgba(35,79,96,0.6); }
.catch__cell::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(35,79,96,0.55) 0%, rgba(35,79,96,0) 45%); pointer-events:none; }
@media (max-width: 820px){
  .catch { grid-auto-rows: clamp(150px, 40vw, 220px); }
  .catch__a { grid-column: 1 / 13; grid-row: 1 / 2; }
  .catch__b { grid-column: 1 / 13; grid-row: 2 / 3; }
  .catch__c { grid-column: 1 / 7; grid-row: 3 / 4; }
  .catch__d { grid-column: 7 / 13; grid-row: 3 / 4; }
}

/* ---------------- PANINI ISOLE — full nautical route ---------------- */
.isole-route { position: relative; margin-top: var(--space-xl); padding: clamp(1.5rem,4vw,3rem) 0; }
.isole-route__chart { position: absolute; inset: 0; background-image: linear-gradient(var(--mare-600) 1px, transparent 1px), linear-gradient(90deg, var(--mare-600) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.07; border-radius: var(--radius-lg); }

/* ============================================================
   TOP BAR — social + contatti (above the main nav)
   ============================================================ */
.site-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  background: var(--mare-800); color: var(--sabbia-200);
  padding: 7px clamp(1rem, 4vw, 3rem);
  font-size: var(--fs-caption); overflow: hidden;
  transition: height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.site-topbar a { color: var(--sabbia-200); display: inline-flex; align-items: center; gap: 6px; }
.site-topbar a:hover { color: #fff; text-decoration: none; }
.site-topbar__contacts { display: flex; gap: var(--space-md); align-items: center; }
.site-topbar__contacts > span, .site-topbar__contacts > a { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.site-topbar__contacts .sep { opacity: 0.4; gap: 0; }
.site-topbar__social { display: flex; gap: 4px; align-items: center; }
.site-topbar__social a { width: 30px; height: 30px; justify-content: center; border-radius: 50%; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), transform var(--dur-fast); }
.site-topbar__social a:hover { background: rgba(255,255,255,0.14); color: #fff; transform: translateY(-1px); }
/* collapse the topbar once scrolled */
.site-header[data-scrolled="true"] .site-topbar { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
@media (max-width: 680px){ .site-topbar__contacts .addr { display: none; } }

/* header becomes a column: topbar + main row */
.site-header { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
.site-header__main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 0.6rem clamp(1rem, 4vw, 3rem); }

/* nav links: color change on hover; a little fish slides underneath */
.site-nav { position: relative; }
.site-nav__link { position: relative; background: none; }
.site-nav__link:hover { background: none; color: var(--mare-700); }
.site-nav__link[aria-current="true"] { color: var(--mare-700); }
.site-nav__fish { position: absolute; left: 0; bottom: -2px; width: 34px; height: 20px; pointer-events: none; transform: translateX(0); transition: transform 0.5s var(--ease-sea); will-change: transform; }
.site-nav__fish svg { display: block; filter: drop-shadow(0 2px 4px rgba(43,107,131,0.3)); animation: fishWiggle 1.6s var(--ease-in-out) infinite; }
@keyframes fishWiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce){ .site-nav__fish, .site-nav__fish svg { transition: none; animation: none; } }

/* burger (mobile only) */
.site-burger { display: none; background: none; border: none; cursor: pointer; color: var(--mare-700); padding: 0.4em; border-radius: var(--radius-sm); }
.site-burger:hover { background: var(--mare-100); }

/* ===== FULL-SCREEN MOBILE MENU ===== */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: linear-gradient(170deg, var(--mare-700), var(--mare-800));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1rem, 4vh, 2rem); padding: clamp(3.5rem,9vh,5rem) var(--space-lg) clamp(1.5rem,5vh,2.5rem);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: scale(1.04);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: scale(1); }
.mobile-menu__close { position: fixed; top: var(--space-lg); right: var(--space-lg); background: rgba(255,255,255,0.12); border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast); }
.mobile-menu__close:hover { background: rgba(255,255,255,0.24); }
.mobile-menu__logo { height: clamp(64px, 12vh, 88px); width: auto; filter: brightness(0) invert(1); }
.mobile-menu__nav { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.mobile-menu__link {
  font-family: var(--font-display); font-size: clamp(1.75rem, 6.5vh, 2.6rem); line-height: 1.15;
  color: var(--sabbia-200); background: none; border: none; cursor: pointer; padding: 0.06em 0.4em;
  opacity: 0; transform: translateY(18px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-fast);
}
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu__link:hover, .mobile-menu__link[aria-current="true"] { color: #fff; font-style: italic; }
.mobile-menu__cta { display: inline-flex; align-items: center; gap: 0.5em; background: var(--bianco); color: var(--mare-800); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); padding: 0.85em 1.8em; border-radius: var(--radius-pill); text-decoration: none; box-shadow: var(--shadow-md); }
.mobile-menu__cta:hover { color: var(--mare-800); background: var(--sabbia-200); }
.mobile-menu__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.mobile-menu__social { display: flex; gap: 12px; }
.mobile-menu__social a { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast), transform var(--dur-fast); }
.mobile-menu__social a:hover { background: var(--mare-500); transform: translateY(-2px); }
.mobile-menu__foot .lang { border-color: rgba(255,255,255,0.35); }
.mobile-menu__foot .lang button { color: var(--sabbia-200); }
.mobile-menu__foot .lang button[data-on="true"] { background: var(--mare-500); color: #fff; }
@media (prefers-reduced-motion: reduce){ .mobile-menu, .mobile-menu__link { transition: opacity var(--dur-base); transform: none; } }

/* ===== MOBILE HEADER — centered logo, burger right ===== */
@media (max-width: 860px) {
  .site-header__main { position: relative; justify-content: center; }
  .site-header__brand { margin: 0 auto; }
  .site-header__right { position: absolute; right: clamp(1rem,4vw,3rem); top: 50%; transform: translateY(-50%); }
  .site-header__right .lang { display: none; }
  .site-burger { display: inline-flex; }   /* restore the mobile menu trigger */
  .site-topbar__contacts .addr { display: none; }
}
@media (min-width: 861px) { .mobile-menu { display: none; } }
@media (max-width: 700px) {
  .hero { justify-content: center; }
  .hero__inner { margin-left: auto; margin-right: auto; width: calc(100% - 2 * clamp(1rem, 5vw, 1.5rem)); max-width: 560px; }
}

/* Prenota CTA — icon transforms on hover */
.cta-prenota .thm-btn__icon { transition: transform var(--dur-base) var(--ease-soft); }
.cta-prenota:hover .thm-btn__icon { transform: rotate(-18deg) scale(1.18) translateY(-1px); }

/* hero CTA — fish swims L→R + colour invert (white-on-blue → blue-on-white) */
.cta-fish {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--weight-body-semibold); font-size: var(--fs-body);
  padding: 1em 2.1em; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer;
  background: var(--mare-500); color: var(--bianco); box-shadow: inset 0 0 0 2px var(--mare-500), var(--shadow-sm);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cta-fish:hover, .cta-fish:focus-visible { background: var(--bianco); color: var(--mare-600); box-shadow: inset 0 0 0 2px var(--mare-500), var(--shadow-md); }
.cta-fish__label { position: relative; z-index: 1; }
.cta-fish__swim { position: absolute; top: 50%; left: -34px; transform: translateY(-50%); color: var(--mare-500); opacity: 0; pointer-events: none; }
.cta-fish:hover .cta-fish__swim, .cta-fish:focus-visible .cta-fish__swim { animation: ctaFishSwim 0.75s var(--ease-out) forwards; }
@keyframes ctaFishSwim { 0% { left: -34px; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { left: calc(100% + 14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .cta-fish__swim { display: none; } }

/* ============================================================
   IMAGE LIGHTBOX
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: clamp(1rem,4vw,3rem); background: rgba(31,58,70,0.92); backdrop-filter: blur(8px); opacity: 1; animation: lbFade 0.25s var(--ease-out) backwards; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage { position: relative; max-width: min(1100px, 92vw); max-height: 74vh; margin: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__img { max-width: 100%; max-height: 74vh; width: auto; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); opacity: 1; transform: none; animation: lbZoom 0.3s var(--ease-out) backwards; }
@keyframes lbZoom { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2em 1em 0.8em; background: linear-gradient(0deg, rgba(31,58,70,0.85), transparent); color: var(--bianco); font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); text-align: center; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.lightbox__count { position: absolute; top: 12px; right: 14px; background: rgba(31,58,70,0.6); color: var(--sabbia-200); font-size: var(--fs-caption); padding: 3px 10px; border-radius: var(--radius-pill); }
.lightbox__close { position: fixed; top: var(--space-lg); right: var(--space-lg); width: 50px; height: 50px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background var(--dur-fast); }
.lightbox__close:hover { background: rgba(255,255,255,0.28); }
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast); }
.lightbox__nav:hover { background: var(--mare-500); }
.lightbox__nav--prev { left: clamp(0.5rem,2vw,1.5rem); } .lightbox__nav--next { right: clamp(0.5rem,2vw,1.5rem); }
.lightbox__thumbs { display: flex; gap: 8px; max-width: 92vw; overflow-x: auto; padding: 4px; }
.lightbox__thumb { flex: none; width: 64px; height: 48px; border-radius: var(--radius-xs); overflow: hidden; border: 2px solid transparent; background: none; padding: 0; cursor: pointer; opacity: 0.6; transition: opacity var(--dur-fast), border-color var(--dur-fast); }
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: 1; }
.lightbox__thumb.is-on { opacity: 1; border-color: var(--mare-300); }
@media (max-width: 640px){ .lightbox__nav { width: 44px; height: 44px; font-size: 26px; } .lightbox__cap { font-size: var(--fs-body); } }
.cta-prenota::after { content: ""; }

/* ============================================================
   PANINO COMPOSER — animated illustrated sandwich
   ============================================================ */
.panini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--grid-gap); margin-top: var(--space-xl); }
.pcard {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--space-md); align-items: center;
  background: var(--bianco-pure); border: 1px solid var(--border-hair); border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-sm); cursor: default;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  outline: none; text-align: left;
}
.pcard:hover, .pcard:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-mare); }
.pcard__sandwich { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; }
.pcard__sandwich .psvg { width: 92px; height: auto; overflow: visible; }
.pp { fill: none; stroke: var(--mare-500); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pp .seed { stroke-width: 1.6; }
/* assembled by default; hover/focus replays the line-art drop-in */
@media (prefers-reduced-motion: no-preference) {
  .pcard:hover .pp, .pcard:focus-visible .pp { animation: paninoDropG 0.55s var(--ease-out) backwards; }
  .pcard:hover .pp-bunb, .pcard:focus-visible .pp-bunb { animation-delay: 0s; }
  .pcard:hover .pp-cheese, .pcard:focus-visible .pp-cheese { animation-delay: 0.09s; }
  .pcard:hover .pp-patty, .pcard:focus-visible .pp-patty { animation-delay: 0.18s; }
  .pcard:hover .pp-lettuce, .pcard:focus-visible .pp-lettuce { animation-delay: 0.27s; }
  .pcard:hover .pp-bunt, .pcard:focus-visible .pp-bunt { animation-delay: 0.36s; }
}
@keyframes paninoDropG { 0% { transform: translateY(-66px); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
.pcard__head { display: flex; align-items: baseline; gap: 0.5rem; }
.pcard__num { font-family: var(--font-display); font-style: italic; font-size: var(--fs-caption); color: var(--mare-400); }
.pcard__isola { font-family: var(--font-display); font-size: var(--fs-dish); color: var(--mare-700); }
.pcard--vino .pcard__isola { color: var(--vino-600); }
.pcard__desc { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-normal); margin: 0.5rem 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base), margin var(--dur-base); }
.pcard:hover .pcard__desc, .pcard:focus-visible .pcard__desc { max-height: 8em; opacity: 1; margin: 0.5rem 0 0.7rem; }
.pcard__foot { display: flex; align-items: baseline; justify-content: space-between; }
.pcard__tag { font-family: var(--font-display); font-style: italic; font-size: var(--fs-caption); color: var(--vino-500); }
.pcard__price { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--vino-500); }

/* ============================================================
   MENU TABS — selection animation
   ============================================================ */
.menu-tab { position: relative; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-base) var(--ease-out); }
.menu-tab[data-on="true"] { animation: tabPop 0.34s var(--ease-soft); }
@keyframes tabPop { 0% { transform: scale(0.92); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .menu-grid { animation: menuFade 0.45s var(--ease-out); }
}
@keyframes menuFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* footer social */
.site-footer__social { display: flex; gap: 8px; margin-top: var(--space-md); }
.site-footer__social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--sabbia-200); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast), color var(--dur-fast); }
.site-footer__social a:hover { background: var(--mare-500); color: #fff; transform: translateY(-2px); }

/* ============================================================
   "LE NOSTRE ISOLE" — interactive panini (stage above + names bar)
   ============================================================ */
.isole-x { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); width: 100%; }
.isole-x__stage { width: 100%; min-height: 240px; display: flex; align-items: center; justify-content: center; }
.isole-x__panel {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--space-lg); align-items: center;
  width: 100%; max-width: 600px; background: var(--bianco-pure); border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-lg) var(--space-xl);
  text-align: left; animation: stagePop 0.4s var(--ease-out);
}
@keyframes stagePop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.isole-x__svg { width: 108px; justify-self: center; }
.isole-x__svg .psvg { width: 108px; height: auto; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .isole-x__panel .pp { animation: paninoDropG 0.55s var(--ease-out) backwards; }
  .isole-x__panel .pp-bunb { animation-delay: 0s; }
  .isole-x__panel .pp-cheese { animation-delay: 0.09s; }
  .isole-x__panel .pp-patty { animation-delay: 0.18s; }
  .isole-x__panel .pp-lettuce { animation-delay: 0.27s; }
  .isole-x__panel .pp-bunt { animation-delay: 0.36s; }
}
.isole-x__head { display: flex; align-items: baseline; gap: 0.5rem; }
.isole-x__num { font-family: var(--font-display); font-style: italic; color: var(--mare-400); font-size: var(--fs-caption); }
.isole-x__isola { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--vino-600); }
.isole-x__desc { font-size: var(--fs-body); color: var(--text-body); line-height: var(--lh-normal); margin: 0.5rem 0 0.8rem; }
.isole-x__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.isole-x__tag { font-family: var(--font-display); font-style: italic; color: var(--vino-500); font-size: var(--fs-small); }
.isole-x__price { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--vino-500); }
.isole-x__hint { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--text-muted); }
.isole-x__hint p { font-style: italic; font-family: var(--font-display); font-size: var(--fs-lead); }
.isole-x__svg--ghost { width: 86px; opacity: 0.5; animation: seaBob 3.4s var(--ease-in-out) infinite; }
/* the names bar — little islands sitting ON a calm sea line */
.isole-x__bar { position: relative; width: 100%; max-width: 1000px; }
.isole-x__wave { position: absolute; top: 0; left: 0; width: 100%; height: 40px; z-index: 0; pointer-events: none; }
.isole-x__names { display: flex; justify-content: space-between; gap: var(--space-sm); position: relative; z-index: 1; }
.isole-x__name { font-family: var(--font-display); font-size: var(--fs-dish); color: var(--mare-700); background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; transition: color var(--dur-fast); }
.isole-x__isle { display: block; width: 36px; height: 24px; }
.isole-x__isle svg { display: block; width: 36px; height: auto; overflow: visible; }
.isole-x__isle path { fill: var(--mare-100); stroke: var(--mare-500); stroke-width: 2; stroke-linejoin: round; transition: fill var(--dur-fast) var(--ease-out), stroke var(--dur-fast); }
.isole-x__isle .isle-peak { fill: none; stroke: var(--mare-400); stroke-width: 1.6; }
.isole-x__label { transition: color var(--dur-fast); }
/* hover/active: colour change only — no movement */
.isole-x__name:hover, .isole-x__name[data-on="true"] { color: var(--vino-600); }
.isole-x__name:hover .isole-x__isle path, .isole-x__name[data-on="true"] .isole-x__isle path { fill: var(--vino-100); stroke: var(--vino-500); }
.isole-x__name:hover .isle-peak, .isole-x__name[data-on="true"] .isle-peak { stroke: var(--vino-400); }
@media (max-width: 680px) {
  .isole-x__panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .isole-x__foot { flex-direction: column; align-items: center; gap: 0.3rem; }
  .isole-x__names { flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
  .isole-x__wave { display: none; }
}

/* creative SVG mask for editorial images (cove / wave cut) */
.mask-cove { clip-path: url(#themaCove); box-shadow: none !important; border-radius: 0 !important; }

/* pescato intro: heading + animated sea scene fills the void */
.pescato-intro { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; }
.pescato-scene { width: 100%; max-width: 480px; justify-self: end; }
.seascene { width: 100%; height: auto; overflow: visible; }
.seascene .ss-fish1 { animation: ssSwimR 11s linear infinite; }
.seascene .ss-fish2 { animation: ssSwimL 9s linear infinite; }
.seascene .ss-fish3 { animation: ssSwimR 15s linear infinite; }
.seascene .ss-fish4 { animation: ssSwimL 7.5s linear infinite; }
.seascene .ss-fish5 { animation: ssSwimL 17s linear infinite; }
.seascene .ss-fish6 { animation: ssSwimR 6.5s linear infinite; }
.seascene .ss-line { animation: ssBobLine 5s var(--ease-in-out) infinite; }
.seascene .ss-line2 { animation: ssBobLine 6.5s var(--ease-in-out) infinite reverse; }
.seascene .ss-bub { opacity: 0; }
.seascene .ss-bub1 { animation: ssBubble 4s ease-in infinite; }
.seascene .ss-bub2 { animation: ssBubble 5.4s ease-in 1s infinite; }
.seascene .ss-bub3 { animation: ssBubble 4.6s ease-in 2s infinite; }
/* L→R fish (face right) and R→L fish (flipped) at varied depths */
@keyframes ssSwimR { 0% { transform: translate(-90px, 56px) scaleX(1); } 100% { transform: translate(500px, 56px) scaleX(1); } }
@keyframes ssSwimL { 0% { transform: translate(500px, 120px) scaleX(-1); } 100% { transform: translate(-90px, 120px) scaleX(-1); } }
.seascene .ss-fish3 { --d: 96px; } .seascene .ss-fish5 { --d: 150px; } .seascene .ss-fish4 { --d: 40px; } .seascene .ss-fish6 { --d: 78px; }
.seascene .ss-fish3 { animation-name: ssSwimR3; } .seascene .ss-fish5 { animation-name: ssSwimL5; } .seascene .ss-fish4 { animation-name: ssSwimL4; } .seascene .ss-fish6 { animation-name: ssSwimR6; }
@keyframes ssSwimR3 { 0% { transform: translate(-90px, 96px) scaleX(1); } 100% { transform: translate(500px, 96px) scaleX(1); } }
@keyframes ssSwimL5 { 0% { transform: translate(500px, 150px) scaleX(-1); } 100% { transform: translate(-110px, 150px) scaleX(-1); } }
@keyframes ssSwimL4 { 0% { transform: translate(500px, 40px) scaleX(-1); } 100% { transform: translate(-70px, 40px) scaleX(-1); } }
@keyframes ssSwimR6 { 0% { transform: translate(-70px, 78px) scaleX(1); } 100% { transform: translate(500px, 78px) scaleX(1); } }
@keyframes ssBobLine { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes ssBubble { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-110px) scale(1); } }
@media (prefers-reduced-motion: reduce){ .seascene * { animation: none !important; } }
@media (max-width: 820px){ .pescato-intro { grid-template-columns: 1fr; } .pescato-scene { display: block; max-width: 360px; margin: var(--space-md) auto 0; justify-self: center; } }

/* small animated sea/fish icon marking section openers */
.thm-eyebrow:has(.sea-ico)::before { display: none; }
.sea-ico { display: inline-flex; align-items: center; color: var(--mare-500); margin-right: 0.4em; transform-origin: center; animation: seaSwim 3.2s var(--ease-in-out) infinite; }
.thm-eyebrow--vino .sea-ico, .sea-ico.is-vino { color: var(--vino-500); }
@keyframes seaSwim { 0% { transform: translateX(-3px) rotate(-4deg); } 50% { transform: translateX(4px) rotate(4deg); } 100% { transform: translateX(-3px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce){ .sea-ico, .isole-x__svg--ghost { animation: none; } }