/* WondarCore — código propio, no generado. Se puede modificar libremente. */

/* Necesita ser el ancestro posicionado del overlay .cumple-fx-layer (layout.css no le pone
   position a .logo porque nunca lo necesitó antes). */
.logo { position: relative; }

.cumple-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.cumple-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cumple-color, #ff6b6b);
  opacity: 0;
  animation: cumpleBurst 900ms ease-out forwards;
  animation-delay: var(--cumple-delay, 0ms);
}

@keyframes cumpleBurst {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--cumple-tx)), calc(-50% + var(--cumple-ty))) scale(0.1); opacity: 0; }
}

.cumple-bubble {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translate(-50%, 0);
  white-space: nowrap;
  background: #fff;
  color: #d6336c;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  opacity: 0;
  animation: cumpleBubbleFloat 4.4s ease-in-out forwards;
}

@keyframes cumpleBubbleFloat {
  0% { opacity: 0; transform: translate(-50%, 0.5rem) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -0.5rem) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -2.75rem) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -3.5rem) scale(0.9); }
}

@media (max-width: 768px) {
  .cumple-bubble { font-size: 0.7rem; padding: 0.25rem 0.6rem; }
}