fix: prevent searchbox hover animation conflicts with delay

assets/css/document.css

@@ -57,10 +57,6 @@ body[vv-page]::before {
 	opacity: 1;
 }
 
-body.search-dialog-open {
-	overflow: hidden;
-}
-
 a {
     display: contents;
     color: inherit;
@@ -168,8 +164,10 @@ header > * {
 
 /* enable 3d flip animation */
 @media not (prefers-reduced-motion: reduce) {
-	header > * {	
+	header > * {
-		transition: 600ms transform, 300ms background-color;
+		--transform-duration: 600ms;
+
+		transition: var(--transform-duration) transform, 300ms background-color;
 	}
 }
 
@@ -252,12 +250,10 @@ header searchbox input {
 
 header.searchboxActive > * {
 	transform: rotateX(-180deg);
-	pointer-events: none;
 }
 
 header.searchboxActive searchbox {
 	transform: rotateX(0);
-	pointer-events: all;
 }
 
 /* ## Main */

assets/js/document.js

@@ -1,6 +1,17 @@
 new vv.Interactions("document", {
 	navigateHome: () => new vv.Navigation("/").navigate(),
-	closeSearchbox: () => document.querySelector("header").classList.remove("searchboxActive"),
+	closeSearchbox: () => {
+		// Disable search button interaction while animation is running
+		// This is required to prevent conflicts with the :hover "peak" transformation
+		const searchButtonElement = document.querySelector("header button.search");
+		const transformDuration = parseInt(window.getComputedStyle(searchButtonElement).getPropertyValue("--transform-duration"));
+		searchButtonElement.style.setProperty("pointer-events", "none");
+
+		document.querySelector("header").classList.remove("searchboxActive");
+
+		// Wait for the transform animation to finish
+		setTimeout(() => searchButtonElement.style.removeProperty("pointer-events"), transformDuration);
+	},
 	openSearchbox: () => {
 		document.querySelector("header").classList.add("searchboxActive");
 		// Select searchbox inner input element