Update index.html

index.html

@@ -405,64 +405,84 @@
     height: 100%;
 }
 
-      .avatar.assistant svg,
+/* ─────────────────────────────
+   SVG BASE (shared behavior)
+───────────────────────────── */
+
+.avatar.assistant svg,
 .empty-state svg {
-    transition: transform 180ms cubic-bezier(.2,.8,.2,1);
+    transform-origin: center;
+    transform-box: fill-box;
+    will-change: transform;
+    cursor: pointer;
 }
 
+/* ─────────────────────────────
+   CLICK PRESS (whole SVG)
+   quick tactile feedback
+───────────────────────────── */
+
 .avatar.assistant svg.clicked,
 .empty-state svg.clicked {
-    transform: scale(0.82) translateY(1px);
+    animation: svgPress 180ms cubic-bezier(.2,.8,.2,1);
 }
 
-      .svg-layer-outer-1 {
-    animation:
-        spinCW 20s linear infinite,
-        pulseOuter1 5s ease-in-out infinite;
+@keyframes svgPress {
+    0% {
+        transform: scale(1) translateY(0px);
+    }
+    45% {
+        transform: scale(0.82) translateY(1px);
+    }
+    100% {
+        transform: scale(1) translateY(0px);
+    }
 }
 
-.svg-layer-outer-2 {
-    animation:
-        spinCCW 25s linear infinite,
-        pulseOuter2 6s ease-in-out infinite 0.6s;
-}
+/* ─────────────────────────────
+   LAYERED BURST SYSTEM
+   (requires SVG layers:
+   .svg-layer-outer-1
+   .svg-layer-outer-2
+   .svg-layer-inner)
+───────────────────────────── */
 
-.svg-layer-inner {
-    animation:
-        spinCW 15s linear infinite reverse,
-        pulseInner 4s ease-in-out infinite 1.2s;
-}
-
-      .svg-layer-outer-1.click-burst {
-    animation: clickOuter1 220ms ease-out;
+.svg-layer-outer-1.click-burst {
+    animation: burstOuter1 220ms ease-out;
 }
 
 .svg-layer-outer-2.click-burst {
-    animation: clickOuter2 220ms ease-out 30ms;
+    animation: burstOuter2 260ms ease-out 40ms;
 }
 
 .svg-layer-inner.click-burst {
-    animation: clickInner 220ms ease-out 60ms;
+    animation: burstInner 300ms ease-out 80ms;
 }
 
-      @keyframes clickOuter1 {
-    0% { transform: scale(1); }
-    50% { transform: scale(0.90); }
+/* ─────────────────────────────
+   BURST KEYFRAMES
+───────────────────────────── */
+
+@keyframes burstOuter1 {
+    0%   { transform: scale(1); }
+    50%  { transform: scale(0.92); }
     100% { transform: scale(1); }
 }
 
-@keyframes clickOuter2 {
-    0% { transform: scale(1); }
-    50% { transform: scale(0.85); }
+@keyframes burstOuter2 {
+    0%   { transform: scale(1); }
+    50%  { transform: scale(0.86); }
     100% { transform: scale(1); }
 }
 
-@keyframes clickInner {
-    0% { transform: scale(1); }
-    50% { transform: scale(0.75); }
+@keyframes burstInner {
+    0%   { transform: scale(1); }
+    50%  { transform: scale(0.72); }
     100% { transform: scale(1); }
 }
 
+      
+
         .avatar.assistant svg path {
     stroke: var(--logo-yellow);
 }
@@ -2095,7 +2115,14 @@
 
       
 //-------------------------
-function burst(svg) {
+function triggerPress(svg) {
+    // restart press animation (whole SVG)
+    svg.classList.remove("clicked");
+    void svg.offsetWidth;
+    svg.classList.add("clicked");
+}
+
+function triggerBurst(svg) {
     const layers = svg.querySelectorAll(
         ".svg-layer-outer-1, .svg-layer-outer-2, .svg-layer-inner"
     );
@@ -2103,35 +2130,43 @@ function burst(svg) {
     layers.forEach(layer => {
         layer.classList.remove("click-burst");
 
-        // restart animation
+        // force reflow so animation restarts every click
         void layer.offsetWidth;
 
         layer.classList.add("click-burst");
     });
 }
 
-function addClickAnimation(svg) {
-    svg.classList.remove("clicked");
-
-    // restart animation
-    void svg.offsetWidth;
+function handleClick(svg) {
+    triggerPress(svg);
+    triggerBurst(svg);
+}
 
-    svg.classList.add("clicked");
+/* ─────────────────────────────
+   Attach to all target SVGs
+───────────────────────────── */
 
-    setTimeout(() => {
-        svg.classList.remove("clicked");
-    }, 180);
-}
+function initSvgInteractions() {
+    const svgs = document.querySelectorAll(
+        ".avatar.assistant svg, .empty-state svg"
+    );
 
-document
-    .querySelectorAll(".avatar.assistant svg, .empty-state svg")
-    .forEach(svg => {
+    svgs.forEach(svg => {
         svg.addEventListener("click", () => {
-            addClickAnimation(svg);
-            burst(svg);
+            handleClick(svg);
         });
     });
-      
+}
+
+/* ─────────────────────────────
+   Auto-init on DOM ready
+───────────────────────────── */
+
+if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initSvgInteractions);
+} else {
+    initSvgInteractions();
+}
     </script>
 
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a089c011ea93a9de',t:'MTc4MDk0MTE0NQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>