@keyframes floatUp {
  0% {
    transform: translateY(0) scale(0.9) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  50% {
    transform: translateY(-120vh) scale(1) rotate(8deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-160vh) scale(0.9) rotate(-6deg);
    opacity: 0;
  }
}

@keyframes floatUpStars {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(-140vh) translateX(20px) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-180vh) translateX(-10px) scale(0.7);
    opacity: 0;
  }
}

@keyframes heartBeat {
  0%,
  40%,
  80%,
  100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.18);
  }
  60% {
    transform: scale(1.12);
  }
}

@keyframes spinVinyl {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@keyframes blinkCaret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(4deg);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatName {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(247, 185, 255, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(184, 156, 255, 0.5));
  }
}

@keyframes paperFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-0.2deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.2deg);
  }
}

@keyframes fadeToast {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  15% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  85% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.floating-heart {
  position: absolute;
  font-size: clamp(14px, 2vw, 20px);
  opacity: 0;
  will-change: transform, opacity;
  animation: floatUp 6800ms linear forwards;
  filter: drop-shadow(0 8px 30px rgba(247, 185, 255, 0.35));
  user-select: none;
  pointer-events: none;
}

.floating-star {
  position: absolute;
  font-size: clamp(10px, 1.5vw, 14px);
  opacity: 0;
  will-change: transform, opacity;
  animation: floatUpStars 8200ms linear forwards;
  filter: drop-shadow(0 6px 20px rgba(184, 156, 255, 0.35));
  user-select: none;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.9);
}

.heart-pop {
  animation: heartBeat 680ms var(--ease-spring);
}

.wiggle {
  animation: wiggle 420ms var(--ease-spring);
}

.pop-in {
  animation: popIn 360ms var(--ease-spring);
}
