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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/style.css +202 -202
  2. package/package.json +4 -4
  3. package/style.css +202 -202
  4. /package/dist/{preview-1770045122180.js → preview-1773045662114.js} +0 -0
package/dist/style.css CHANGED
@@ -1,202 +1,202 @@
1
- /* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
2
- /* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
3
-
4
- .ai-btn {
5
- /* CSS proměnné - lze přepsat pomocí inline style */
6
- --size: 110px;
7
- --ring: 10px;
8
- --bg: #ffffff;
9
- --text: rgba(20, 20, 20, 0.92);
10
-
11
- /* Sdílený gradient - použije se vícekrát */
12
- --rainbow-gradient: conic-gradient(
13
- from 0deg,
14
- #ff004c,
15
- #ff8a00,
16
- #ffe600,
17
- #35ff7a,
18
- #00d4ff,
19
- #6a5cff,
20
- #ff4fd8,
21
- #ff004c
22
- );
23
-
24
- position: relative;
25
- width: var(--size);
26
- height: var(--size);
27
- border: 0;
28
- border-radius: 999px;
29
- cursor: pointer;
30
- background: transparent;
31
- padding: 0;
32
- outline: none;
33
- -webkit-tap-highlight-color: transparent;
34
-
35
- /* GPU akcelerace + containment pro izolaci */
36
- transform: translateZ(0);
37
- will-change: transform;
38
- contain: layout style paint;
39
- transition: transform 0.15s ease;
40
- }
41
-
42
- .ai-btn:disabled {
43
- cursor: not-allowed;
44
- opacity: 0.5;
45
- }
46
-
47
- /* Duhový rotující prstenec */
48
- .ai-btn::before {
49
- content: '';
50
- position: absolute;
51
- inset: 0;
52
- border-radius: inherit;
53
-
54
- /* Použití sdíleného gradientu */
55
- background: var(--rainbow-gradient);
56
-
57
- /* Vyříznutí vnitřku => prstenec */
58
- -webkit-mask: radial-gradient(
59
- closest-side,
60
- transparent calc(100% - var(--ring)),
61
- #000 calc(100% - var(--ring) + 1px)
62
- );
63
- mask: radial-gradient(
64
- closest-side,
65
- transparent calc(100% - var(--ring)),
66
- #000 calc(100% - var(--ring) + 1px)
67
- );
68
-
69
- /* GPU akcelerace pro rotaci */
70
- transform: translateZ(0);
71
- will-change: transform;
72
-
73
- /* Animace "točení" barev */
74
- animation: ai-btn-spin 3.2s linear infinite;
75
- filter: saturate(1.15) brightness(1.05);
76
- }
77
-
78
- .ai-btn:disabled::before {
79
- animation: none;
80
- filter: saturate(0.5) brightness(0.8);
81
- }
82
-
83
- /* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
84
- .ai-btn::after {
85
- content: '';
86
- position: absolute;
87
- inset: 0;
88
- border-radius: inherit;
89
-
90
- /* Použití sdíleného gradientu */
91
- background: var(--rainbow-gradient);
92
-
93
- /* GPU akcelerace */
94
- transform: translateZ(0);
95
- will-change: transform, opacity;
96
-
97
- /* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
98
- box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
99
- 0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
100
- 0 0 90px 35px rgba(106, 92, 255, 0.2);
101
-
102
- /* Sloučená animace pro lepší výkon */
103
- animation: ai-btn-glow 3.2s linear infinite;
104
- opacity: 0.35;
105
- pointer-events: none;
106
- }
107
-
108
- .ai-btn:disabled::after {
109
- animation: none;
110
- opacity: 0.15;
111
- }
112
-
113
- /* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
114
- .ai-btn.ai-btn-paused::before,
115
- .ai-btn.ai-btn-paused::after {
116
- animation-play-state: paused;
117
- }
118
-
119
- /* Vnitřek tlačítka */
120
- .ai-inner {
121
- position: absolute;
122
- inset: var(--ring);
123
- border-radius: inherit;
124
- background: radial-gradient(
125
- 120% 120% at 30% 20%,
126
- rgba(255, 255, 255, 1) 0%,
127
- rgba(250, 250, 250, 1) 40%,
128
- rgba(240, 242, 245, 1) 80%,
129
- rgba(235, 237, 240, 1) 100%
130
- );
131
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
132
- inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
133
- display: grid;
134
- place-items: center;
135
- user-select: none;
136
- }
137
-
138
- .ai-label {
139
- font-weight: 700;
140
- letter-spacing: 0.08em;
141
- font-size: 14px;
142
- text-transform: uppercase;
143
- color: var(--text);
144
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
145
- }
146
-
147
- /* Hover efekt */
148
- .ai-btn:hover:not(:disabled) {
149
- transform: translateZ(0) scale(1.03);
150
- }
151
-
152
- /* Active (stisknuté) */
153
- .ai-btn:active:not(:disabled) {
154
- transform: translateZ(0) scale(0.98);
155
- }
156
-
157
- /* Focus - accessibility */
158
- .ai-btn:focus-visible .ai-inner {
159
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
160
- inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
161
- 0 0 0 3px rgba(255, 255, 255, 0.16);
162
- }
163
-
164
- /* Animace - rotace */
165
- @keyframes ai-btn-spin {
166
- to {
167
- transform: translateZ(0) rotate(360deg);
168
- }
169
- }
170
-
171
- /* Animace - sloučená glow (spin + breathe) pro lepší výkon */
172
- @keyframes ai-btn-glow {
173
- 0% {
174
- transform: translateZ(0) rotate(0deg);
175
- opacity: 0.28;
176
- }
177
- 25% {
178
- opacity: 0.38;
179
- }
180
- 50% {
181
- transform: translateZ(0) rotate(180deg);
182
- opacity: 0.46;
183
- }
184
- 75% {
185
- opacity: 0.38;
186
- }
187
- 100% {
188
- transform: translateZ(0) rotate(360deg);
189
- opacity: 0.28;
190
- }
191
- }
192
-
193
- /* Respektovat uživatelské preference pro redukci pohybu */
194
- @media (prefers-reduced-motion: reduce) {
195
- .ai-btn::before,
196
- .ai-btn::after {
197
- animation: none;
198
- }
199
- .ai-btn {
200
- transition: none;
201
- }
202
- }
1
+ /* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
2
+ /* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
3
+
4
+ .ai-btn {
5
+ /* CSS proměnné - lze přepsat pomocí inline style */
6
+ --size: 110px;
7
+ --ring: 10px;
8
+ --bg: #ffffff;
9
+ --text: rgba(20, 20, 20, 0.92);
10
+
11
+ /* Sdílený gradient - použije se vícekrát */
12
+ --rainbow-gradient: conic-gradient(
13
+ from 0deg,
14
+ #ff004c,
15
+ #ff8a00,
16
+ #ffe600,
17
+ #35ff7a,
18
+ #00d4ff,
19
+ #6a5cff,
20
+ #ff4fd8,
21
+ #ff004c
22
+ );
23
+
24
+ position: relative;
25
+ width: var(--size);
26
+ height: var(--size);
27
+ border: 0;
28
+ border-radius: 999px;
29
+ cursor: pointer;
30
+ background: transparent;
31
+ padding: 0;
32
+ outline: none;
33
+ -webkit-tap-highlight-color: transparent;
34
+
35
+ /* GPU akcelerace + containment pro izolaci */
36
+ transform: translateZ(0);
37
+ will-change: transform;
38
+ contain: layout style paint;
39
+ transition: transform 0.15s ease;
40
+ }
41
+
42
+ .ai-btn:disabled {
43
+ cursor: not-allowed;
44
+ opacity: 0.5;
45
+ }
46
+
47
+ /* Duhový rotující prstenec */
48
+ .ai-btn::before {
49
+ content: '';
50
+ position: absolute;
51
+ inset: 0;
52
+ border-radius: inherit;
53
+
54
+ /* Použití sdíleného gradientu */
55
+ background: var(--rainbow-gradient);
56
+
57
+ /* Vyříznutí vnitřku => prstenec */
58
+ -webkit-mask: radial-gradient(
59
+ closest-side,
60
+ transparent calc(100% - var(--ring)),
61
+ #000 calc(100% - var(--ring) + 1px)
62
+ );
63
+ mask: radial-gradient(
64
+ closest-side,
65
+ transparent calc(100% - var(--ring)),
66
+ #000 calc(100% - var(--ring) + 1px)
67
+ );
68
+
69
+ /* GPU akcelerace pro rotaci */
70
+ transform: translateZ(0);
71
+ will-change: transform;
72
+
73
+ /* Animace "točení" barev */
74
+ animation: ai-btn-spin 3.2s linear infinite;
75
+ filter: saturate(1.15) brightness(1.05);
76
+ }
77
+
78
+ .ai-btn:disabled::before {
79
+ animation: none;
80
+ filter: saturate(0.5) brightness(0.8);
81
+ }
82
+
83
+ /* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
84
+ .ai-btn::after {
85
+ content: '';
86
+ position: absolute;
87
+ inset: 0;
88
+ border-radius: inherit;
89
+
90
+ /* Použití sdíleného gradientu */
91
+ background: var(--rainbow-gradient);
92
+
93
+ /* GPU akcelerace */
94
+ transform: translateZ(0);
95
+ will-change: transform, opacity;
96
+
97
+ /* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
98
+ box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
99
+ 0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
100
+ 0 0 90px 35px rgba(106, 92, 255, 0.2);
101
+
102
+ /* Sloučená animace pro lepší výkon */
103
+ animation: ai-btn-glow 3.2s linear infinite;
104
+ opacity: 0.35;
105
+ pointer-events: none;
106
+ }
107
+
108
+ .ai-btn:disabled::after {
109
+ animation: none;
110
+ opacity: 0.15;
111
+ }
112
+
113
+ /* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
114
+ .ai-btn.ai-btn-paused::before,
115
+ .ai-btn.ai-btn-paused::after {
116
+ animation-play-state: paused;
117
+ }
118
+
119
+ /* Vnitřek tlačítka */
120
+ .ai-inner {
121
+ position: absolute;
122
+ inset: var(--ring);
123
+ border-radius: inherit;
124
+ background: radial-gradient(
125
+ 120% 120% at 30% 20%,
126
+ rgba(255, 255, 255, 1) 0%,
127
+ rgba(250, 250, 250, 1) 40%,
128
+ rgba(240, 242, 245, 1) 80%,
129
+ rgba(235, 237, 240, 1) 100%
130
+ );
131
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
132
+ inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
133
+ display: grid;
134
+ place-items: center;
135
+ user-select: none;
136
+ }
137
+
138
+ .ai-label {
139
+ font-weight: 700;
140
+ letter-spacing: 0.08em;
141
+ font-size: 14px;
142
+ text-transform: uppercase;
143
+ color: var(--text);
144
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
145
+ }
146
+
147
+ /* Hover efekt */
148
+ .ai-btn:hover:not(:disabled) {
149
+ transform: translateZ(0) scale(1.03);
150
+ }
151
+
152
+ /* Active (stisknuté) */
153
+ .ai-btn:active:not(:disabled) {
154
+ transform: translateZ(0) scale(0.98);
155
+ }
156
+
157
+ /* Focus - accessibility */
158
+ .ai-btn:focus-visible .ai-inner {
159
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
160
+ inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
161
+ 0 0 0 3px rgba(255, 255, 255, 0.16);
162
+ }
163
+
164
+ /* Animace - rotace */
165
+ @keyframes ai-btn-spin {
166
+ to {
167
+ transform: translateZ(0) rotate(360deg);
168
+ }
169
+ }
170
+
171
+ /* Animace - sloučená glow (spin + breathe) pro lepší výkon */
172
+ @keyframes ai-btn-glow {
173
+ 0% {
174
+ transform: translateZ(0) rotate(0deg);
175
+ opacity: 0.28;
176
+ }
177
+ 25% {
178
+ opacity: 0.38;
179
+ }
180
+ 50% {
181
+ transform: translateZ(0) rotate(180deg);
182
+ opacity: 0.46;
183
+ }
184
+ 75% {
185
+ opacity: 0.38;
186
+ }
187
+ 100% {
188
+ transform: translateZ(0) rotate(360deg);
189
+ opacity: 0.28;
190
+ }
191
+ }
192
+
193
+ /* Respektovat uživatelské preference pro redukci pohybu */
194
+ @media (prefers-reduced-motion: reduce) {
195
+ .ai-btn::before,
196
+ .ai-btn::after {
197
+ animation: none;
198
+ }
199
+ .ai-btn {
200
+ transition: none;
201
+ }
202
+ }
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
2
  "name": "@bit.rhplus/ui2.ai-button",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "homepage": "https://bit.cloud/remote-scope/ui2/ai-button",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "remote-scope",
8
8
  "name": "ui2/ai-button",
9
- "version": "0.0.2"
9
+ "version": "0.0.4"
10
10
  },
11
11
  "dependencies": {
12
12
  "classnames": "^2.5.1"
13
13
  },
14
14
  "devDependencies": {
15
- "@teambit/react.react-env": "1.0.132"
15
+ "@teambit/react.react-env": "1.3.1"
16
16
  },
17
17
  "peerDependencies": {
18
- "react": "^17.0.0 || ^18.0.0"
18
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
19
19
  },
20
20
  "license": "SEE LICENSE IN UNLICENSED",
21
21
  "optionalDependencies": {},
package/style.css CHANGED
@@ -1,202 +1,202 @@
1
- /* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
2
- /* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
3
-
4
- .ai-btn {
5
- /* CSS proměnné - lze přepsat pomocí inline style */
6
- --size: 110px;
7
- --ring: 10px;
8
- --bg: #ffffff;
9
- --text: rgba(20, 20, 20, 0.92);
10
-
11
- /* Sdílený gradient - použije se vícekrát */
12
- --rainbow-gradient: conic-gradient(
13
- from 0deg,
14
- #ff004c,
15
- #ff8a00,
16
- #ffe600,
17
- #35ff7a,
18
- #00d4ff,
19
- #6a5cff,
20
- #ff4fd8,
21
- #ff004c
22
- );
23
-
24
- position: relative;
25
- width: var(--size);
26
- height: var(--size);
27
- border: 0;
28
- border-radius: 999px;
29
- cursor: pointer;
30
- background: transparent;
31
- padding: 0;
32
- outline: none;
33
- -webkit-tap-highlight-color: transparent;
34
-
35
- /* GPU akcelerace + containment pro izolaci */
36
- transform: translateZ(0);
37
- will-change: transform;
38
- contain: layout style paint;
39
- transition: transform 0.15s ease;
40
- }
41
-
42
- .ai-btn:disabled {
43
- cursor: not-allowed;
44
- opacity: 0.5;
45
- }
46
-
47
- /* Duhový rotující prstenec */
48
- .ai-btn::before {
49
- content: '';
50
- position: absolute;
51
- inset: 0;
52
- border-radius: inherit;
53
-
54
- /* Použití sdíleného gradientu */
55
- background: var(--rainbow-gradient);
56
-
57
- /* Vyříznutí vnitřku => prstenec */
58
- -webkit-mask: radial-gradient(
59
- closest-side,
60
- transparent calc(100% - var(--ring)),
61
- #000 calc(100% - var(--ring) + 1px)
62
- );
63
- mask: radial-gradient(
64
- closest-side,
65
- transparent calc(100% - var(--ring)),
66
- #000 calc(100% - var(--ring) + 1px)
67
- );
68
-
69
- /* GPU akcelerace pro rotaci */
70
- transform: translateZ(0);
71
- will-change: transform;
72
-
73
- /* Animace "točení" barev */
74
- animation: ai-btn-spin 3.2s linear infinite;
75
- filter: saturate(1.15) brightness(1.05);
76
- }
77
-
78
- .ai-btn:disabled::before {
79
- animation: none;
80
- filter: saturate(0.5) brightness(0.8);
81
- }
82
-
83
- /* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
84
- .ai-btn::after {
85
- content: '';
86
- position: absolute;
87
- inset: 0;
88
- border-radius: inherit;
89
-
90
- /* Použití sdíleného gradientu */
91
- background: var(--rainbow-gradient);
92
-
93
- /* GPU akcelerace */
94
- transform: translateZ(0);
95
- will-change: transform, opacity;
96
-
97
- /* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
98
- box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
99
- 0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
100
- 0 0 90px 35px rgba(106, 92, 255, 0.2);
101
-
102
- /* Sloučená animace pro lepší výkon */
103
- animation: ai-btn-glow 3.2s linear infinite;
104
- opacity: 0.35;
105
- pointer-events: none;
106
- }
107
-
108
- .ai-btn:disabled::after {
109
- animation: none;
110
- opacity: 0.15;
111
- }
112
-
113
- /* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
114
- .ai-btn.ai-btn-paused::before,
115
- .ai-btn.ai-btn-paused::after {
116
- animation-play-state: paused;
117
- }
118
-
119
- /* Vnitřek tlačítka */
120
- .ai-inner {
121
- position: absolute;
122
- inset: var(--ring);
123
- border-radius: inherit;
124
- background: radial-gradient(
125
- 120% 120% at 30% 20%,
126
- rgba(255, 255, 255, 1) 0%,
127
- rgba(250, 250, 250, 1) 40%,
128
- rgba(240, 242, 245, 1) 80%,
129
- rgba(235, 237, 240, 1) 100%
130
- );
131
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
132
- inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
133
- display: grid;
134
- place-items: center;
135
- user-select: none;
136
- }
137
-
138
- .ai-label {
139
- font-weight: 700;
140
- letter-spacing: 0.08em;
141
- font-size: 14px;
142
- text-transform: uppercase;
143
- color: var(--text);
144
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
145
- }
146
-
147
- /* Hover efekt */
148
- .ai-btn:hover:not(:disabled) {
149
- transform: translateZ(0) scale(1.03);
150
- }
151
-
152
- /* Active (stisknuté) */
153
- .ai-btn:active:not(:disabled) {
154
- transform: translateZ(0) scale(0.98);
155
- }
156
-
157
- /* Focus - accessibility */
158
- .ai-btn:focus-visible .ai-inner {
159
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
160
- inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
161
- 0 0 0 3px rgba(255, 255, 255, 0.16);
162
- }
163
-
164
- /* Animace - rotace */
165
- @keyframes ai-btn-spin {
166
- to {
167
- transform: translateZ(0) rotate(360deg);
168
- }
169
- }
170
-
171
- /* Animace - sloučená glow (spin + breathe) pro lepší výkon */
172
- @keyframes ai-btn-glow {
173
- 0% {
174
- transform: translateZ(0) rotate(0deg);
175
- opacity: 0.28;
176
- }
177
- 25% {
178
- opacity: 0.38;
179
- }
180
- 50% {
181
- transform: translateZ(0) rotate(180deg);
182
- opacity: 0.46;
183
- }
184
- 75% {
185
- opacity: 0.38;
186
- }
187
- 100% {
188
- transform: translateZ(0) rotate(360deg);
189
- opacity: 0.28;
190
- }
191
- }
192
-
193
- /* Respektovat uživatelské preference pro redukci pohybu */
194
- @media (prefers-reduced-motion: reduce) {
195
- .ai-btn::before,
196
- .ai-btn::after {
197
- animation: none;
198
- }
199
- .ai-btn {
200
- transition: none;
201
- }
202
- }
1
+ /* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
2
+ /* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
3
+
4
+ .ai-btn {
5
+ /* CSS proměnné - lze přepsat pomocí inline style */
6
+ --size: 110px;
7
+ --ring: 10px;
8
+ --bg: #ffffff;
9
+ --text: rgba(20, 20, 20, 0.92);
10
+
11
+ /* Sdílený gradient - použije se vícekrát */
12
+ --rainbow-gradient: conic-gradient(
13
+ from 0deg,
14
+ #ff004c,
15
+ #ff8a00,
16
+ #ffe600,
17
+ #35ff7a,
18
+ #00d4ff,
19
+ #6a5cff,
20
+ #ff4fd8,
21
+ #ff004c
22
+ );
23
+
24
+ position: relative;
25
+ width: var(--size);
26
+ height: var(--size);
27
+ border: 0;
28
+ border-radius: 999px;
29
+ cursor: pointer;
30
+ background: transparent;
31
+ padding: 0;
32
+ outline: none;
33
+ -webkit-tap-highlight-color: transparent;
34
+
35
+ /* GPU akcelerace + containment pro izolaci */
36
+ transform: translateZ(0);
37
+ will-change: transform;
38
+ contain: layout style paint;
39
+ transition: transform 0.15s ease;
40
+ }
41
+
42
+ .ai-btn:disabled {
43
+ cursor: not-allowed;
44
+ opacity: 0.5;
45
+ }
46
+
47
+ /* Duhový rotující prstenec */
48
+ .ai-btn::before {
49
+ content: '';
50
+ position: absolute;
51
+ inset: 0;
52
+ border-radius: inherit;
53
+
54
+ /* Použití sdíleného gradientu */
55
+ background: var(--rainbow-gradient);
56
+
57
+ /* Vyříznutí vnitřku => prstenec */
58
+ -webkit-mask: radial-gradient(
59
+ closest-side,
60
+ transparent calc(100% - var(--ring)),
61
+ #000 calc(100% - var(--ring) + 1px)
62
+ );
63
+ mask: radial-gradient(
64
+ closest-side,
65
+ transparent calc(100% - var(--ring)),
66
+ #000 calc(100% - var(--ring) + 1px)
67
+ );
68
+
69
+ /* GPU akcelerace pro rotaci */
70
+ transform: translateZ(0);
71
+ will-change: transform;
72
+
73
+ /* Animace "točení" barev */
74
+ animation: ai-btn-spin 3.2s linear infinite;
75
+ filter: saturate(1.15) brightness(1.05);
76
+ }
77
+
78
+ .ai-btn:disabled::before {
79
+ animation: none;
80
+ filter: saturate(0.5) brightness(0.8);
81
+ }
82
+
83
+ /* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
84
+ .ai-btn::after {
85
+ content: '';
86
+ position: absolute;
87
+ inset: 0;
88
+ border-radius: inherit;
89
+
90
+ /* Použití sdíleného gradientu */
91
+ background: var(--rainbow-gradient);
92
+
93
+ /* GPU akcelerace */
94
+ transform: translateZ(0);
95
+ will-change: transform, opacity;
96
+
97
+ /* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
98
+ box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
99
+ 0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
100
+ 0 0 90px 35px rgba(106, 92, 255, 0.2);
101
+
102
+ /* Sloučená animace pro lepší výkon */
103
+ animation: ai-btn-glow 3.2s linear infinite;
104
+ opacity: 0.35;
105
+ pointer-events: none;
106
+ }
107
+
108
+ .ai-btn:disabled::after {
109
+ animation: none;
110
+ opacity: 0.15;
111
+ }
112
+
113
+ /* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
114
+ .ai-btn.ai-btn-paused::before,
115
+ .ai-btn.ai-btn-paused::after {
116
+ animation-play-state: paused;
117
+ }
118
+
119
+ /* Vnitřek tlačítka */
120
+ .ai-inner {
121
+ position: absolute;
122
+ inset: var(--ring);
123
+ border-radius: inherit;
124
+ background: radial-gradient(
125
+ 120% 120% at 30% 20%,
126
+ rgba(255, 255, 255, 1) 0%,
127
+ rgba(250, 250, 250, 1) 40%,
128
+ rgba(240, 242, 245, 1) 80%,
129
+ rgba(235, 237, 240, 1) 100%
130
+ );
131
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
132
+ inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
133
+ display: grid;
134
+ place-items: center;
135
+ user-select: none;
136
+ }
137
+
138
+ .ai-label {
139
+ font-weight: 700;
140
+ letter-spacing: 0.08em;
141
+ font-size: 14px;
142
+ text-transform: uppercase;
143
+ color: var(--text);
144
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
145
+ }
146
+
147
+ /* Hover efekt */
148
+ .ai-btn:hover:not(:disabled) {
149
+ transform: translateZ(0) scale(1.03);
150
+ }
151
+
152
+ /* Active (stisknuté) */
153
+ .ai-btn:active:not(:disabled) {
154
+ transform: translateZ(0) scale(0.98);
155
+ }
156
+
157
+ /* Focus - accessibility */
158
+ .ai-btn:focus-visible .ai-inner {
159
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
160
+ inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
161
+ 0 0 0 3px rgba(255, 255, 255, 0.16);
162
+ }
163
+
164
+ /* Animace - rotace */
165
+ @keyframes ai-btn-spin {
166
+ to {
167
+ transform: translateZ(0) rotate(360deg);
168
+ }
169
+ }
170
+
171
+ /* Animace - sloučená glow (spin + breathe) pro lepší výkon */
172
+ @keyframes ai-btn-glow {
173
+ 0% {
174
+ transform: translateZ(0) rotate(0deg);
175
+ opacity: 0.28;
176
+ }
177
+ 25% {
178
+ opacity: 0.38;
179
+ }
180
+ 50% {
181
+ transform: translateZ(0) rotate(180deg);
182
+ opacity: 0.46;
183
+ }
184
+ 75% {
185
+ opacity: 0.38;
186
+ }
187
+ 100% {
188
+ transform: translateZ(0) rotate(360deg);
189
+ opacity: 0.28;
190
+ }
191
+ }
192
+
193
+ /* Respektovat uživatelské preference pro redukci pohybu */
194
+ @media (prefers-reduced-motion: reduce) {
195
+ .ai-btn::before,
196
+ .ai-btn::after {
197
+ animation: none;
198
+ }
199
+ .ai-btn {
200
+ transition: none;
201
+ }
202
+ }