From 50d2964ebd12202bca70d8e819c86bbea363d80b Mon Sep 17 00:00:00 2001
From: Austin Pickett <pickett.austin@gmail.com>
Date: Wed, 11 Mar 2026 15:39:18 -0400
Subject: [PATCH] fix: animations, easings

---
 landingpage/style.css | 47 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/landingpage/style.css b/landingpage/style.css
index d76634a8de..27ae21a92c 100644
--- a/landingpage/style.css
+++ b/landingpage/style.css
@@ -139,6 +139,7 @@ strong {
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
+    transition: border-bottom-color 0.3s var(--ease-out-quad);
 }
 
 .nav-inner {
@@ -270,7 +271,7 @@ strong {
     border-radius: 50%;
     background: var(--primary);
     display: inline-block;
-    animation: pulse-dot 2s ease-in-out infinite;
+    animation: pulse-dot 2s var(--ease-in-out-quad) infinite;
 }
 
 @keyframes pulse-dot {
@@ -472,6 +473,9 @@ strong {
     color: var(--primary-light);
     background: rgba(48, 80, 255, 0.1);
 }
+.copy-btn:active {
+    transform: scale(0.95);
+}
 
 .install-note {
     font-size: 13px;
@@ -496,6 +500,7 @@ strong {
     font-weight: 550;
     transition: background 0.25s var(--ease-out-quint), border-color 0.25s var(--ease-out-quad), color 0.2s var(--ease-out-quad), transform 0.25s var(--ease-out-quint);
     border: 1px solid transparent;
+    will-change: transform;
 }
 
 .btn-primary {
@@ -507,7 +512,15 @@ strong {
     background: rgba(48, 80, 255, 0.22);
     border-color: rgba(48, 80, 255, 0.4);
     color: #fff;
-    transform: translateY(-1px);
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .btn-primary:hover {
+        transform: translateY(-1px);
+    }
+}
+.btn:active {
+    transform: scale(0.97);
 }
 
 /* --- Sections --- */
@@ -554,12 +567,18 @@ strong {
     border-radius: var(--radius);
     padding: 20px;
     transition: border-color 0.3s var(--ease-out-quad), background 0.3s var(--ease-out-quad), transform 0.3s var(--ease-out-quint);
+    will-change: transform;
 }
 
 .feature-card:hover {
     border-color: var(--border-hover);
     background: var(--bg-card-hover);
-    transform: translateY(-2px);
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .feature-card:hover {
+        transform: translateY(-2px);
+    }
 }
 
 .feature-header {
@@ -691,6 +710,9 @@ strong {
     color: var(--primary-light);
     border-color: var(--primary-light);
 }
+.more-toggle:active {
+    transform: scale(0.97);
+}
 
 .more-chevron {
     transition: transform 0.3s var(--ease-in-out-cubic);
@@ -895,6 +917,7 @@ strong {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
+    will-change: transform, opacity;
 }
 
 .fade-in.visible {
@@ -1094,6 +1117,24 @@ strong {
 
 }
 
+/* --- Reduced Motion --- */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+
+    .fade-in {
+        opacity: 1;
+        transform: none;
+    }
+
+    .hero-ascii {
+        opacity: 0.85;
+    }
+}
+
 /* --- Selection --- */
 ::selection {
     background: rgba(48, 80, 255, 0.25);