SAPTARSHI-coder · SAPTARSHI-coder · Jun 3, 2026 · Jun 2, 2026
@@ -0,0 +1,18 @@
+## Zoom-In Duplicate Class Fix Demo
+
+**What does this do?**
+Demonstrates the correct `.ease-zoom-in` entrance animation behavior and 
+exposes a duplicate class definition bug in `core/animations.css`.
+
+**How is it used?**
+<div class="ease-zoom-in">I animate in correctly</div>
+
+**Why is it useful?**
+`core/animations.css` currently defines `.ease-zoom-in` twice — referencing 
+two different `@keyframes` blocks with different behavior. The second definition 
+silently overrides the first via CSS cascade. This demo shows what the correct 
+behavior should look like (subtle fade+scale from `opacity:0, scale(0.85)`) and 
+makes the case for removing the dead `@keyframes ease-zoom-in` block and the 
+duplicate `.ease-zoom-in` class definition at line ~452.
+
+Related issue: #872
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>ZoomIn Duplicate Bug Demo</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+  <h1 style="font-size:1.25rem; margin-bottom:0;">
+    .ease-zoom-in — Duplicate Class Bug Demo
+  </h1>
+  <p style="color:#94a3b8; font-size:0.85rem; margin-top:0.25rem;">
+    Both cards use different keyframes. Only one should exist.
+  </p>
+
+  <div class="card zoom-in-correct" id="card-correct">
+    <div class="label">Current behavior (wins via cascade)</div>
+    <h2>ease-kf-zoom-in</h2>
+    <p>opacity: 0 → 1, scale: 0.85 → 1</p>
+    <span class="badge-green">✓ Keep this</span>
+  </div>
+
+  <div class="card zoom-in-dead" id="card-dead">
+    <div class="label">Dead code (never reaches user)</div>
+    <h2>ease-zoom-in (orphaned)</h2>
+    <p>scale: 0 → 1, no opacity, hardcoded 0.6s</p>
+    <span class="badge-red">✗ Remove this</span>
+  </div>
+
+  <button onclick="replay()">↺ Replay Animations</button>
+
+  <script>
+    function replay() {
+      const cards = document.querySelectorAll('.card');
+      cards.forEach(card => {
+        card.style.animation = 'none';
+        card.offsetHeight;
+        card.style.animation = '';
+      });
+    }
+  </script>
+
+</body>
+</html>
@@ -0,0 +1,103 @@
+@keyframes zoom-in-correct {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-in-dead {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+.zoom-in-correct {
+  animation: zoom-in-correct 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.zoom-in-dead {
+  animation: zoom-in-dead 0.6s ease-out forwards;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  background: #0f172a;
+  color: #f1f5f9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.card {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 2rem 2.5rem;
+  text-align: center;
+  width: 300px;
+}
+
+.label {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badge-green {
+  display: inline-block;
+  background: #15803d;
+  color: #86efac;
+  font-size: 0.75rem;
+  padding: 2px 10px;
+  border-radius: 999px;
+  margin-top: 0.75rem;
+}
+
+.badge-red {
+  display: inline-block;
+  background: #991b1b;
+  color: #fca5a5;
+  font-size: 0.75rem;
+  padding: 2px 10px;
+  border-radius: 999px;
+  margin-top: 0.75rem;
+}
+
+button {
+  margin-top: 2rem;
+  padding: 0.6rem 1.5rem;
+  background: #6c63ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+button:hover {
+  background: #4b44cc;
+}
+
+h2 {
+  font-size: 1rem;
+  margin: 0 0 0.25rem;
+}
+
+p {
+  font-size: 0.8rem;
+  color: #94a3b8;
+  margin: 0;
+}