diff --git a/app/globals.css b/app/globals.css index 632a2b8..dfceebc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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; + } + } } diff --git a/components/home-hero.tsx b/components/home-hero.tsx index 09d23d5..97581d3 100644 --- a/components/home-hero.tsx +++ b/components/home-hero.tsx @@ -88,7 +88,7 @@ export function HomeHero({ news }: HomeHeroProps) { -