/* Празднование: четыре слоя поверх приложения — сердца, звёзды, фейерверк и
   само окно. Все они position: fixed, поэтому вёрстка приложения (body —
   flex-колонка) их не замечает. */

.celebrate-hearts,
.celebrate-stars,
.celebrate-sky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 950;
}

.celebrate-sky { z-index: 951; }

.celebrate-heart {
  position: absolute;
  top: -10vh;
  will-change: transform, opacity;
  animation-name: celebrate-fall;
  animation-timing-function: linear;
  animation-fill-mode: both;
  filter: drop-shadow(0 0 6px rgba(255, 92, 138, 0.55));
}

@keyframes celebrate-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% {
    transform: translate3d(var(--drift, 0), 122vh, 0) rotate(var(--spin, 180deg));
    opacity: 0;
  }
}

/* Звёзды. Узел ставится в точку вылета (left/top в пикселях задаёт
   js/ui/celebrate.js), а отрицательные поля в em сдвигают значок на свою
   половину — это делается не через transform нарочно: transform целиком
   занят полётом, и вторая его роль отобрала бы у анимации начальный кадр. */

.celebrate-star {
  position: absolute;
  margin-left: -0.5em;
  margin-top: -0.5em;
  will-change: transform, opacity;
  animation-name: celebrate-burst;
  /* Резкий старт и торможение к концу: звезда именно выстреливает, а не
     уплывает. Линейное время здесь читалось бы как те же падающие сердца,
     только вбок. */
  animation-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1);
  animation-fill-mode: both;
  filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.6));
}

@keyframes celebrate-burst {
  0% {
    transform: translate3d(0, 0, 0) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  /* Вспышка на первой пятой пути: звезда раскрывается почти сразу после
     вылета и дальше уходит, уменьшаясь. Доли от --fly-* здесь, а не
     отдельные значения, чтобы у каждой звезды вспышка приходилась на её
     собственную траекторию, а не на середину чужой. */
  18% {
    transform:
      translate3d(calc(var(--fly-x, 0px) * 0.24), calc(var(--fly-y, 0px) * 0.24), 0)
      scale(1.15)
      rotate(calc(var(--spin, 180deg) * 0.24));
    opacity: 1;
  }
  66% { opacity: 0.85; }
  100% {
    transform:
      translate3d(var(--fly-x, 0px), var(--fly-y, 0px), 0)
      scale(0.55)
      rotate(var(--spin, 180deg));
    opacity: 0;
  }
}

/* Порядок слоёв: затемнение (940) → сердца и фейерверк (900/901 подняты до
   950/951) → карточка (960). Эффекты идут поверх затемнения, иначе праздник
   гаснет вместе с фоном, но под карточкой, чтобы текст оставался читаемым.
   Сами затемнение и слой описаны в css/base.css как .lt-modal-backdrop и
   .lt-modal-stage: их делит с празднованием окно настроек. */

.celebrate-card {
  /* В rem: карточка должна расти вместе с надписью «Теперь ты …», иначе на
     крупной ступени длинное название ранга ломается на три строки. */
  max-width: 26.25rem;
  margin: 16px;
  padding: 28px 34px 24px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 209, 102, 0.45);
  background:
    radial-gradient(120% 110% at 50% 0%, rgba(255, 209, 102, 0.18), rgba(255, 209, 102, 0) 62%),
    var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: celebrate-pop 340ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes celebrate-pop {
  from { transform: scale(0.82) translateY(14px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.celebrate-badge { font-size: 2.75rem; line-height: 1; }

.celebrate-title {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--muted);
}

.celebrate-rank {
  margin-top: 12px;
  font-size: 1.625rem;
  font-weight: 700;
  color: #ffd166;
  text-shadow: 0 0 20px rgba(255, 209, 102, 0.4);
}

.celebrate-btn {
  margin-top: 24px;
  font: inherit;
  font-size: 0.875rem;
  padding: 9px 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 209, 102, 0.5);
  background: rgba(255, 209, 102, 0.14);
  color: #ffd166;
  cursor: pointer;
}

.celebrate-btn:hover { background: rgba(255, 209, 102, 0.26); }

/* Окно поздравления показывается всегда — новость важнее эффекта;
   гасится только само движение (затемнение — в css/base.css). */
@media (prefers-reduced-motion: reduce) {
  .celebrate-card { animation: none; }
}