fix(web): smooth hero search transition

Author: steipete

src/components/Header.tsx

@@ -30,7 +30,7 @@ export default function Header() {
   return (
     <header className="navbar">
       <div className="navbar-inner">
-        <Link to="/" className="brand">
+        <Link to="/" search={{}} className="brand">
           <span className="brand-mark">
             <img src="/clawd-logo.png" alt="" aria-hidden="true" />
           </span>

src/styles.css

@@ -211,23 +211,27 @@ code {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
   gap: 40px;
   align-items: center;
-  transition: grid-template-columns 0.4s ease;
+  transition:
+    grid-template-columns 0.45s cubic-bezier(0.2, 0.9, 0.2, 1),
+    gap 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
 }
 
 .hero-copy {
   max-height: 640px;
   overflow: hidden;
+  min-width: 0;
   transition:
     opacity 0.35s ease,
     transform 0.35s ease,
     max-height 0.35s ease;
 }
 
 .hero.search-mode .hero-inner {
-  grid-template-columns: 1fr;
+  grid-template-columns: 0fr minmax(0, 1fr);
+  gap: 0px;
 }
 
 .hero.search-mode .hero-copy {
@@ -265,7 +269,8 @@ code {
 }
 
 .hero.search-mode .hero-search-card {
-  transform: translateY(-6px) scale(1.01);
+  transform: scale(1.01);
+  box-shadow: 0 22px 46px rgba(29, 26, 23, 0.16);
 }
 
 .hero-badge {
@@ -1087,6 +1092,18 @@ code {
   font-size: 1.1rem;
 }
 
+@media (max-width: 860px) {
+  .hero-inner {
+    grid-template-columns: 1fr;
+    transition: none;
+  }
+
+  .hero.search-mode .hero-inner {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+}
+
 .search-filter-button {
   border-radius: 999px;
   border: 1px solid rgba(255, 107, 74, 0.3);