#birthday-celebration { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.birthday-balloons { position: absolute; inset: 0; overflow: hidden; }
.birthday-balloon { position: absolute; bottom: -210px; left: var(--balloon-x); width: clamp(50px, 6vw, 78px); height: auto; color: var(--accent); transform-origin: 50% 30%; animation: birthday-float var(--balloon-duration) linear var(--balloon-delay) infinite; will-change: transform; }
.birthday-balloon:nth-child(3n) { width: clamp(58px, 7vw, 90px); }
.balloon-body, .balloon-knot { fill: var(--balloon-color); stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.balloon-string { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; }
.balloon-shine { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 4; stroke-linecap: round; }
.birthday-paused .birthday-balloon { animation-play-state: paused; }
.birthday-dismiss { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--muted); pointer-events: auto; }
.birthday-dismiss svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
@keyframes birthday-float {
  0% { transform: translate3d(-12px, 0, 0) rotate(-7deg); opacity: 0; }
  8% { opacity: .85; }
  50% { transform: translate3d(15px, calc(-50vh - 150px), 0) rotate(6deg); }
  88% { opacity: .85; }
  100% { transform: translate3d(-8px, calc(-100vh - 300px), 0) rotate(-5deg); opacity: 0; }
}
@media (max-width: 600px) { .birthday-dismiss { left: 12px; right: auto; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { #birthday-celebration { display: none; } }