update home page

app/globals.css

@@ -200,25 +200,6 @@ button {
   background-clip: text;
 }
 
-/* ── Icon decoration (curved corners) ── */
-.icon-decoration {
-  position: relative;
-}
-
-.icon-decoration .icon-inner {
-  position: relative;
-  z-index: 1;
-}
-
-.icon-decoration::before,
-.icon-decoration::after {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: transparent;
-}
-
 /* ── Marquee animation ── */
 @keyframes marquee {
   0% {
@@ -229,8 +210,17 @@ button {
   }
 }
 
-.animate-marquee {
+.marquee-track {
   animation: marquee 15s linear infinite;
+  will-change: transform;
+}
+
+.marquee-text {
+  display: inline-block;
+  font-size: clamp(50px, 8.4vw, 120px);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  line-height: 1;
 }
 
 /* ── Counter animation ── */
@@ -261,6 +251,153 @@ button {
   animation: headingReveal 0.8s ease-out forwards;
 }
 
+/* ── Shared reveal and hover motion ── */
+@keyframes premiumRevealDown {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes premiumRevealUp {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes heroBgFloat {
+  0%,
+  100% {
+    transform: translate3d(var(--hero-parallax-x, 0), var(--hero-parallax-y, 0), 0) scale(1.02);
+  }
+  50% {
+    transform: translate3d(
+      calc(var(--hero-parallax-x, 0px) + 2px),
+      calc(var(--hero-parallax-y, 0px) - 3px),
+      0
+    ) scale(1.025);
+  }
+}
+
+@keyframes scrollFloat {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes scrollWidgetEntrance {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.navbar-reveal {
+  opacity: 0;
+  animation: premiumRevealDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: 80ms;
+}
+
+.nav-link-swap {
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-link-swap > .text-active {
+  display: inline-block;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.nav-link-swap > span:not(.text-active) {
+  position: absolute;
+  left: 21px;
+  top: 14px;
+  opacity: 0;
+  transform: translateY(150%);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.nav-link-swap:hover > .text-active {
+  opacity: 0;
+  transform: translateY(-150%);
+}
+
+.nav-link-swap:hover > span:not(.text-active) {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.dropdown-reveal {
+  opacity: 0;
+  transform: translateY(5px);
+  animation: premiumRevealUp 0.28s cubic-bezier(0.4, 0.28, 0.31, 1.28) forwards;
+}
+
+.hero-bg-motion {
+  animation: heroBgFloat 8s ease-in-out infinite;
+  transition: transform 0.35s ease-out;
+  will-change: transform;
+}
+
+.hero-reveal {
+  opacity: 0;
+  animation: premiumRevealUp 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: 580ms;
+}
+
+.scroll-widget {
+  opacity: 0;
+  animation: scrollWidgetEntrance 0.7s ease 1.05s forwards;
+  transform: rotate(-90deg) translateX(-50%) translateY(100%);
+  transform-origin: left bottom;
+}
+
+.scroll-widget .scroll-btn-decoration {
+  display: inline-block;
+  animation: scrollFloat 3.4s ease-in-out 1.7s infinite;
+}
+
+.reveal-on-view {
+  opacity: 0;
+  transform: translateY(22px);
+  transition:
+    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
+  transition-delay: var(--reveal-delay, 0ms);
+}
+
+.reveal-on-view.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.aiero-card {
+  transition:
+    transform 0.32s ease,
+    box-shadow 0.32s ease,
+    border-color 0.32s ease;
+}
+
+.aiero-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 22px 55px rgba(31, 31, 31, 0.16), 0 0 0 1px rgba(69, 208, 189, 0.22);
+}
+
 /* ── Scroll down button decoration ── */
 .scroll-btn-decoration {
   position: relative;
@@ -309,3 +446,22 @@ button {
   height: 1px;
   background: currentColor;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .navbar-reveal,
+  .hero-reveal,
+  .scroll-widget,
+  .reveal-on-view {
+    opacity: 1;
+    transform: none;
+  }
+}