/* .hero { position: relative; min-height: 60vh; display:grid; place-items:center; overflow:hidden; }
    .hero svg { width:100%; height:auto; max-height:95vh; display:block; } */

    /* Modal */
    /* .modal-backdrop { position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.05); backdrop-filter:blur(2px); z-index:50; padding:16px; }
    .modal { width:min(640px,92vw); background:var(--panel); border:1px solid var(--panel-outline); border-radius:16px; padding:clamp(16px,3vw,24px); box-shadow:0 20px 60px rgba(0,0,0,.9); position:relative; }
    .modal h3 { margin:0 0 8px; font-size:clamp(18px,3vw,22px); }
    .modal p { margin:0; color:#d6d6d6; line-height:1.5; }
    .modal .close { position:absolute; top:10px; right:12px; border:0; background:transparent; color:#fff; font-size:22px; cursor:pointer; padding:6px; line-height:1; } */
:root {
  /* Palette principale derivata da #de542c */
  --bubble-1:  #de542c; /* Orange Base – colore principale */
  --bubble-2:  #f46d47; /* Light Peach – chiaro e caldo */
  --bubble-3:  #eb6936; /* Sunset – più vivo e energico */
  --bubble-4:  #e06b4f; /* Coral – morbido e accogliente */
  --bubble-5:  #f37a5a; /* Salmon – pastello e moderno */
  --bubble-6:  #c64a24; /* Burnt Orange – intenso e deciso */
  --bubble-7:  #b1442a; /* Terracotta – più terroso e bilanciato */
  --bubble-8:  #f28c3c; /* Amber – più giallo, caldo e luminoso */
  --bubble-9:  #ff7a2c; /* Tangerine – brillante e accattivante */
  --bubble-10: #a33c24; /* Rust – scuro, ottimo per hover o ombre */
  --bubble-11: #d46c5e; /* Rose Clay – rosato e raffinato */
  --bubble-12: #b85b33; /* Copper – metallico e profondo */
  --bubble-13: #ff9a73; /* Soft Apricot – delicato e tenue */
}

/* Message Box */
/* Backdrop invariato */
/* Backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.35); /* leggero scurimento */
  backdrop-filter: blur(8px);       /* sfocatura più evidente */
  z-index: 50;
  padding: 16px;
}

/* Modale elegante */
.modal {
  width: min(640px, 92vw);
  background: linear-gradient(145deg, #ffffff 0%, #e0e0f5 100%); /* sfumatura sofisticata */
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2); /* ombra morbida e realistica */
  position: relative;
  color: #222;
  overflow: hidden; /* per contenere immagine decorativa */
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Immagine decorativa */
.modal-bg {
  position: absolute;
  top: -20px;
  right: 0px;
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
  transform: rotate(15deg);
}

/* Entrata fluida */
.modal-backdrop[aria-hidden="false"] .modal {
  transform: translateY(0);
  opacity: 1;
}

/* Titolo */
.modal h3 {
  margin: 0 0 12px;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  color: #de542c;
}

/* Testo */
.modal p {
  margin: 0;
  color: #333;
  line-height: 1.6;
}

/* Pulsante di chiusura */
.modal .close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #444;
  font-size: 26px;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal .close:hover {
  opacity: 1;
  transform: scale(1.1);
}


/* .bubble:focus text, .bubble:hover text { text-decoration: underline; } */
.bubble:focus,
.bubble:focus-visible {
  outline: none;
}
    /* Sonar effect: two ripples scale & fade subtly on hover (and focus-visible) */
    @keyframes sonarPulse {
      0%   { transform: scale(1);   opacity: .0; }
      10%  { opacity: .22; }
      100% { transform: scale(1.8); opacity: 0; }
    }
    .bubble .sonar { transform-box: fill-box; transform-origin: center; }
    .bubble:hover .sonar, .bubble:focus-visible .sonar {
      animation: sonarPulse 1.6s ease-out infinite;
    }
    .bubble:hover .sonar-2, .bubble:focus-visible .sonar-2 { animation-delay: .4s; }

@keyframes bubbleFloat {
  0%   { transform: translateY(0px); }
  25%  { transform: translateY(-6px); }
  50%  { transform: translateY(0px); }
  75%  { transform: translateY(6px); }
  100% { transform: translateY(0px); }
}

/* Classe riutilizzabile */
.bubbleMove {
  animation: bubbleFloat 3s linear infinite;
}

/* Variante leggermente random per ogni bolla */
.bubbleMove.delay-bubble-1 { animation-delay: 0.5s; }
.bubbleMove.delay-bubble-2 { animation-delay: 1s; }
.bubbleMove.delay-bubble-3 { animation-delay: 1.5s; }