/* ============================================================
   Camilla — Primo compleanno in fondo al mare
   Landing page · stili globali
   ------------------------------------------------------------
   Il resto degli stili è inline su ogni elemento nell'HTML
   (così è facile spostare/ritoccare i singoli pezzi).
   Qui stanno solo: reset, font, animazioni e classi helper.
   ============================================================ */

*{ box-sizing:border-box; }

html, body{ margin:0; }

body{
  background:#e7e5df;
  font-family:'Quicksand', sans-serif;
  color:#5b6184;
}

/* --- helper: decorazioni illustrate posizionate in assoluto --- */
.deco{
  position:absolute;
  pointer-events:none;
  user-select:none;
  object-fit:contain;
}

/* --- bollicine che salgono --- */
.bub{
  position:absolute;
  bottom:-20px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.9), rgba(180,210,238,1));
  box-shadow:inset 0 0 6px rgba(255,255,255,.7);
  animation:rise linear infinite;
  pointer-events:none;
  z-index:50 !important;
}
.rise-bubble{ pointer-events:none; }

/* ============================================================
   ANIMAZIONI
   ============================================================ */
@keyframes floatY  { 0%,100%{ transform:translateY(0); }   50%{ transform:translateY(-10px); } }
@keyframes floatYb { 0%,100%{ transform:translateY(0); }   50%{ transform:translateY(-16px); } }
@keyframes sway    { 0%,100%{ transform:rotate(-4deg); }   50%{ transform:rotate(4deg); } }
@keyframes swayR   { 0%,100%{ transform:scaleX(-1) rotate(-4deg); } 50%{ transform:scaleX(-1) rotate(4deg); } }
@keyframes twinkle { 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:.95; transform:scale(1.1); } }
@keyframes balloonBob { 0%,100%{ transform:translateY(0) rotate(-2.5deg); } 50%{ transform:translateY(-14px) rotate(2.5deg); } }

@keyframes blobMorph {
  0%,100%{ border-radius:47% 53% 63% 37% / 43% 46% 54% 57%; transform:translateX(-50%) translateY(0) rotate(0deg); }
  50%    { border-radius:58% 42% 38% 62% / 55% 58% 42% 45%; transform:translateX(-50%) translateY(-10px) rotate(3deg); }
}

@keyframes rise {
  0%   { transform:translateY(20px); opacity:0; }
  12%  { opacity:.8; }
  100% { transform:translateY(-220px); opacity:0; }
}

@keyframes swimA {
  0%   { transform:translate(0,0) rotate(-3deg); }
  33%  { transform:translate(7px,-8px) rotate(2deg); }
  66%  { transform:translate(-4px,-3px) rotate(-1deg); }
  100% { transform:translate(0,0) rotate(-3deg); }
}
@keyframes swimB {
  0%   { transform:translate(0,0) rotate(3deg); }
  33%  { transform:translate(-7px,-7px) rotate(-2deg); }
  66%  { transform:translate(4px,-2px) rotate(1deg); }
  100% { transform:translate(0,0) rotate(3deg); }
}

@keyframes bubbleUp {
  0%   { transform:translateY(34px) scale(1); opacity:0; }
  18%  { opacity:.92; }
  70%  { opacity:.7; }
  100% { transform:translateY(-72px) scale(.3); opacity:0; }
}