:root {
  --pink: #ff5fa2;
  --purple: #8b5cf6;
  --ink: #3b1d4a;
  --card: rgba(255, 255, 255, 0.92);
  --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(135deg, #ffd1e8, #e3d4ff, #c9f1ff, #fff1c9);
  background-size: 400% 400%;
  animation: bgShift 24s ease infinite;
  overflow-x: hidden;
}

@keyframes bgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }

.balloon {
  position: absolute;
  bottom: -160px;
  border-radius: 50% 50% 48% 52% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), transparent 22%), var(--c);
  box-shadow: inset -8px -10px 18px rgba(0,0,0,.12);
  animation: floatUp linear infinite;
}
.balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 90px;
  background: rgba(59, 29, 74, .35);
}
@keyframes floatUp {
  0% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(24px, -60vh) rotate(4deg); }
  100% { transform: translate(-12px, -130vh) rotate(-3deg); }
}

.sparkle {
  position: absolute;
  width: 8px; height: 8px;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50% { opacity: .95; transform: scale(1.3); }
}

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

@media (prefers-reduced-motion: reduce) {
  body, .balloon, .sparkle { animation: none !important; }
}