feat: add hero hover wave animation

2026-07-29 20:26:32 +03:00
parent 0ae6b372f8
commit 4802c4764a
3 changed files with 58 additions and 3 deletions
@@ -26,4 +26,50 @@
  .pause-on-hover:hover {
    animation-play-state: paused;
  }
+
+  @keyframes hero-wave-primary {
+    0%, 49.99% { opacity: 1; }
+    50%, 100% { opacity: 0; }
+  }
+
+  @keyframes hero-wave-secondary {
+    0%, 49.99% { opacity: 0; }
+    50%, 100% { opacity: 1; }
+  }
+
+  @keyframes hero-wave-sway {
+    0%, 100% { transform: rotate(0deg) translateY(0); }
+    25% { transform: rotate(-2deg) translateY(-1px); }
+    50% { transform: rotate(2.5deg) translateY(0); }
+    75% { transform: rotate(-1deg) translateY(-1px); }
+  }
+
+  .hero-wave-frame {
+    transform-origin: 70% 88%;
+    will-change: opacity, transform;
+  }
+
+  .hero-wave-frame-secondary {
+    opacity: 0;
+  }
+
+  .hero-wave:hover .hero-wave-frame-primary {
+    animation: hero-wave-primary 520ms steps(1, end) infinite, hero-wave-sway 720ms ease-in-out infinite;
+  }
+
+  .hero-wave:hover .hero-wave-frame-secondary {
+    animation: hero-wave-secondary 520ms steps(1, end) infinite, hero-wave-sway 720ms ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hero-wave:hover .hero-wave-frame-primary {
+      animation: none;
+      opacity: 0;
+    }
+
+    .hero-wave:hover .hero-wave-frame-secondary {
+      animation: none;
+      opacity: 1;
+    }
+  }
 }