@bit.rhplus/ui2.ai-button 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -1,17 +1,3 @@
-export default AIButton;
-/**
- * AI Rainbow Button - Moderní tlačítko s rotujícím duhovým prstencem
- *
- * @param {Object} props
- * @param {string} [props.label='AI'] - Text zobrazený na tlačítku
- * @param {Function} [props.onClick] - Handler pro kliknutí
- * @param {string|number} [props.size='110px'] - Velikost tlačítka
- * @param {string|number} [props.ring='10px'] - Tloušťka duhového prstence
- * @param {string} [props.className] - Dodatečné CSS třídy
- * @param {string} [props.ariaLabel] - Aria label pro accessibility (výchozí je hodnota label)
- * @param {string} [props.type='button'] - Typ tlačítka
- * @param {Object} [props.style] - Inline styly pro tlačítko
- * @param {boolean} [props.disabled=false] - Zakázat tlačítko
- */
-declare const AIButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<any>>>;
+export default _default;
 import React from 'react';

package/dist/index.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+/* eslint-disable */
+import React, { useEffect, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import './style.css';
 /**
  * AI Rainbow Button - Moderní tlačítko s rotujícím duhovým prstencem
+ * OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON:
+ * - IntersectionObserver pro pause/resume animací
+ * - Box-shadow místo blur filter
+ * - GPU akcelerace a will-change hints
+ * - Sloučené animace
+ * - CSS containment
  *
  * @param {Object} props
  * @param {string} [props.label='AI'] - Text zobrazený na tlačítku
@@ -15,17 +22,52 @@ import './style.css';
  * @param {string} [props.type='button'] - Typ tlačítka
  * @param {Object} [props.style] - Inline styly pro tlačítko
  * @param {boolean} [props.disabled=false] - Zakázat tlačítko
+ * @param {boolean} [props.disableVisibilityOptimization=false] - Vypnout automatické pausování animací
  */
 const AIButton = React.forwardRef((props, ref) => {
-    const { label = 'AI', onClick, size = '110px', ring = '10px', className, ariaLabel, type = 'button', style, disabled = false, ...restProps } = props;
+    const { label = 'AI', onClick, size = '110px', ring = '10px', className, ariaLabel, type = 'button', style, disabled = false, disableVisibilityOptimization = false, ...restProps } = props;
+    // Interní ref pro IntersectionObserver
+    const internalRef = useRef(null);
+    const [isPaused, setIsPaused] = React.useState(false);
+    // Kombinace external a internal ref
+    const setRefs = useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // IntersectionObserver - pausne animace když tlačítko není viditelné
+    useEffect(() => {
+        if (disableVisibilityOptimization || !internalRef.current)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                // Pausne když není viditelné nebo je mimo viewport
+                setIsPaused(!entry.isIntersecting);
+            });
+        }, {
+            threshold: 0, // Spustí se hned jak zmizí z viewportu
+            rootMargin: '50px', // Trochu bufferu
+        });
+        observer.observe(internalRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [disableVisibilityOptimization]);
     // Inline CSS proměnné pro customizaci
     const buttonStyle = {
         '--size': typeof size === 'number' ? `${size}px` : size,
         '--ring': typeof ring === 'number' ? `${ring}px` : ring,
         ...style,
     };
-    return (_jsx("button", { ref: ref, className: classnames('ai-btn', className), type: type, "aria-label": ariaLabel || label, onClick: onClick, style: buttonStyle, disabled: disabled, ...restProps, children: _jsx("div", { className: "ai-inner", children: _jsx("div", { className: "ai-label", children: label }) }) }));
+    return (_jsx("button", { ref: setRefs, className: classnames('ai-btn', className, {
+            'ai-btn-paused': isPaused,
+        }), type: type, "aria-label": ariaLabel || label, onClick: onClick, style: buttonStyle, disabled: disabled, ...restProps, children: _jsx("div", { className: "ai-inner", children: _jsx("div", { className: "ai-label", children: label }) }) }));
 });
 AIButton.displayName = 'AIButton';
-export default AIButton;
+// Memoizace komponenty - zabrání zbytečným re-renderům
+export default React.memo(AIButton);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,aAAa,CAAC;AAErB;;;;;;;;;;;;;GAaG;AACH,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,EACJ,KAAK,GAAG,IAAI,EACZ,OAAO,EACP,IAAI,GAAG,OAAO,EACd,IAAI,GAAG,MAAM,EACb,SAAS,EACT,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,sCAAsC;IACtC,MAAM,WAAW,GAAG;QAClB,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI;QACvD,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI;QACvD,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,EAC1C,IAAI,EAAE,IAAI,gBACE,SAAS,IAAI,KAAK,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,YAEb,cAAK,SAAS,EAAC,UAAU,YACvB,cAAK,SAAS,EAAC,UAAU,YAAE,KAAK,GAAO,GACnC,GACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,aAAa,CAAC;AAErB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,EACJ,KAAK,GAAG,IAAI,EACZ,OAAO,EACP,IAAI,GAAG,OAAO,EACd,IAAI,GAAG,MAAM,EACb,SAAS,EACT,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,6BAA6B,GAAG,KAAK,EACrC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,uCAAuC;IACvC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACjC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,oCAAoC;IACpC,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,IAAI,EAAE,EAAE;QACP,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;QACZ,CAAC;aAAM,IAAI,GAAG,EAAE,CAAC;YACf,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,CAAC;IACH,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,qEAAqE;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,6BAA6B,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO;QAElE,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,EAAE;YACV,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACxB,mDAAmD;gBACnD,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC,CAAC,CAAC;QACL,CAAC,EACD;YACE,SAAS,EAAE,CAAC,EAAE,uCAAuC;YACrD,UAAU,EAAE,MAAM,EAAE,iBAAiB;SACtC,CACF,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAEpC,sCAAsC;IACtC,MAAM,WAAW,GAAG;QAClB,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI;QACvD,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI;QACvD,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,iBACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,EAAE;YACzC,eAAe,EAAE,QAAQ;SAC1B,CAAC,EACF,IAAI,EAAE,IAAI,gBACE,SAAS,IAAI,KAAK,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,YAEb,cAAK,SAAS,EAAC,UAAU,YACvB,cAAK,SAAS,EAAC,UAAU,YAAE,KAAK,GAAO,GACnC,GACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,uDAAuD;AACvD,eAAe,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC"}

package/dist/style.css

@@ -1,4 +1,5 @@
 /* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
+/* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
 
 .ai-btn {
   /* CSS proměnné - lze přepsat pomocí inline style */
@@ -7,6 +8,19 @@
   --bg: #ffffff;
   --text: rgba(20, 20, 20, 0.92);
 
+  /* Sdílený gradient - použije se vícekrát */
+  --rainbow-gradient: conic-gradient(
+    from 0deg,
+    #ff004c,
+    #ff8a00,
+    #ffe600,
+    #35ff7a,
+    #00d4ff,
+    #6a5cff,
+    #ff4fd8,
+    #ff004c
+  );
+
   position: relative;
   width: var(--size);
   height: var(--size);
@@ -17,7 +31,11 @@
   padding: 0;
   outline: none;
   -webkit-tap-highlight-color: transparent;
+
+  /* GPU akcelerace + containment pro izolaci */
   transform: translateZ(0);
+  will-change: transform;
+  contain: layout style paint;
   transition: transform 0.15s ease;
 }
 
@@ -33,18 +51,8 @@
   inset: 0;
   border-radius: inherit;
 
-  /* Duhový conic gradient */
-  background: conic-gradient(
-    from 0deg,
-    #ff004c,
-    #ff8a00,
-    #ffe600,
-    #35ff7a,
-    #00d4ff,
-    #6a5cff,
-    #ff4fd8,
-    #ff004c
-  );
+  /* Použití sdíleného gradientu */
+  background: var(--rainbow-gradient);
 
   /* Vyříznutí vnitřku => prstenec */
   -webkit-mask: radial-gradient(
@@ -58,6 +66,10 @@
     #000 calc(100% - var(--ring) + 1px)
   );
 
+  /* GPU akcelerace pro rotaci */
+  transform: translateZ(0);
+  will-change: transform;
+
   /* Animace "točení" barev */
   animation: ai-btn-spin 3.2s linear infinite;
   filter: saturate(1.15) brightness(1.05);
@@ -68,27 +80,28 @@
   filter: saturate(0.5) brightness(0.8);
 }
 
-/* Glow aura kolem tlačítka */
+/* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
 .ai-btn::after {
   content: '';
   position: absolute;
-  inset: -18px;
+  inset: 0;
   border-radius: inherit;
-  background: conic-gradient(
-    from 0deg,
-    #ff004c,
-    #ff8a00,
-    #ffe600,
-    #35ff7a,
-    #00d4ff,
-    #6a5cff,
-    #ff4fd8,
-    #ff004c
-  );
-  opacity: 0.35;
-  filter: blur(22px);
-  animation: ai-btn-spin 3.2s linear infinite, ai-btn-breathe 2.6s ease-in-out infinite;
+
+  /* Použití sdíleného gradientu */
+  background: var(--rainbow-gradient);
+
+  /* GPU akcelerace */
   transform: translateZ(0);
+  will-change: transform, opacity;
+
+  /* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
+  box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
+    0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
+    0 0 90px 35px rgba(106, 92, 255, 0.2);
+
+  /* Sloučená animace pro lepší výkon */
+  animation: ai-btn-glow 3.2s linear infinite;
+  opacity: 0.35;
   pointer-events: none;
 }
 
@@ -97,6 +110,12 @@
   opacity: 0.15;
 }
 
+/* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
+.ai-btn.ai-btn-paused::before,
+.ai-btn.ai-btn-paused::after {
+  animation-play-state: paused;
+}
+
 /* Vnitřek tlačítka */
 .ai-inner {
   position: absolute;
@@ -145,19 +164,30 @@
 /* Animace - rotace */
 @keyframes ai-btn-spin {
   to {
-    transform: rotate(360deg);
+    transform: translateZ(0) rotate(360deg);
   }
 }
 
-/* Animace - dýchání (breathe) */
-@keyframes ai-btn-breathe {
-  0%,
-  100% {
+/* Animace - sloučená glow (spin + breathe) pro lepší výkon */
+@keyframes ai-btn-glow {
+  0% {
+    transform: translateZ(0) rotate(0deg);
     opacity: 0.28;
   }
+  25% {
+    opacity: 0.38;
+  }
   50% {
+    transform: translateZ(0) rotate(180deg);
     opacity: 0.46;
   }
+  75% {
+    opacity: 0.38;
+  }
+  100% {
+    transform: translateZ(0) rotate(360deg);
+    opacity: 0.28;
+  }
 }
 
 /* Respektovat uživatelské preference pro redukci pohybu */

package/index.jsx

@@ -1,9 +1,16 @@
-import React from 'react';
+/* eslint-disable */
+import React, { useEffect, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import './style.css';
 
 /**
  * AI Rainbow Button - Moderní tlačítko s rotujícím duhovým prstencem
+ * OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON:
+ * - IntersectionObserver pro pause/resume animací
+ * - Box-shadow místo blur filter
+ * - GPU akcelerace a will-change hints
+ * - Sloučené animace
+ * - CSS containment
  *
  * @param {Object} props
  * @param {string} [props.label='AI'] - Text zobrazený na tlačítku
@@ -15,6 +22,7 @@ import './style.css';
  * @param {string} [props.type='button'] - Typ tlačítka
  * @param {Object} [props.style] - Inline styly pro tlačítko
  * @param {boolean} [props.disabled=false] - Zakázat tlačítko
+ * @param {boolean} [props.disableVisibilityOptimization=false] - Vypnout automatické pausování animací
  */
 const AIButton = React.forwardRef((props, ref) => {
   const {
@@ -27,9 +35,51 @@ const AIButton = React.forwardRef((props, ref) => {
     type = 'button',
     style,
     disabled = false,
+    disableVisibilityOptimization = false,
     ...restProps
   } = props;
 
+  // Interní ref pro IntersectionObserver
+  const internalRef = useRef(null);
+  const [isPaused, setIsPaused] = React.useState(false);
+
+  // Kombinace external a internal ref
+  const setRefs = useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+
+  // IntersectionObserver - pausne animace když tlačítko není viditelné
+  useEffect(() => {
+    if (disableVisibilityOptimization || !internalRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          // Pausne když není viditelné nebo je mimo viewport
+          setIsPaused(!entry.isIntersecting);
+        });
+      },
+      {
+        threshold: 0, // Spustí se hned jak zmizí z viewportu
+        rootMargin: '50px', // Trochu bufferu
+      }
+    );
+
+    observer.observe(internalRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [disableVisibilityOptimization]);
+
   // Inline CSS proměnné pro customizaci
   const buttonStyle = {
     '--size': typeof size === 'number' ? `${size}px` : size,
@@ -39,8 +89,10 @@ const AIButton = React.forwardRef((props, ref) => {
 
   return (
     <button
-      ref={ref}
-      className={classnames('ai-btn', className)}
+      ref={setRefs}
+      className={classnames('ai-btn', className, {
+        'ai-btn-paused': isPaused,
+      })}
       type={type}
       aria-label={ariaLabel || label}
       onClick={onClick}
@@ -57,4 +109,5 @@ const AIButton = React.forwardRef((props, ref) => {
 
 AIButton.displayName = 'AIButton';
 
-export default AIButton;
+// Memoizace komponenty - zabrání zbytečným re-renderům
+export default React.memo(AIButton);

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@bit.rhplus/ui2.ai-button",
-  "version": "0.0.1",
+  "version": "0.0.2",
+  "homepage": "https://bit.cloud/remote-scope/ui2/ai-button",
   "main": "dist/index.js",
   "componentId": {
+    "scope": "remote-scope",
     "name": "ui2/ai-button",
-    "version": "0.0.1",
-    "scope": "remote-scope"
+    "version": "0.0.2"
   },
   "dependencies": {
     "classnames": "^2.5.1"

package/style.css

@@ -1,4 +1,5 @@
 /* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
+/* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
 
 .ai-btn {
   /* CSS proměnné - lze přepsat pomocí inline style */
@@ -7,6 +8,19 @@
   --bg: #ffffff;
   --text: rgba(20, 20, 20, 0.92);
 
+  /* Sdílený gradient - použije se vícekrát */
+  --rainbow-gradient: conic-gradient(
+    from 0deg,
+    #ff004c,
+    #ff8a00,
+    #ffe600,
+    #35ff7a,
+    #00d4ff,
+    #6a5cff,
+    #ff4fd8,
+    #ff004c
+  );
+
   position: relative;
   width: var(--size);
   height: var(--size);
@@ -17,7 +31,11 @@
   padding: 0;
   outline: none;
   -webkit-tap-highlight-color: transparent;
+
+  /* GPU akcelerace + containment pro izolaci */
   transform: translateZ(0);
+  will-change: transform;
+  contain: layout style paint;
   transition: transform 0.15s ease;
 }
 
@@ -33,18 +51,8 @@
   inset: 0;
   border-radius: inherit;
 
-  /* Duhový conic gradient */
-  background: conic-gradient(
-    from 0deg,
-    #ff004c,
-    #ff8a00,
-    #ffe600,
-    #35ff7a,
-    #00d4ff,
-    #6a5cff,
-    #ff4fd8,
-    #ff004c
-  );
+  /* Použití sdíleného gradientu */
+  background: var(--rainbow-gradient);
 
   /* Vyříznutí vnitřku => prstenec */
   -webkit-mask: radial-gradient(
@@ -58,6 +66,10 @@
     #000 calc(100% - var(--ring) + 1px)
   );
 
+  /* GPU akcelerace pro rotaci */
+  transform: translateZ(0);
+  will-change: transform;
+
   /* Animace "točení" barev */
   animation: ai-btn-spin 3.2s linear infinite;
   filter: saturate(1.15) brightness(1.05);
@@ -68,27 +80,28 @@
   filter: saturate(0.5) brightness(0.8);
 }
 
-/* Glow aura kolem tlačítka */
+/* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
 .ai-btn::after {
   content: '';
   position: absolute;
-  inset: -18px;
+  inset: 0;
   border-radius: inherit;
-  background: conic-gradient(
-    from 0deg,
-    #ff004c,
-    #ff8a00,
-    #ffe600,
-    #35ff7a,
-    #00d4ff,
-    #6a5cff,
-    #ff4fd8,
-    #ff004c
-  );
-  opacity: 0.35;
-  filter: blur(22px);
-  animation: ai-btn-spin 3.2s linear infinite, ai-btn-breathe 2.6s ease-in-out infinite;
+
+  /* Použití sdíleného gradientu */
+  background: var(--rainbow-gradient);
+
+  /* GPU akcelerace */
   transform: translateZ(0);
+  will-change: transform, opacity;
+
+  /* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
+  box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
+    0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
+    0 0 90px 35px rgba(106, 92, 255, 0.2);
+
+  /* Sloučená animace pro lepší výkon */
+  animation: ai-btn-glow 3.2s linear infinite;
+  opacity: 0.35;
   pointer-events: none;
 }
 
@@ -97,6 +110,12 @@
   opacity: 0.15;
 }
 
+/* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
+.ai-btn.ai-btn-paused::before,
+.ai-btn.ai-btn-paused::after {
+  animation-play-state: paused;
+}
+
 /* Vnitřek tlačítka */
 .ai-inner {
   position: absolute;
@@ -145,19 +164,30 @@
 /* Animace - rotace */
 @keyframes ai-btn-spin {
   to {
-    transform: rotate(360deg);
+    transform: translateZ(0) rotate(360deg);
   }
 }
 
-/* Animace - dýchání (breathe) */
-@keyframes ai-btn-breathe {
-  0%,
-  100% {
+/* Animace - sloučená glow (spin + breathe) pro lepší výkon */
+@keyframes ai-btn-glow {
+  0% {
+    transform: translateZ(0) rotate(0deg);
     opacity: 0.28;
   }
+  25% {
+    opacity: 0.38;
+  }
   50% {
+    transform: translateZ(0) rotate(180deg);
     opacity: 0.46;
   }
+  75% {
+    opacity: 0.38;
+  }
+  100% {
+    transform: translateZ(0) rotate(360deg);
+    opacity: 0.28;
+  }
 }
 
 /* Respektovat uživatelské preference pro redukci pohybu */