:root {
  --ink: #1a1814; --ink-mid: #4a463f; --ink-soft: #8a857c;
  --bg: #faf8f5; --rule: #d8d4cc; --accent: #b05c38; --accent-l: #c97a55;
  --corsa: min(38vw, 260px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: 'Source Sans 3', system-ui, sans-serif;
}
.vasca {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 16px; text-align: center; overflow: hidden;
}
.pesce { animation: nuota 11s linear infinite; margin-bottom: 28px; }
.pesce svg { display: block; animation: ondeggia 2.4s ease-in-out infinite; }
.etichetta {
  margin: 0 0 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.scusa {
  margin: 0; max-width: 34rem; min-height: 3em;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(24px, 4.5vw, 34px); line-height: 1.3;
}
.nota { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.comandi { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; visibility: hidden; }
.js .comandi { visibility: visible; }
.comandi button {
  font: inherit; font-size: 15px; color: var(--ink-mid); background: none;
  border: 1px solid var(--rule); border-radius: 4px; padding: 8px 16px; cursor: pointer;
}
.comandi button:hover, .comandi button:focus-visible { border-color: var(--accent); color: var(--accent); }
.stato { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.piede { padding: 16px; text-align: center; font-size: 13px; }
.piede a { color: var(--ink-soft); }

@keyframes nuota {
  0%   { transform: translateX(calc(-1 * var(--corsa))) scaleX(1); }
  49%  { transform: translateX(var(--corsa)) scaleX(1); }
  50%  { transform: translateX(var(--corsa)) scaleX(-1); }
  99%  { transform: translateX(calc(-1 * var(--corsa))) scaleX(-1); }
  100% { transform: translateX(calc(-1 * var(--corsa))) scaleX(1); }
}
@keyframes ondeggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .pesce, .pesce svg { animation: none; }
}