/* ════════════════════════════════════════════════════════════════
   اللحظة الاحتفالية — تُعرض أمام الفصل
   الحركات هنا لا في المكوّن: القاعدة أن لا نمط يُكتب خارج الأنماط.
   ════════════════════════════════════════════════════════════════ */

.celebrate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--s4);
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(20,184,166,.22), transparent 65%),
    rgba(4, 9, 14, .96);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: opacity .26s var(--ease);
  animation: cel-in .3s var(--ease);
}
@keyframes cel-in { from { opacity: 0 } }

/* ─── القصاصات ─────────────────────────────────────────────── */
.celebrate-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.celebrate-sky > i {
  position: absolute; top: -6vh; display: block;
  animation-name: cel-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: .95;
}
@keyframes cel-fall {
  0%   { transform: translateY(-10vh) rotate(0deg);   opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(112vh) rotate(var(--spin)); opacity: .85; }
}

/* ─── المحتوى ──────────────────────────────────────────────── */
.celebrate-body {
  position: relative; text-align: center;
  max-width: min(1100px, 94vw); max-height: 92vh; overflow-y: auto;
  animation: cel-rise .5s var(--ease);
}
@keyframes cel-rise { from { opacity: 0; transform: translateY(26px) scale(.96) } }

.celebrate-crown {
  width: 118px; height: 118px; margin: 0 auto var(--s4);
  border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 34% 28%, var(--gold-200), var(--gold-600) 76%);
  box-shadow: 0 0 0 8px rgba(212,165,58,.16),
              0 0 70px 8px rgba(212,165,58,.5),
              inset 0 3px 6px rgba(255,255,255,.5);
  animation: cel-pulse 2.4s var(--ease) infinite;
}
@keyframes cel-pulse {
  50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(212,165,58,.1),
        0 0 95px 12px rgba(212,165,58,.62), inset 0 3px 6px rgba(255,255,255,.5); }
}

.celebrate-kicker {
  font-size: clamp(20px, 3.2vw, 34px); font-weight: 800;
  color: var(--gold-400); margin: 0 0 var(--s2); letter-spacing: 1px;
}

.celebrate-names {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s5); margin: var(--s4) 0 var(--s5);
}
.celebrate-person { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.celebrate-person b {
  display: block;
  font-size: clamp(34px, 7.5vw, 82px); font-weight: 900; line-height: 1.15;
  background: linear-gradient(100deg, #fff, var(--brand-200) 55%, var(--gold-200));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(20,184,166,.35);
}
/* عدة طلاب: الأسماء أصغر لتتّسع الشاشة لهم جميعًا */
.celebrate-names.many .celebrate-person b { font-size: clamp(26px, 4.4vw, 52px); }

.celebrate-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.celebrate-coin {
  --c: var(--gold-500);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 28%,
              color-mix(in srgb, var(--c) 76%, #fff),
              color-mix(in srgb, var(--c) 90%, #000) 78%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 26%, transparent),
              0 8px 20px -6px color-mix(in srgb, var(--c) 70%, transparent);
  animation: cel-float 3s var(--ease) infinite;
}
.celebrate-coin:nth-child(2n) { animation-delay: .35s }
.celebrate-coin:nth-child(3n) { animation-delay: .7s }
@keyframes cel-float { 50% { transform: translateY(-7px) } }

.celebrate-line {
  font-size: clamp(17px, 2.4vw, 26px); font-weight: 700;
  color: var(--ink-soft); margin: 0 0 var(--s5);
}
.celebrate-close { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .celebrate-crown, .celebrate-coin { animation: none !important; }
}