/* ==========================================================================
   OgbonMath — Celebrations
   --------------------------------------------------------------------------
   Tasteful spark moments. The reserved --spark (lime) fires here and
   nowhere else. Keep animations crisp and non-disruptive — we want a
   "yes!" feeling, not a carnival.

   Components:
     .celebrate-xp-pop         — number pop from a target element
     .celebrate-correct-pulse  — brief green pulse on the practice panel
     .celebrate-streak-toast   — milestone toast with flame glyph
     .celebrate-levelup-ovl    — fullscreen modal with confetti
     .celebrate-lesson-done    — subtle "✓ Lesson complete" toast
   ========================================================================== */

/* ==========================================================================
   XP pop — a small "+10 XP" chip that floats up and fades
   ==========================================================================
*/
.celebrate-xp-pop {
  position: fixed;
  z-index: var(--z-celebration);
  pointer-events: none;
  padding: 6px 12px;
  background: var(--bg2);
  color: var(--ac);
  border: 1.5px solid var(--spark);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(200, 255, 0, 0.22), var(--shadow);
  opacity: 0;
  animation: celebrate-xp-float 1.4s var(--ease-calm) forwards;
}

.celebrate-xp-pop::before {
  content: "✦ ";
  color: var(--spark);
  margin-right: 2px;
}

@keyframes celebrate-xp-float {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -6px) scale(1.08); }
  35%  { transform: translate(-50%, -14px) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -30px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50px) scale(0.96); }
}

/* ==========================================================================
   Correct-answer pulse — practice panel flashes green briefly
   ==========================================================================
*/
.celebrate-correct-pulse {
  position: relative;
}

.celebrate-correct-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--gn);
  opacity: 0;
  animation: celebrate-correct 900ms var(--ease-calm);
}

@keyframes celebrate-correct {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  50%  { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ==========================================================================
   Streak milestone toast — warmer, flame-glyph, spark accent
   ==========================================================================
*/
.celebrate-streak-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: var(--z-celebration);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg2);
  border: 1px solid var(--spark);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 30px rgba(200, 255, 0, 0.20), var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--tx);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  opacity: 0;
  animation: celebrate-streak-in 400ms var(--ease-calm) forwards,
             celebrate-streak-out 400ms var(--ease-calm) 2400ms forwards;
  pointer-events: auto;
}

.celebrate-streak-glyph {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(200, 255, 0, 0.4));
}

.celebrate-streak-label {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-tight);
}

.celebrate-streak-num {
  color: var(--ac);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

@keyframes celebrate-streak-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes celebrate-streak-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ==========================================================================
   Level-up overlay — the big moment
   ==========================================================================
*/
.celebrate-levelup-ovl {
  position: fixed;
  inset: 0;
  z-index: var(--z-celebration);
  background: radial-gradient(ellipse at center,
    rgba(200, 255, 0, 0.10) 0%,
    rgba(26, 24, 21, 0.75) 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: celebrate-levelup-bg 600ms var(--ease-calm) forwards;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.celebrate-levelup-panel {
  background: var(--bg2);
  border: 2px solid var(--spark);
  border-radius: var(--radius-xl);
  padding: var(--sp-10) var(--sp-8);
  box-shadow: 0 24px 80px rgba(200, 255, 0, 0.30), var(--shadow-xl);
  text-align: center;
  max-width: 420px;
  transform: scale(0.9);
  opacity: 0;
  animation: celebrate-levelup-panel 500ms var(--ease-spring) 100ms forwards;
}

.celebrate-levelup-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: var(--sp-2);
}

.celebrate-levelup-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--tx);
  margin-bottom: var(--sp-3);
}

.celebrate-levelup-num {
  color: var(--spark);
  text-shadow: 0 0 24px rgba(200, 255, 0, 0.6);
}

.celebrate-levelup-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--tx1);
  margin-bottom: var(--sp-6);
}

.celebrate-levelup-btn {
  background: var(--ac);
  color: var(--ac-tx);
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 28px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.celebrate-levelup-btn:hover { background: var(--ac2); }
.celebrate-levelup-btn:active { transform: scale(var(--active-scale)); }

@keyframes celebrate-levelup-bg {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes celebrate-levelup-panel {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   Lesson-done toast — subtle, serif, no lime (not a huge moment like XP)
   ==========================================================================
*/
.celebrate-lesson-done {
  position: fixed;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg2);
  border: 1px solid var(--gn);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--tx);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  opacity: 0;
  animation: celebrate-lesson-in 300ms var(--ease-calm) forwards,
             celebrate-lesson-out 300ms var(--ease-calm) 3000ms forwards;
}

.celebrate-lesson-check {
  color: var(--gn);
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 768px) {
  .celebrate-lesson-done {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

@keyframes celebrate-lesson-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes celebrate-lesson-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* ==========================================================================
   Streak counter tick animation — small pulse when streak increments
   ==========================================================================
   Applied to the welcome screen's .wv2-stat-streak value when fired.
*/
.celebrate-streak-tick {
  animation: celebrate-streak-tick-kf 600ms var(--ease-spring);
}

@keyframes celebrate-streak-tick-kf {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); color: var(--spark); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   Confetti shower — used on level-up overlay + streak milestones (7+ days)
   ==========================================================================
*/
.celebrate-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: calc(var(--z-celebration) + 1);
}

/* When confetti is spawned on the document body (streak path), it needs
   to be fixed-position so it covers the viewport. */
body > .celebrate-confetti {
  position: fixed;
}

.celebrate-confetti-piece {
  position: absolute;
  top: -24px;
  width: 9px;
  height: 14px;
  background: var(--ac);
  border-radius: 2px;
  opacity: 0.95;
  will-change: transform, opacity;
  animation: confetti-fall 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, -24px, 0) rotate(0deg);
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift, 20px), 110vh, 0) rotate(var(--rot, 540deg));
    opacity: 0;
  }
}

/* Subtle horizontal drift — randomised per-piece in JS would be ideal,
   but a single CSS variable falls nicely for "soft" look. */
.celebrate-confetti-piece:nth-child(3n) { --drift: -40px; }
.celebrate-confetti-piece:nth-child(3n + 1) { --drift: 20px; }
.celebrate-confetti-piece:nth-child(3n + 2) { --drift: 60px; }

/* ==========================================================================
   Reduced-motion: strip animations (spark still appears, just static)
   ==========================================================================
*/
@media (prefers-reduced-motion: reduce) {
  .celebrate-xp-pop,
  .celebrate-streak-toast,
  .celebrate-levelup-ovl,
  .celebrate-levelup-panel,
  .celebrate-lesson-done,
  .celebrate-confetti-piece {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .celebrate-correct-pulse::after { animation: none; }
  .celebrate-streak-tick { animation: none; }
  .celebrate-confetti { display: none; }
}