@font-face {
  font-family: "Slackside One";
  src: url("../fonts/SlacksideOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-sfondo: #f6ebd7;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--color-sfondo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

/* ---------- Header (logo + navigazione Isola/Mappa) ---------- */

.site-header {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.site-header a {
  pointer-events: auto;
}

.site-logo img {
  display: block;
  width: 312px;
  height: 312px;
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 28px;
  line-height: 1.3;
}

.site-nav-link {
  text-decoration: none;
  color: #9aa5bd;
}

.site-nav-link.is-active {
  color: #233972;
  font-weight: 700;
}

@media (max-width: 768px) {
  .site-logo img {
    width: 64px;
    height: 64px;
  }

  .site-nav {
    font-size: 16px;
  }
}

/* ---------- Pagina Mappa: scena animata ---------- */

.mappa-scena {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  cursor: grab;
  /* Il trascinamento è gestito a mano in JS (mousedown/touchstart su
     questo elemento): senza touch-action:none, su mobile il browser
     prova ANCHE a scorrere/zoommare la pagina con lo stesso gesto,
     entrando in conflitto col nostro codice e rendendo l'animazione e il
     trascinamento a scatti o bloccati — la causa più probabile di
     "l'animazione non funziona bene su mobile". */
  touch-action: none;
}

.mappa-scena:active {
  cursor: grabbing;
}

#mappa-svg {
  display: block;
  position: absolute;
  /* Leggermente più grande della cornice visibile e ricentrato (115%,
     scostato di -7.5% su ogni lato): così, anche prima di ingrandire con
     le lenti, il disegno "sborda" già un po' oltre i bordi ed è possibile
     trascinarlo un po' in ogni direzione senza scoprire il fondo della
     pagina. Va cambiato insieme a MARGINE_TRASCINAMENTO in js/mappa.js,
     che deve restare uguale o più piccolo di questo sbordo. */
  width: 115%;
  height: 115%;
  top: -7.5%;
  left: -7.5%;
}

#mappa-nuvole-svg {
  display: block;
  position: absolute;
  /* A differenza di #mappa-svg, questo copre ESATTAMENTE lo schermo
     (0/100%, non 115%/-7.5%): le nuvole sono un effetto dell'intro che
     sparisce prima che le lenti/il trascinamento diventino utilizzabili,
     non serve che seguano lo sbordo pensato per quello. Sta sopra
     #mappa-svg nell'ordine del documento (dopo, quindi disegnato per
     ultimo) e non deve mai intercettare i click. */
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#mappa-isola-scala {
  transform-box: view-box;
  transform-origin: 960px 540px;
  transform: scale(0.15);
  /* Scala di arrivo: impostata da JS via matchMedia (0.9 su schermi
     larghi, più piccola su mobile — vedi SCALA_ISOLA_RIPOSO in
     js/mappa.js) così l'isola non esce dai bordi su schermi stretti. */
  --mappa-scala-finale: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
  #mappa-isola-scala.mappa-isola-cresce {
    animation: mappa-isola-cresce 4.5s ease-in-out forwards;
  }
}

@keyframes mappa-isola-cresce {
  0%   { transform: scale(0.15); }
  100% { transform: scale(var(--mappa-scala-finale, 0.9)); }
}

.mappa-nuvola-istanza {
  /* Niente transform-box/transform-origin qui: l'animazione di questa
     classe è una pura traslazione (vedi mappa-nuvola-apre più sotto),
     che non dipende in alcun modo dal punto di origine — l'unico motivo
     per averceli sarebbe stato copiare il pattern usato altrove per
     scale/rotate. transform-box:fill-box su un <g> (non una forma) è
     anche un punto notoriamente meno affidabile su Safari/iOS, quindi
     meglio non averlo affatto se non serve.
     Lo sfocato NON è più qui (CSS "filter: blur()"): su un iPhone reale
     restava nitido invece che sfocato nonostante funzionasse in ogni
     test qui — sostituito da un <filter> SVG nativo con
     <feGaussianBlur>, applicato via attributo "filter" direttamente
     sull'elemento in js/mappa.js, più affidabile su Safari/iOS.
     Il colore non si "schiarisce" più con un filtro CSS
     (brightness/saturate su nero+blu restava comunque bluastro e si
     perdeva sul mare sotto, specialmente su mobile) — vedi sotto: i
     singoli tratti vengono ricolorati direttamente in bianco pieno. */
}

/* Nel disegno originale queste nuvole sono nero (nuvm-1/28) + blu
   (nuvm-10/26); nuvm-24 è "fill:none" apposta (un tratto strutturale
   invisibile, non va toccato). Sovrascrivendo solo i primi quattro con
   bianco pieno le nuvole si leggono chiaramente anche sul mare blu,
   invece di restare un blu-su-blu poco distinguibile. */
.mappa-nuvola-istanza .nuvm-1,
.mappa-nuvola-istanza .nuvm-10,
.mappa-nuvola-istanza .nuvm-26,
.mappa-nuvola-istanza .nuvm-28 {
  fill: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .mappa-nuvole-si-aprono .mappa-nuvola-istanza {
    animation: mappa-nuvola-apre 4.5s ease-in-out forwards;
    animation-delay: var(--nuvola-ritardo, 0s);
  }
}

@keyframes mappa-nuvola-apre {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--nuvola-dx, 0px), var(--nuvola-dy, 0px)); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .mappa-onde {
    animation: mappa-onde-respira 7s ease-in-out infinite;
  }
}

@keyframes mappa-onde-respira {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(14px); }
}

#lente-zoom,
#lente-dezoom {
  position: fixed;
  top: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s ease-in;
}

#lente-zoom {
  right: 16px;
}

#lente-dezoom {
  right: 68px;
}

#lente-zoom img,
#lente-dezoom img {
  width: 22px;
  height: 22px;
}

#lente-zoom.is-visibile,
#lente-dezoom.is-visibile {
  opacity: 1;
}

#mappa-svg {
  touch-action: none;
}

#mappa-svg .texture-overlay {
  mix-blend-mode: overlay;
  opacity: 0.75;
  pointer-events: none;
}

/* ---------- Scena ---------- */

.scene-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#scene-svg {
  display: block;
  width: 100%;
  height: 100%;
}

#scene-svg .texture-overlay {
  mix-blend-mode: overlay;
  opacity: 0.75;
  pointer-events: none;
}

/* Nuvole clonate via JS (vedi js/main.js initNuvole): ogni istanza gira
   in loop su uno dei due @keyframes qui sotto, che includono già la
   dissolvenza in ingresso/uscita legata al tempo, non alla posizione. */
#scene-svg .nuvola-istanza {
  will-change: transform, opacity;
}

@keyframes nuvola-davanti-cross {
  0%      { opacity: 0; transform: translate(-1920px, 0px); }
  1.664%  { opacity: 1; }
  98.336% { opacity: 1; }
  100%    { opacity: 0; transform: translate(2200px, 0px); }
}

@keyframes nuvola-lontane-cross {
  0%      { opacity: 0; transform: translate(-1920px, 0px); }
  0.896%  { opacity: 1; }
  99.104% { opacity: 1; }
  100%    { opacity: 0; transform: translate(2200px, 0px); }
}

#scene-svg #BOTTIGLIA_ICONA,
#scene-svg #CLICK_ME_ {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Il posizionamento di #ctaMobileWrap (icona bottiglia + click me) è
   calcolato interamente in JS (vedi initInquadraturaResponsive in
   main.js), per PC e mobile allo stesso modo: la porzione di disegno
   davvero visibile cambia in continuo col ridimensionamento della
   finestra, non solo passando la soglia mobile — una regola CSS fissa
   qui andrebbe in conflitto con l'attributo transform impostato via JS. */

/* Area cliccabile invisibile e più ampia sopra la bottiglia-icona: il
   disegno vero e proprio è sottile, cliccare "vicino" deve bastare. */
#scene-svg .bottiglia-hit-area {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}

/* ---------- Modulo di invio messaggio ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 41, 61, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.modal-backdrop.is-open {
  opacity: 1;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
}

.modal-view {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease;
}

.modal-view[hidden] {
  display: none;
}

#modal-svg,
#invio-anim-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#modal-svg foreignObject {
  overflow: visible;
}

.message-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Slackside One", cursive;
  background: #f6ebd7;
  border: 7px solid #fff;
  border-radius: 22px;
  box-sizing: border-box;
  overflow: hidden;
}

#message-input {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  /* Due livelli: il primo (sopra) è una "mascherina" color crema che
     copre l'unica riga che altrimenti spunterebbe troppo in alto,
     prima ancora della prima riga di testo (il pattern ripetuto sotto
     continua all'infinito anche verso l'alto); il secondo è il
     pattern di righe vero e proprio, ripetuto verso il basso. */
  background-image:
    linear-gradient(#f6ebd7 64px, transparent 64px),
    linear-gradient(rgba(26, 92, 176, 0.25) 1px, transparent 1px);
  background-repeat: no-repeat, repeat-y;
  background-size: 100% 64px, 100% 1.25em;
  /* 64px = altezza riga (52.5) + margine tra la base del testo e il
     rigo, misurata dal vero appoggio dei caratteri (senza ascendenti/
     discendenti) del font tramite Range.getBoundingClientRect. */
  background-position: 0 0, 0 64px;
  resize: none;
  outline: none;
  padding: 18px 20px 4px;
  font-family: inherit;
  font-size: 42px;
  line-height: 1.25;
  color: #1a5cb0;
  overflow-y: auto;
}

#message-input::placeholder {
  color: rgba(26, 92, 176, 0.45);
}

.char-counter {
  flex: 0 0 auto;
  padding: 2px 20px 12px;
  text-align: right;
  font-family: inherit;
  font-size: 20px;
  color: rgba(26, 92, 176, 0.7);
  user-select: none;
}

.char-counter.is-full {
  color: #b0392f;
}

.errore-invio {
  flex: 0 0 auto;
  padding: 0 20px 4px;
  font-family: inherit;
  font-size: 28px;
  line-height: 1.25;
  color: #b0392f;
}

.errore-invio[hidden] {
  display: none;
}

.consenso-riga {
  flex: 0 0 auto;
  padding: 4px 20px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  font-size: 19px;
  color: #1a5cb0;
}

.consenso-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
}

#consenso-checkbox {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: #1a5cb0;
  cursor: pointer;
}

.link-informativa {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 19px;
  color: #1a5cb0;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.link-informativa:hover {
  color: #0d3a70;
}

/* ---------- Informativa privacy (pannello a parte, sopra il modulo) ---------- */

.informativa-card {
  width: 100%;
  max-width: 640px;
  height: 80vh;
  max-height: 80vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  background: #f6ebd7;
  border: 7px solid #fff;
  /* Meno arrotondato del modulo messaggio (22px): un rettangolo vero e
     proprio, per distinguerlo visivamente da un "form" e farlo leggere
     più come un documento. */
  border-radius: 8px;
  font-family: "Slackside One", cursive;
  color: #1a5cb0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.informativa-titolo {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: normal;
}

.informativa-testo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 20px;
  line-height: 1.5;
  padding-right: 8px;
}

.informativa-testo p {
  margin: 0 0 14px;
}

.informativa-chiudi-btn {
  align-self: center;
  margin-top: 20px;
  padding: 12px 32px;
  background: #164e96;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-family: inherit;
  font-size: 22px;
  cursor: pointer;
}

.informativa-chiudi-btn:hover {
  filter: brightness(0.85);
}

/* ---------- Area riservata (CTRL+ALT+9) ---------- */

.admin-card {
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  background: #f6ebd7;
  border: 7px solid #fff;
  border-radius: 8px;
  padding: 28px 32px;
  font-family: "Slackside One", cursive;
  color: #1a5cb0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.admin-pannello {
  max-width: 760px;
  max-height: 85vh;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

/* "display: flex" sopra vince sempre sulla regola predefinita del
   browser per [hidden] (che è nel foglio di stile "di sistema", meno
   prioritario di qualunque regola scritta qui): senza questa riga il
   pannello resterebbe visibile anche da nascosto. Stesso problema già
   risolto altrove nel sito per .modal-view[hidden]. */
.admin-pannello[hidden] {
  display: none;
}

.admin-titolo {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: normal;
}

#admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-input {
  font-family: inherit;
  font-size: 20px;
  color: #1a5cb0;
  background: #fff;
  border: 2px solid rgba(26, 92, 176, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
}

.admin-input:focus {
  outline: none;
  border-color: #1a5cb0;
}

.admin-btn {
  align-self: center;
  margin-top: 6px;
  padding: 12px 32px;
  background: #164e96;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-family: inherit;
  font-size: 20px;
  cursor: pointer;
}

.admin-btn:hover {
  filter: brightness(0.85);
}

.admin-btn:disabled {
  opacity: 0.45;
  cursor: default;
  filter: none;
}

.admin-btn-danger {
  background: #b0392f;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 12px;
}

.admin-header-azioni {
  display: flex;
  gap: 16px;
}

.admin-link-btn {
  font-family: inherit;
  font-size: 18px;
  color: #1a5cb0;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.admin-link-btn:hover {
  color: #0d3a70;
}

.admin-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  margin: 14px 0 4px;
}

.admin-tab {
  font-family: inherit;
  font-size: 18px;
  color: #1a5cb0;
  background: rgba(26, 92, 176, 0.12);
  border: none;
  border-radius: 20px;
  padding: 6px 18px;
  cursor: pointer;
}

.admin-tab.is-active {
  background: #164e96;
  color: #fff;
}

.admin-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  font-size: 17px;
}

.admin-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.admin-toolbar .admin-btn {
  margin: 0;
  padding: 8px 18px;
  font-size: 16px;
}

.admin-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 2px solid rgba(26, 92, 176, 0.2);
  padding-top: 8px;
}

.admin-vuoto {
  text-align: center;
  color: rgba(26, 92, 176, 0.6);
  font-size: 18px;
  margin-top: 24px;
}

.admin-riga {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(26, 92, 176, 0.15);
}

.admin-riga-check {
  margin-top: 6px;
  width: 20px;
  height: 20px;
  accent-color: #1a5cb0;
  cursor: pointer;
  flex-shrink: 0;
}

/* Occupa lo stesso spazio della casella, quando quella non c'è (riga
   preferita nella scheda "Tutti"), così la stellina resta allineata
   con le altre righe invece di spostarsi a sinistra. */
.admin-riga-check-segnaposto {
  display: inline-block;
  width: 20px;
  flex-shrink: 0;
}

.admin-stella {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  background: none;
  border: none;
  color: rgba(26, 92, 176, 0.4);
  cursor: pointer;
  padding: 2px;
}

.admin-stella.is-attiva {
  color: #e0a33c;
}

.admin-riga-corpo {
  flex: 1;
  min-width: 0;
}

.admin-riga-data {
  font-size: 14px;
  color: rgba(26, 92, 176, 0.65);
  margin-bottom: 2px;
}

.admin-riga-testo {
  font-size: 17px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.admin-riga-elimina {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 14px;
  color: #b0392f;
  background: none;
  border: 1px solid #b0392f;
  border-radius: 14px;
  padding: 4px 12px;
  cursor: pointer;
}

.admin-riga-elimina:hover {
  background: #b0392f;
  color: #fff;
}

/* Alla stampa si vede solo l'elenco messaggi, in bianco e nero, senza
   sfondo scuro/pulsanti/checkbox: pensata per essere allegata o
   conservata su carta, non per riprodurre l'interfaccia. */
@media print {
  body * {
    visibility: hidden;
  }
  .admin-lista,
  .admin-lista * {
    visibility: visible;
  }
  .admin-lista {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    border: none;
  }
  .admin-riga-check,
  .admin-stella,
  .admin-riga-elimina {
    display: none;
  }
  .admin-riga-testo {
    color: #000;
  }
}

#modal-send-btn {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

#modal-send-btn:hover {
  filter: brightness(0.82);
}

@media (prefers-reduced-motion: no-preference) {
  #modal-send-btn:hover {
    animation: btn-squash-stretch 0.4s ease-in-out;
  }
}

#modal-send-btn.is-pressed {
  animation: btn-press 0.2s ease-out;
}

@keyframes btn-press {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

@keyframes btn-squash-stretch {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.12, 0.88); }
  60%  { transform: scale(0.94, 1.06); }
  100% { transform: scale(1, 1); }
}

.modal-view-form.is-closing {
  animation: form-shrink 0.35s ease-in forwards;
}

@keyframes form-shrink {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ---------- Audio ---------- */

#audio-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}

/* ---------- Animazioni di scena ---------- */

@media (prefers-reduced-motion: no-preference) {

  #scene-svg #ONDE {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: wave-drift 4.5s ease-in-out infinite;
  }

  #scene-svg #UCCELLI {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: bird-flap 1.6s ease-in-out infinite;
  }

  #scene-svg #CLICK_ME_ {
    animation: click-me-squash 4.5s ease-in-out infinite;
  }

  #scene-svg #BOTTIGLIA_ICONA {
    animation: bottle-wobble 4.5s ease-in-out infinite;
    animation-delay: 0.3s;
  }

  #scene-svg #BOTTIGLIA_ICONA.is-hover {
    animation: btn-squash-stretch 0.4s ease-in-out;
  }
}

/* Fa scorrere lateralmente l'onda che "immerge" le bottiglie in mare
   (vedi #ondaRitaglio in scene-fragment.svg). Il motivo si ripete ogni
   20 unità, quindi tornare a translateX(-20px) chiude il loop senza
   scatti visibili. */
@keyframes onda-scorre {
  from { transform: translateX(0); }
  to   { transform: translateX(-20px); }
}

@media (prefers-reduced-motion: no-preference) {
  #ondaRitaglioForma {
    animation: onda-scorre 5s linear infinite;
  }
}

@keyframes wave-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(16px, -9px); }
  50%  { transform: translate(32px, 2px); }
  75%  { transform: translate(14px, 9px); }
  100% { transform: translate(0, 0); }
}

@keyframes palm-sway {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(2.5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes bird-flap {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0.88); }
  100% { transform: scaleY(1); }
}

@keyframes click-me-squash {
  0%, 90%   { transform: scale(1, 1); }
  93%       { transform: scale(1.08, 0.9); }
  96%       { transform: scale(0.95, 1.06); }
  100%      { transform: scale(1, 1); }
}

@keyframes bottle-wobble {
  0%, 90%   { transform: rotate(0deg); }
  93%       { transform: rotate(5deg); }
  96%       { transform: rotate(-5deg); }
  100%      { transform: rotate(0deg); }
}

/* ---------- Animazione di invio (pergamena / bottiglia / tappo) ---------- */

#invio-anim-svg #BOTTIGLIA_ANIM,
#invio-anim-svg #PERGAMENA_ANIM,
#invio-anim-svg #TAPPO_ANIM {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

#invio-anim-svg #TAPPO_ANIM {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .modal-view-animation.is-playing #BOTTIGLIA_ANIM {
    animation: anim-bottle-in 0.3s ease-out forwards;
  }

  .modal-view-animation.is-playing #PERGAMENA_ANIM {
    animation: anim-paper-into-bottle 1.3s ease-in forwards;
    animation-delay: 0.3s;
  }

  .modal-view-animation.is-playing #TAPPO_ANIM {
    animation: anim-cork-pop 0.9s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: 1.7s;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Senza animazione, mostra direttamente lo stato finale (pergamena
     rimpicciolita dentro la bottiglia, tappo che la sigilla) invece di
     un salto secco da zero. */
  .modal-view-animation.is-playing #PERGAMENA_ANIM {
    opacity: 1;
    transform: translate(-204.16px, -75px) scale(0.75);
  }
  .modal-view-animation.is-playing #TAPPO_ANIM {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes anim-bottle-in {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes anim-paper-into-bottle {
  0%   { opacity: 1; transform: translate(0, 0) scale(1.3); }
  70%  { opacity: 1; transform: translate(-157.16px, -63px) scale(0.9); }
  100% { opacity: 1; transform: translate(-204.16px, -75px) scale(0.75); }
}

@keyframes anim-cork-pop {
  0%   { opacity: 0; transform: translateY(-160px) scale(0.55); }
  35%  { opacity: 1; transform: translateY(-70px) scale(0.75); }
  75%  { opacity: 1; transform: translateY(8px) scale(1.12); }
  90%  { opacity: 1; transform: translateY(-4px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Bottiglie nel mare ---------- */

#scene-svg .bottiglia-in-mare {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bottiglia-entra 0.5s ease-out forwards;
}

#scene-svg .bottiglia-in-mare.is-squashing {
  animation: btn-squash-stretch 0.4s ease-in-out;
}

#scene-svg .bottiglia-in-mare.in-dissolvenza {
  animation: bottiglia-affonda 1.8s ease-in forwards;
}

/* ---------- Easter egg: noce di cocco ---------- */
/* Volutamente nessun cursor:pointer qui: è un segreto, non un bottone. */

#scene-svg .noce-rottura {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

#scene-svg .noce-rottura.noce-rotta {
  animation: btn-squash-stretch 0.4s ease-in-out;
}

@media (prefers-reduced-motion: no-preference) {
  #scene-svg .noce-caduta.noce-cade {
    animation: noce-cade 0.6s cubic-bezier(.55, 0, 1, .45) forwards;
  }
}

@keyframes noce-cade {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(var(--noce-dy, 0px)) rotate(35deg); }
}

@media (prefers-reduced-motion: no-preference) {
  #scene-svg .palla-cade {
    animation: palla-cade 0.7s cubic-bezier(.55, 0, 1, .45) forwards;
  }
}

@keyframes palla-cade {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(var(--palla-dx, 0px), var(--palla-dy, 0px)); }
}

@media (prefers-reduced-motion: no-preference) {
  #scene-svg .bottiglia-in-mare .bottiglia-galleggiante {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: bottiglia-galleggia var(--float-duration, 4s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
  }
}

/* ---------- Easter egg: Wilson ---------- */

#scene-svg .wilson-testo {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  #scene-svg .wilson-testo {
    animation: wilson-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both;
  }
}

@keyframes wilson-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bottiglia-entra {
  0%   { opacity: 0; transform: scale(0.3); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bottiglia-affonda {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(40px); }
}

@keyframes bottiglia-galleggia {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(0, -6px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}