animations

.gitignore

@@ -1 +1,5 @@
 __pycache__/
+
+.venv/
+__pycache__/
+*.pyc

cards.html

@@ -133,12 +133,12 @@
   .modal-backdrop::after { animation-duration: 16s; animation-direction: reverse; filter: blur(1px); opacity: 0.22; }
   .modal {
     width: min(1040px, 100%); max-height: 92vh; overflow: auto; border: 0;
-    background: transparent; border-radius: 28px; padding: 0;
+    position: relative; background: transparent; border-radius: 28px; padding: 0;
     color: var(--text); transform: translateY(18px) scale(0.96);
   }
   .modal-backdrop.open .modal { animation: modalDrop 0.52s cubic-bezier(.19,1,.22,1) forwards; }
   .modal-shell {
-    position: relative; isolation: isolate;
+    position: relative; z-index: 1; isolation: isolate;
     display: grid; grid-template-columns: minmax(280px, 390px) minmax(320px, 1fr);
     gap: 24px; align-items: stretch; padding: 22px;
     border: 1px solid rgba(255,255,255,0.18); border-radius: 28px;
@@ -258,6 +258,44 @@
   .sparkles i:nth-child(3) { left: 84%; top: 52%; animation-delay: .82s; }
   .sparkles i:nth-child(4) { left: 24%; top: 72%; animation-delay: 1.1s; }
   .sparkles i:nth-child(5) { left: 55%; top: 84%; animation-delay: 1.45s; }
+  .confetti-field {
+    position: absolute; inset: -18px; z-index: 4; pointer-events: none;
+    overflow: hidden; border-radius: 30px;
+    animation: confettiFieldVanish 4.2s ease forwards;
+  }
+  .confetti-piece {
+    --x: 50%; --drift: 0px; --delay: 0s; --dur: 3s; --spin: 1turn; --size: 18px;
+    position: absolute; left: var(--x); top: -42px;
+    display: grid; place-items: center; min-width: calc(var(--size) + 12px);
+    height: calc(var(--size) + 12px); padding: 0 5px;
+    border-radius: 999px; font-size: var(--size); line-height: 1;
+    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16);
+    box-shadow: 0 0 18px rgba(255,255,255,0.16), 0 0 28px var(--foil-b);
+    backdrop-filter: blur(4px);
+    animation: confettiFall var(--dur) cubic-bezier(.16,.8,.35,1) var(--delay) both;
+  }
+  .confetti-piece.logo {
+    font-family: var(--mono); font-weight: 800; letter-spacing: -0.06em;
+    color: #0d1117; background: #fff;
+  }
+  .confetti-piece.hf {
+    color: #111; background: linear-gradient(135deg, #ffcc4d, #ff9f1c);
+    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
+  }
+  .confetti-piece.jp {
+    color: #fff; background: linear-gradient(135deg, rgba(255,92,138,0.82), rgba(188,140,255,0.62));
+  }
+  .confetti-piece:nth-child(3n) { filter: hue-rotate(32deg); }
+  .confetti-piece:nth-child(4n) { border-radius: 8px; }
+  @keyframes confettiFall {
+    0% { transform: translate3d(0, -56px, 0) rotate(0deg); opacity: 1; }
+    78% { opacity: 1; }
+    100% { transform: translate3d(var(--drift), 86vh, 0) rotate(var(--spin)); opacity: 0; }
+  }
+  @keyframes confettiFieldVanish {
+    0%, 72% { opacity: 1; }
+    100% { opacity: 0; visibility: hidden; }
+  }
   .modal-info { display: flex; flex-direction: column; min-width: 0; }
   .modal-copy {
     margin-top: auto; padding: 14px; border-radius: 16px;
@@ -317,7 +355,7 @@
   @media (prefers-reduced-motion: reduce) {
     .modal-backdrop::before, .modal-backdrop::after, .modal-shell::before,
     .modal-card-stage::before, .showcase-card, .showcase-card::before,
-    .showcase-art::before, .sparkles i { animation: none !important; }
+    .showcase-art::before, .sparkles i, .confetti-field, .confetti-piece { animation: none !important; }
   }
 
   .legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@@ -737,6 +775,38 @@ function hashCode(s) {
   return h;
 }
 
+const CONFETTI_MARKS = [
+  { text: "🌸", cls: "jp" },
+  { text: "💮", cls: "jp" },
+  { text: "🍥", cls: "jp" },
+  { text: "⛩", cls: "jp" },
+  { text: "🗾", cls: "jp" },
+  { text: "✨", cls: "jp" },
+  { text: "🤗", cls: "hf" },
+  { text: "HF", cls: "hf logo" },
+  { text: "GH", cls: "logo" },
+  { text: "🐙", cls: "logo" },
+];
+
+function confettiHTML(seed) {
+  let s = Math.abs(hashCode(seed)) || 1;
+  const pieces = [];
+  for (let i = 0; i < 34; i++) {
+    s = (s * 1664525 + 1013904223) >>> 0;
+    const mark = CONFETTI_MARKS[s % CONFETTI_MARKS.length];
+    const x = 3 + ((s >>> 8) % 94);
+    const drift = ((s >>> 10) % 121) - 60;
+    const delay = ((s >>> 16) % 140) / 100;
+    const dur = 2.2 + ((s >>> 4) % 24) / 10;
+    const spin = ((s % 2) ? 1 : -1) * (0.7 + ((s >>> 12) % 20) / 10);
+    const size = 18 + ((s >>> 20) % 15);
+    pieces.push(
+      `<span class="confetti-piece ${mark.cls}" style="--x:${x}%; --drift:${drift}px; --delay:${delay}s; --dur:${dur.toFixed(1)}s; --spin:${spin.toFixed(1)}turn; --size:${size}px;">${mark.text}</span>`
+    );
+  }
+  return `<div class="confetti-field" aria-hidden="true">${pieces.join("")}</div>`;
+}
+
 function openModal(m) {
   const rarity = rarityFor(m);
   const { v, a } = aggregateVA(m.profile);
@@ -747,6 +817,7 @@ function openModal(m) {
   const cardNo = String(Math.abs(hashCode(m.id)) % 999).padStart(3, "0");
 
   document.getElementById("modal-content").innerHTML = `
+    ${confettiHTML(m.id)}
     <div class="modal-shell" style="--foil-a:${top[0].color}; --foil-b:${top[1].color}; --foil-c:${top[2].color}; --rarity-color:var(--r-${rarity});">
       <div class="modal-card-stage">
         <div class="showcase-card r-${rarity}" aria-label="${escapeHtml(m.name)} trading card">