/* ── Confetti canvas — above everything including the modal ── */
#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10001;
  display: none;
}

/* ── Milestone modal — full blur, above app, below confetti ── */
#m-milestone {
  z-index: 10000;
  background: rgba(6, 16, 32, .82);
}

/* City arrival: bounce-in for the modal card */
#m-milestone.open .modal {
  animation: ms-card .52s cubic-bezier(.34, 1.52, .64, 1) both;
}

@keyframes ms-card {
  from { transform: scale(.55) translateY(40px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* Emoji pops in with a spin */
#ms-emoji {
  animation: ms-emoji 0s;
}
#m-milestone.open #ms-emoji {
  animation: ms-emoji .7s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}

@keyframes ms-emoji {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.35) rotate(10deg); }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* City name slides up */
#ms-city {
  animation: ms-city 0s;
}
#m-milestone.open #ms-city {
  animation: ms-city .4s ease .28s both;
}

@keyframes ms-city {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Subtitle fades in */
#ms-desc {
  animation: ms-desc 0s;
}
#m-milestone.open #ms-desc {
  animation: ms-desc .4s ease .4s both;
}

@keyframes ms-desc {
  from { opacity: 0; }
  to   { opacity: 1; }
}