feat: enhance new website experiment motion

website/app/globals.css

@@ -2357,6 +2357,9 @@ a {
   --new-panel: rgba(8, 11, 12, 0.68);
   --new-panel-strong: rgba(9, 13, 16, 0.84);
   --new-muted: rgba(248, 255, 244, 0.66);
+  --acid-scroll: 0;
+  --acid-hue-shift: 0;
+  --acid-band-shift: 0px;
   position: relative;
   min-height: 100dvh;
   overflow: hidden;
@@ -2367,6 +2370,7 @@ a {
     #050509;
   color: var(--new-ink);
   isolation: isolate;
+  filter: hue-rotate(calc(var(--acid-hue-shift) * 1deg));
 }
 
 .new-acid-page::before {
@@ -2382,6 +2386,7 @@ a {
   opacity: 0.34;
   mix-blend-mode: screen;
   mask-image: linear-gradient(to bottom, black, transparent 82%);
+  transform: translate3d(0, calc(var(--acid-band-shift) * -0.22), 0);
 }
 
 .new-acid-page::after {
@@ -2395,7 +2400,7 @@ a {
     radial-gradient(circle at 48% 42%, rgba(103, 255, 216, 0.18), transparent 46%);
   filter: saturate(1.35) contrast(1.08);
   opacity: 0.46;
-  transform: rotate(-8deg);
+  transform: translate3d(0, calc(var(--acid-band-shift) * 0.16), 0) rotate(calc(-8deg + var(--acid-scroll) * 12deg));
 }
 
 .new-acid-noise {
@@ -2425,11 +2430,19 @@ a {
 
 .new-acid-three.is-fallback {
   background:
-    conic-gradient(from 44deg at 56% 44%, rgba(215, 255, 45, 0.22), rgba(255, 61, 242, 0.18), rgba(103, 255, 216, 0.2), rgba(215, 255, 45, 0.22)),
+    conic-gradient(from calc(44deg + var(--acid-scroll) * 80deg) at 56% 44%, rgba(215, 255, 45, 0.22), rgba(255, 61, 242, 0.18), rgba(103, 255, 216, 0.2), rgba(215, 255, 45, 0.22)),
     repeating-linear-gradient(118deg, transparent 0 22px, rgba(255, 255, 255, 0.08) 22px 24px);
   filter: saturate(1.4);
 }
 
+.new-acid-motion-ready [data-new-motion] {
+  will-change: transform, opacity;
+}
+
+.new-acid-lenis-active {
+  scroll-behavior: auto;
+}
+
 .new-acid-nav,
 .new-acid-hero,
 .new-acid-signal-grid,
@@ -2635,6 +2648,7 @@ a {
     repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 28px),
     repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 28px);
   mask-image: linear-gradient(to bottom, transparent, black 16%, black 72%, transparent);
+  transform: translate3d(0, calc(var(--acid-band-shift) * 0.34), 0);
 }
 
 .new-acid-router-top,
@@ -2755,6 +2769,19 @@ a {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
 }
 
+.new-acid-signal-grid article::before,
+.new-acid-proof-steps article::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  background:
+    linear-gradient(112deg, transparent 0 36%, rgba(215, 255, 45, calc(0.08 + var(--acid-scroll) * 0.08)) 42%, transparent 54%),
+    radial-gradient(circle at 80% 18%, rgba(255, 61, 242, 0.14), transparent 34%);
+  opacity: 0.74;
+}
+
 .new-acid-signal-grid article:nth-child(even) {
   transform: translateY(24px);
 }
@@ -2838,12 +2865,14 @@ a {
 .new-acid-proof-copy,
 .new-acid-proof-steps article,
 .new-acid-final {
+  position: relative;
   border: 1px solid rgba(248, 255, 244, 0.18);
   border-radius: 28px;
   background: var(--new-panel-strong);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
   backdrop-filter: blur(18px) saturate(1.18);
   -webkit-backdrop-filter: blur(18px) saturate(1.18);
+  overflow: hidden;
 }
 
 .new-acid-proof-copy {
@@ -3039,4 +3068,8 @@ a {
   .new-acid-three canvas {
     display: none;
   }
+
+  .new-acid-motion-ready [data-new-motion] {
+    will-change: auto;
+  }
 }