/* ============================================================
   RETRODEX — animations.css — Juice keyframes (DOCTRINE §VI)
   ============================================================
   Reusable keyframes for collector verbs: add, discover, qualify.
   Never applied to neutral actions (scroll, nav, hover).
   ============================================================ */

/* ── Level 2 — Bounce (ajout collection) ─────────────────── */

@keyframes rdx-bounce {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ── Level 2 — Float up (+1 counter) ─────────────────────── */

@keyframes rdx-float-up {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* ── Level 4 — Counter flash gold (milestone) ────────────── */

@keyframes rdx-flash-gold {
  0% { color: var(--rdx-gold); text-shadow: 0 0 12px var(--rdx-gold); }
  100% { color: inherit; text-shadow: none; }
}

/* ── Level 3 — Scan line sweep (fiche rare) ──────────────── */

@keyframes rdx-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ── Glow pulse (codec dot, badges) ──────────────────────── */

@keyframes rdx-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── Utility classes ─────────────────────────────────────── */

.rdx-anim-bounce { animation: rdx-bounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rdx-anim-float { animation: rdx-float-up 0.6s ease-out forwards; }
.rdx-anim-flash { animation: rdx-flash-gold 0.8s ease-out; }

/* ── Respect reduced motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [class*="rdx-anim-"] { animation: none !important; }
}

/* ── 3-State Pokédex System (DOCTRINE §VII) ──────────────── */

/* Unknown — dim silhouette */
.rdx-state-unknown {
  opacity: 0.4;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.rdx-state-unknown img {
  filter: brightness(0.3) saturate(0);
}

/* Explored — desaturated, dashed green border */
.rdx-state-explored {
  opacity: 0.75;
  border: 1px dashed var(--rdx-phosphor-off);
}

.rdx-state-explored img {
  filter: saturate(0.3);
}

/* Owned — full color, solid border, glow */
.rdx-state-owned {
  opacity: 1;
  border: 1px solid var(--rdx-phosphor);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.1);
}

/* ── Confetti (DOCTRINE §IX) ─────────────────────────────── */

.rdx-confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.rdx-confetti-particle {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: rdx-confetti-fall 1.5s ease-in forwards;
}

@keyframes rdx-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── Milestone Overlay (DOCTRINE §IX) ────────────────────── */

.rdx-milestone-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  cursor: pointer;
  animation: rdx-fade-in 0.3s ease;
}

.rdx-milestone-badge {
  font-family: var(--rdx-font-system);
  font-size: 36px;
  font-weight: 600;
  color: var(--rdx-gold);
  text-shadow: 0 0 20px var(--rdx-gold);
  animation: rdx-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rdx-milestone-count {
  font-family: var(--rdx-font-system);
  font-size: 14px;
  color: var(--rdx-phosphor-dim);
  margin-top: 12px;
}

@keyframes rdx-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Save Room — Collection page warmth (DOCTRINE §IX) ──── */

body[data-page="collection"] {
  --rdx-phosphor: #33FF66;
}

body[data-page="collection"] .rdx-hud {
  border-bottom-color: rgba(51, 255, 102, 0.15);
}