refactor: update menu toggle structure and styles in index.html for enhanced animation effects and layout consistency

index.html

@@ -384,23 +384,27 @@
           style="animation-delay: 0.4s; animation-fill-mode: forwards"
         >
           <div class="cursor-pointer" id="menuToggle">
-            <div
+            <div class="relative inline-block" id="menuWrap">
-              class="grid grid-cols-3 gap-1 w-6 h-6"
+              <div class="menu-waves" aria-hidden="true">
-              id="menuGrid"
+                <span class="wave"></span>
-              style="
+                <span class="wave"></span>
-                outline: 1px solid rgba(255, 255, 255, 0.6);
+                <span class="wave"></span>
-                outline-offset: 6px;
+              </div>
-              "
+              <div class="menu-outline" aria-hidden="true"></div>
-            >
+              <div
-              <span class="w-1 h-1 bg-white"></span>
+                class="grid grid-cols-3 gap-1 w-6 h-6 relative"
-              <span class="w-1 h-1 bg-white"></span>
+                id="menuGrid"
-              <span class="w-1 h-1 bg-white"></span>
+              >
-              <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+                <span class="w-1 h-1 bg-white"></span>
+              </div>
             </div>
           </div>
         </div>
@@ -586,6 +590,94 @@
     </div>
 
     <style>
+      /* Homepage menu button ripple animation */
+      #menuGrid span {
+        will-change: transform, opacity, filter;
+        animation: menuCellPulse 1.8s ease-in-out infinite;
+      }
+
+      /* Waves container */
+      #menuWrap {
+        position: relative;
+        overflow: visible; /* allow waves to extend beyond the outline */
+      }
+      .menu-waves {
+        position: absolute;
+        inset: -20px; /* enlarge field so waves can grow much bigger */
+        z-index: 1;
+        pointer-events: none;
+      }
+      .menu-outline {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        pointer-events: none;
+        outline: 1px solid rgba(255, 255, 255, 0.6);
+        outline-offset: 6px;
+      }
+      .menu-waves .wave {
+        position: absolute;
+        inset: 0;
+        border: 1px solid rgba(255, 255, 255, 0.28);
+        opacity: 0;
+        transform: scale(1);
+        animation: waveBurst 5.8s ease-in-out infinite; /* ~4s idle + ~1.8s burst */
+        will-change: transform, opacity;
+      }
+      .menu-waves .wave:nth-child(1) {
+        animation-delay: 0s;
+      }
+      .menu-waves .wave:nth-child(2) {
+        animation-delay: 0.3s;
+      }
+      .menu-waves .wave:nth-child(3) {
+        animation-delay: 0.6s;
+      }
+
+      /* Center-out delay matrix (3x3) */
+      #menuGrid span:nth-child(1),
+      #menuGrid span:nth-child(3),
+      #menuGrid span:nth-child(7),
+      #menuGrid span:nth-child(9) {
+        animation-delay: 0.2s;
+      }
+      #menuGrid span:nth-child(2),
+      #menuGrid span:nth-child(4),
+      #menuGrid span:nth-child(6),
+      #menuGrid span:nth-child(8) {
+        animation-delay: 0.12s;
+      }
+      #menuGrid span:nth-child(5) {
+        animation-delay: 0s;
+      }
+
+      @keyframes menuCellPulse {
+        0% {
+          opacity: 0.7;
+          transform: scale(1);
+          filter: brightness(1);
+        }
+        40% {
+          opacity: 1;
+          transform: scale(1.12);
+          filter: brightness(1.35);
+        }
+        100% {
+          opacity: 0.7;
+          transform: scale(1);
+          filter: brightness(1);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        #menuGrid span {
+          animation: none !important;
+        }
+        .menu-waves .wave {
+          animation: none !important;
+        }
+      }
+
       @keyframes fadeInScale {
         0% {
           opacity: 0;
@@ -597,6 +689,28 @@
         }
       }
 
+      /* Idle for ~4s, then run one burst (~1.8s), repeat */
+      @keyframes waveBurst {
+        0%,
+        69% {
+          /* idle segment (~4s of 5.8s) */
+          opacity: 0;
+          transform: scale(1);
+        }
+        77% {
+          opacity: 0.38;
+          transform: scale(1.18, 1.12);
+        }
+        92% {
+          opacity: 0.22;
+          transform: scale(1.55, 1.42);
+        }
+        100% {
+          opacity: 0;
+          transform: scale(1.95, 1.75);
+        }
+      }
+
       @keyframes fadeInUp {
         0% {
           opacity: 0;

styles/output.css

@@ -1190,6 +1190,10 @@ video {
   flex-shrink: 0;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));