feat: animate mobile menu toggle

Author: DPnimo11

src/styles/layout.css

@@ -124,23 +124,34 @@
 }
 
 .mobile-menu summary {
+  position: relative;
   list-style: none;
 }
 
 .mobile-menu summary::-webkit-details-marker {
   display: none;
 }
 
+.mobile-menu summary svg {
+  grid-area: 1 / 1;
+  transition:
+    opacity 140ms ease,
+    transform 160ms ease;
+}
+
 .mobile-menu-close {
-  display: none;
+  opacity: 0;
+  transform: scale(0.82) rotate(-45deg);
 }
 
 .mobile-menu[open] .mobile-menu-open {
-  display: none;
+  opacity: 0;
+  transform: scale(0.82) rotate(45deg);
 }
 
 .mobile-menu[open] .mobile-menu-close {
-  display: block;
+  opacity: 1;
+  transform: scale(1) rotate(0);
 }
 
 .mobile-menu nav {
@@ -156,6 +167,8 @@
   box-shadow: var(--shadow);
   backdrop-filter: blur(14px);
   padding: 8px;
+  transform-origin: top center;
+  animation: mobile-menu-enter 170ms ease-out;
 }
 
 .mobile-menu nav a {
@@ -168,6 +181,18 @@
   font-weight: 800;
 }
 
+@keyframes mobile-menu-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(-6px) scaleY(0.98);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
 .theme-toggle-sun {
   display: none;
 }

src/styles/responsive.css

@@ -121,6 +121,16 @@
     min-height: 40px;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .mobile-menu nav {
+      animation: none;
+    }
+
+    .mobile-menu summary svg {
+      transition: none;
+    }
+  }
+
   .site-header nav a,
   .button {
     padding-right: 10px;