@charset "UTF-8";
/* custom props per a temes */
:root {
  --rise: -50px;
  --size: 8px; /* mida base bombolles */
  --wiggle: 12px;
  --wiggleDur: 2.2s;
  /* NOTES */
  --note-scale: 1.8; /* 👈 notes més grans */
  --note-size: calc(var(--size) * var(--note-scale));
  --note-color: rgba(255, 255, 255, 0.95);
  --note-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

@keyframes riseVar {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  70% {
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, var(--rise));
    opacity: 0;
  }
}
@keyframes wiggle {
  from {
    transform: translateX(calc(-1 * var(--wiggle)));
  }
  to {
    transform: translateX(var(--wiggle));
  }
}
.particle {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
  will-change: transform, opacity;
  animation: riseVar 3s ease-out forwards;
}

/* Contingut “visual” que oscil·la lateralment (bombolla o nota) */
.particle__bubble,
.particle__note {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  will-change: transform;
  animation: wiggle var(--wiggleDur) ease-in-out infinite alternate;
}

/* Bombolla clàssica */
.particle__bubble {
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 40%, rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 12px rgba(255, 255, 255, 0.35);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Notes (text / img / svg) comparteixen la mateixa classe */
.particle__note {
  /* TEXT per defecte */
  font-size: var(--note-size); /* 👈 puja la mida del text nota */
  line-height: 1;
  color: var(--note-color);
  text-shadow: var(--note-shadow);
  /* Si és SVG inline */
  /* Si és IMG */
}
.particle__note svg {
  display: block;
  width: var(--note-size); /* 👈 força mida a SVG */
  height: var(--note-size);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
  color: var(--note-color);
}
.particle__note svg path,
.particle__note svg circle,
.particle__note svg rect,
.particle__note svg polygon,
.particle__note svg polyline {
  fill: currentColor;
}
.particle__note img {
  display: block;
  width: var(--note-size); /* 👈 força mida a IMG */
  height: var(--note-size);
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* reducció de moviment */
@media (prefers-reduced-motion: reduce) {
  .particle {
    animation-duration: 1ms;
  }
  .particle__bubble,
  .particle__note {
    animation: none;
  }
}

/*# sourceMappingURL=particles.css.map */