/* ============================================================
   SmartLord celebrations — shared CSS
   ------------------------------------------------------------
   Eleven celebration types share these keyframes. The JS engine
   lives in /js/celebrations.js. Every workflow climax across the
   app fires through window.Celebrate.fire(type, opts).

   prefers-reduced-motion is honored at the bottom of this file:
   every keyframe is collapsed to 0.001ms so a single frame still
   paints any necessary final state (e.g. checkmark visible) but
   no actual motion happens.
   ============================================================ */

:root {
  --sl-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sl-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------- Confetti ---------------- */
.sl-confetti-bit {
  position: fixed;
  top: -16px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  z-index: 95;
  pointer-events: none;
}
@keyframes slConfettiFall {
  to { transform: translateY(106vh) rotate(640deg); opacity: 0.9; }
}

/* ---------------- Coin rain ---------------- */
.sl-coin-bit {
  position: fixed;
  top: -32px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  z-index: 95;
  pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fde68a 0%, #f59e0b 55%, #b45309 100%);
  box-shadow: 0 0 0 1.5px #92400e inset, 0 4px 10px rgba(180, 83, 9, 0.35);
  display: grid;
  place-items: center;
  color: #78350f;
  font-weight: 900;
  font-size: 13px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
@keyframes slCoinFall {
  0%   { transform: translateY(-40px) rotateY(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(108vh) rotateY(900deg); opacity: 0.95; }
}

/* ---------------- Key drop ---------------- */
@keyframes slKeyDrop {
  0%   { transform: translate(-50%, -120vh) rotate(-25deg); opacity: 0; }
  55%  { transform: translate(-50%, 30vh) rotate(15deg); opacity: 1; }
  70%  { transform: translate(-50%, 22vh) rotate(-5deg); }
  85%  { transform: translate(-50%, 26vh) rotate(2deg); }
  100% { transform: translate(-50%, 24vh) rotate(0deg); opacity: 1; }
}
@keyframes slKeyShake {
  0%, 100% { transform: translate(-50%, 24vh) rotate(0deg); }
  25%      { transform: translate(calc(-50% - 8px), 24vh) rotate(-3deg); }
  75%      { transform: translate(calc(-50% + 8px), 24vh) rotate(3deg); }
}

/* ---------------- Stamp (red wax seal) ---------------- */
.sl-stamp-disc {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 6px solid #b91c1c;
  color: #b91c1c;
  display: grid;
  place-items: center;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 32px;
  line-height: 1.05;
  text-align: center;
  background: rgba(254, 226, 226, 0.18);
  box-shadow: 0 8px 20px rgba(185, 28, 28, 0.25), inset 0 0 0 2px rgba(185, 28, 28, 0.4);
  z-index: 97;
  pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(185, 28, 28, 0.6));
}
@keyframes slStampSlam {
  0%   { transform: translate(-50%, -50%) scale(2.4) rotate(-18deg); opacity: 0; }
  55%  { transform: translate(-50%, -50%) scale(0.85) rotate(-6deg); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); opacity: 1; }
}
@keyframes slDustRing {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; border-width: 8px; }
  40%  { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; border-width: 1px; }
}

/* ---------------- Sparkle ---------------- */
.sl-sparkle-bit {
  position: fixed;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 95;
  opacity: 0;
}
@keyframes slSparkleTwinkle {
  0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40%  { opacity: 1; transform: scale(1.1) rotate(90deg); }
  70%  { opacity: 0.9; transform: scale(0.95) rotate(140deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(180deg); }
}

/* ---------------- Achievement card ---------------- */
@keyframes slAchSlide {
  0%   { transform: translateX(420px); opacity: 0; }
  55%  { transform: translateX(-12px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes slAchGleam {
  0%, 100% { background-position: -200% 0; }
  50%      { background-position: 200% 0; }
}
.sl-ach-gleam {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: slAchGleam 2.2s var(--sl-ease-out) infinite;
}

/* ---------------- Streak flame ---------------- */
@keyframes slFlamePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.2); }
}
@keyframes slCounterPop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------------- Wrench spin ---------------- */
@keyframes slWrenchSpin {
  0%   { transform: translate(-50%, -50%) rotate(-720deg) scale(0.4); opacity: 0; }
  70%  { transform: translate(-50%, -50%) rotate(15deg) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
}
@keyframes slCheckPing {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------------- Handshake pulse rings ---------------- */
@keyframes slRingExpand {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

/* ---------------- Fireworks ---------------- */
.sl-fw-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 95;
}
@keyframes slFwBurst {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 1; }
  100% { transform: translate(var(--sl-dx), var(--sl-dy)) scale(0.1); opacity: 0; }
}

/* ---------------- Toast slide ---------------- */
@keyframes slToastIn {
  0%   { transform: translate(-50%, -60px); opacity: 0; }
  50%  { transform: translate(-50%, 6px); opacity: 1; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes slToastOut {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* ---------------- prefers-reduced-motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .sl-confetti-bit,
  .sl-coin-bit,
  .sl-sparkle-bit,
  .sl-fw-particle,
  .sl-stamp-disc {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}