#celebration {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#celebration canvas { display: block; width: 100%; height: 100%; }
.bear {
  --fur: #b56b3c;
  --light-fur: #ffd297;
  --direction: -1;
  position: absolute;
  width: clamp(76px, 18vw, 165px);
  aspect-ratio: 1;
  left: var(--bear-x);
  top: var(--bear-y);
  animation: bear-arrival .95s ease both, bear-cheer 1.65s .95s ease-in-out infinite;
  filter: drop-shadow(0 4px 9px #371509a0);
}
.bear-right { --fur: #eac291; --light-fur: #fff0cb; --direction: 1; }
.bear-body {
  position: absolute;
  inset: 46% 19% 7%;
  border-radius: 47% 47% 35% 35%;
  background: radial-gradient(ellipse at 50% 52%, var(--light-fur) 0 30%, var(--fur) 34%);
  box-shadow: inset 0 -5px 0 #65302144;
}
.bear-body::before, .bear-body::after {
  content: "";
  position: absolute;
  bottom: -7%;
  width: 39%;
  height: 31%;
  border-radius: 50%;
  background: var(--fur);
  box-shadow: inset 0 -3px 0 #65302144;
  animation: bear-step .21s alternate 4;
}
.bear-body::before { left: 1%; }
.bear-body::after { right: 1%; animation-delay: .11s; }
.bear-head {
  position: absolute;
  inset: 12% 11% 38%;
  border-radius: 48%;
  background: var(--fur);
  box-shadow: inset 0 -4px 0 #6530213d, inset 0 3px 0 #fff4c94d;
}
.bear-head::before, .bear-head::after {
  content: "";
  position: absolute;
  top: -24%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--light-fur) 37%, var(--fur) 42%);
}
.bear-head::before { left: 0; }
.bear-head::after { right: 0; }
.bear-head i {
  position: absolute;
  inset: 30% 8% 4%;
  background: radial-gradient(ellipse at 50% 63%, #542b22 0 6%, transparent 7%),
    radial-gradient(ellipse at 29% 30%, #43271e 0 4%, transparent 5%),
    radial-gradient(ellipse at 71% 30%, #43271e 0 4%, transparent 5%),
    radial-gradient(ellipse at 17% 55%, #ec9c82 0 7%, transparent 8%),
    radial-gradient(ellipse at 83% 55%, #ec9c82 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 68%, var(--light-fur) 0 24%, transparent 25%);
}
.bear-flower {
  position: absolute;
  left: 50%;
  bottom: 9%;
  font-size: clamp(32px, 7vw, 64px);
  line-height: 1;
  transform: translateX(-50%);
  animation: offer-flowers .95s ease both, flower-cheer 1.65s .95s ease-in-out infinite;
}
@keyframes bear-arrival {
  0% { opacity: 0; transform: translate(calc(var(--direction) * 32vw - 50%), -35%) rotate(calc(var(--direction) * 12deg)); }
  10% { opacity: 1; }
  15%, 24% { top: calc(var(--bear-y) - 9px); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes bear-cheer {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50% { transform: translate(-50%, -59%) rotate(4deg); }
}
@keyframes bear-step { to { transform: translateY(-6px); } }
@keyframes offer-flowers {
  from { transform: translate(-50%, 18%) scale(.76); }
  to { transform: translate(-50%, -40%) rotate(-12deg) scale(1.08); }
}
@keyframes flower-cheer {
  0%, 100% { transform: translate(-50%, -40%) rotate(-12deg) scale(1.08); }
  50% { transform: translate(-50%, -52%) rotate(10deg) scale(1.13); }
}
@media (prefers-reduced-motion: reduce) {
  #celebration { display: none; }
}