address change and background

src/components/shared/AnimatedBackground.tsx

@@ -3,25 +3,24 @@ import { motion } from "framer-motion";
 
 export function AnimatedBackground() {
   const { reduceMotion } = useSettings();
+
   if (reduceMotion) {
     return <div className="fixed inset-0 w-full h-full bg-background -z-10" />;
   }
 
   return (
-    <div className="fixed w-full h-full">
-      {/* Каустические пятна (используем контрастные Tailwind цвета) */}
-
-      <svg className="absolute w-0 h-0">
-        <defs>
-          <filter id="blob-filter">
-            <feGaussianBlur in="SourceGraphic" stdDeviation="40" />
-          </filter>
-        </defs>
-      </svg>
-
+    // pointer-events-none важен, чтобы клики не перехватывались фоном
+    <div className="fixed inset-0 w-full h-full overflow-hidden pointer-events-none -z-10 bg-background">
       <div
-        className="absolute inset-0"
-        style={{ filter: "url(#blob-filter)", isolation: "isolate" }}
+        className="relative w-full h-full"
+        style={{
+          // Используем CSS blur вместо SVG. Это лучше оптимизировано в WebKit.
+          filter: "blur(60px)",
+          WebkitFilter: "blur(60px)",
+          // Форсируем создание отдельного слоя в GPU
+          transform: "translate3d(0,0,0)",
+          willChange: "transform",
+        }}
       >
         <motion.div
           className="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] rounded-full bg-chart-1/20"
@@ -30,7 +29,7 @@ export function AnimatedBackground() {
             y: [0, 50, 0],
             rotate: [0, 90, 0],
           }}
-          style={{ willChange: "transform" }}
+          style={{ backfaceVisibility: "hidden" }}
           transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
         />
 
@@ -41,7 +40,7 @@ export function AnimatedBackground() {
             y: [0, 100, 0],
             rotate: [0, -45, 0],
           }}
-          style={{ willChange: "transform" }}
+          style={{ backfaceVisibility: "hidden" }}
           transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
         />
 
@@ -51,17 +50,17 @@ export function AnimatedBackground() {
             scale: [1, 1.2, 1],
             opacity: [0.3, 0.6, 0.3],
           }}
-          style={{ willChange: "transform" }}
+          style={{ backfaceVisibility: "hidden" }}
           transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
         />
 
         <motion.div
-          className="absolute bottom-[20%] left-[20%] w-[30%] h-[30%] rounded-full bg-chart-3/20 "
+          className="absolute bottom-[20%] left-[20%] w-[30%] h-[30%] rounded-full bg-chart-3/20"
           animate={{
             x: [0, 30, 0],
             y: [0, -30, 0],
           }}
-          style={{ willChange: "transform" }}
+          style={{ backfaceVisibility: "hidden" }}
           transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
         />
       </div>