@wix/design-system-illustrations 2.44.2 → 2.45.0

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 (42) hide show
  1. package/dist/cjs/BottomMenu.js +52 -0
  2. package/dist/cjs/FunnelStackedBarChart.js +59 -0
  3. package/dist/cjs/HorizontalStackedBarChart.js +57 -0
  4. package/dist/cjs/SideMenu.js +52 -0
  5. package/dist/cjs/VerticalStackedBarChart.js +57 -0
  6. package/dist/cjs/animated/StickySectionPresetsFullWidth.js +3 -1
  7. package/dist/cjs/animated/StickySectionPresetsGridRows.js +3 -1
  8. package/dist/cjs/animated/StickySectionPresetsSideBySide.js +3 -1
  9. package/dist/cjs/animated/StickySectionPresetsSplit.js +2 -1
  10. package/dist/cjs/animated/StickySectionPresetsZigzag.js +5 -3
  11. package/dist/cjs/animated/animated.global.css +5189 -235
  12. package/dist/cjs/index.js +15 -0
  13. package/dist/esm/BottomMenu.js +18 -0
  14. package/dist/esm/FunnelStackedBarChart.js +25 -0
  15. package/dist/esm/HorizontalStackedBarChart.js +23 -0
  16. package/dist/esm/SideMenu.js +18 -0
  17. package/dist/esm/VerticalStackedBarChart.js +23 -0
  18. package/dist/esm/animated/StickySectionPresetsFullWidth.js +3 -1
  19. package/dist/esm/animated/StickySectionPresetsGridRows.js +3 -1
  20. package/dist/esm/animated/StickySectionPresetsSideBySide.js +3 -1
  21. package/dist/esm/animated/StickySectionPresetsSplit.js +2 -1
  22. package/dist/esm/animated/StickySectionPresetsZigzag.js +5 -3
  23. package/dist/esm/animated/animated.global.css +5189 -235
  24. package/dist/esm/index.js +10 -0
  25. package/dist/types/BottomMenu.d.ts +5 -0
  26. package/dist/types/FunnelStackedBarChart.d.ts +5 -0
  27. package/dist/types/HorizontalStackedBarChart.d.ts +5 -0
  28. package/dist/types/SideMenu.d.ts +5 -0
  29. package/dist/types/VerticalStackedBarChart.d.ts +5 -0
  30. package/dist/types/index.d.ts +5 -0
  31. package/package.json +3 -3
  32. package/src/BottomMenu.svg +64 -0
  33. package/src/FunnelStackedBarChart.svg +184 -0
  34. package/src/HorizontalStackedBarChart.svg +202 -0
  35. package/src/MaxWidth.svg +1 -1
  36. package/src/SideMenu.svg +85 -0
  37. package/src/VerticalStackedBarChart.svg +202 -0
  38. package/src/animated/StickySectionPresetsFullWidth.html +1064 -45
  39. package/src/animated/StickySectionPresetsGridRows.html +1059 -40
  40. package/src/animated/StickySectionPresetsSideBySide.html +864 -45
  41. package/src/animated/StickySectionPresetsSplit.html +958 -46
  42. package/src/animated/StickySectionPresetsZigzag.html +1321 -62
@@ -9,9 +9,11 @@ svg {
9
9
  height: auto;
10
10
  }
11
11
 
12
- *, *::before, *::after { animation-delay: -1700ms !important; }
12
+ *, *::before, *::after { animation-delay: calc(var(--loop) * -0.86) !important; }
13
13
 
14
14
  :root {
15
+ --loop: 2700ms; /* total loop; all keyframes are percentages of it, so change this one value to speed up or slow down */
16
+ --scrollbar-track: #B8C4FF;
15
17
  --color-1: #F8F6F6;
16
18
  --color-2: #002294;
17
19
  --color-3: #7896FF;
@@ -21,32 +23,247 @@ svg {
21
23
  .Frame-1707483277 {
22
24
  transform-origin: 65.235903px 42.92625px;
23
25
  animation:
24
- Frame-1707483277-transform 2417ms linear infinite both,
25
- shared-opacity-1 2417ms linear infinite both;
26
+ Frame-1707483277-transform var(--loop) linear infinite both,
27
+ shared-opacity-1 var(--loop) linear infinite both;
26
28
  }
27
29
 
28
30
  @keyframes Frame-1707483277-transform {
29
- 0% {
30
- transform: translate(0px, 58.20055px);
31
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
32
- }
33
- 39.635912% {
34
- transform: translate(0px, 0px);
35
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
36
- }
37
- 100% {
38
- transform: translate(0px, 0px);
39
- }
31
+ 0% { transform: translate(0px, 58.201px); }
32
+ 0.4444% { transform: translate(0px, 58.201px); }
33
+ 0.8889% { transform: translate(0px, 58.201px); }
34
+ 1.3333% { transform: translate(0px, 58.201px); }
35
+ 1.7778% { transform: translate(0px, 58.201px); }
36
+ 2.2222% { transform: translate(0px, 58.201px); }
37
+ 2.6667% { transform: translate(0px, 58.201px); }
38
+ 3.1111% { transform: translate(0px, 58.201px); }
39
+ 3.5556% { transform: translate(0px, 58.201px); }
40
+ 4% { transform: translate(0px, 58.201px); }
41
+ 4.4444% { transform: translate(0px, 58.201px); }
42
+ 4.8889% { transform: translate(0px, 58.201px); }
43
+ 5.3333% { transform: translate(0px, 58.201px); }
44
+ 5.7778% { transform: translate(0px, 58.201px); }
45
+ 6.2222% { transform: translate(0px, 58.201px); }
46
+ 6.6667% { transform: translate(0px, 58.201px); }
47
+ 7.1111% { transform: translate(0px, 58.201px); }
48
+ 7.5556% { transform: translate(0px, 58.201px); }
49
+ 8% { transform: translate(0px, 58.201px); }
50
+ 8.4444% { transform: translate(0px, 58.201px); }
51
+ 8.8889% { transform: translate(0px, 58.201px); }
52
+ 9.3333% { transform: translate(0px, 58.201px); }
53
+ 9.7778% { transform: translate(0px, 58.201px); }
54
+ 10.2222% { transform: translate(0px, 58.201px); }
55
+ 10.6667% { transform: translate(0px, 58.201px); }
56
+ 11.1111% { transform: translate(0px, 58.201px); }
57
+ 11.5556% { transform: translate(0px, 58.201px); }
58
+ 12% { transform: translate(0px, 58.201px); }
59
+ 12.4444% { transform: translate(0px, 58.201px); }
60
+ 12.8889% { transform: translate(0px, 58.201px); }
61
+ 13.3333% { transform: translate(0px, 58.201px); }
62
+ 13.7778% { transform: translate(0px, 58.201px); }
63
+ 14.2222% { transform: translate(0px, 58.201px); }
64
+ 14.6667% { transform: translate(0px, 58.201px); }
65
+ 15.1111% { transform: translate(0px, 58.201px); }
66
+ 15.5556% { transform: translate(0px, 58.201px); }
67
+ 16% { transform: translate(0px, 58.201px); }
68
+ 16.4444% { transform: translate(0px, 58.201px); }
69
+ 16.8889% { transform: translate(0px, 58.201px); }
70
+ 17.3333% { transform: translate(0px, 58.201px); }
71
+ 17.7778% { transform: translate(0px, 58.201px); }
72
+ 18.2222% { transform: translate(0px, 58.201px); }
73
+ 18.6667% { transform: translate(0px, 58.201px); }
74
+ 19.1111% { transform: translate(0px, 58.201px); }
75
+ 19.5556% { transform: translate(0px, 58.201px); }
76
+ 20% { transform: translate(0px, 58.201px); }
77
+ 20.4444% { transform: translate(0px, 58.201px); }
78
+ 20.8889% { transform: translate(0px, 58.201px); }
79
+ 21.3333% { transform: translate(0px, 58.201px); }
80
+ 21.7778% { transform: translate(0px, 58.201px); }
81
+ 22.2222% { transform: translate(0px, 58.201px); }
82
+ 22.6667% { transform: translate(0px, 58.201px); }
83
+ 23.1111% { transform: translate(0px, 58.201px); }
84
+ 23.5556% { transform: translate(0px, 58.201px); }
85
+ 24% { transform: translate(0px, 58.201px); }
86
+ 24.4444% { transform: translate(0px, 58.201px); }
87
+ 24.8889% { transform: translate(0px, 58.201px); }
88
+ 25.3333% { transform: translate(0px, 58.201px); }
89
+ 25.7778% { transform: translate(0px, 58.201px); }
90
+ 26.2222% { transform: translate(0px, 58.201px); }
91
+ 26.6667% { transform: translate(0px, 58.201px); }
92
+ 27.1111% { transform: translate(0px, 58.201px); }
93
+ 27.5556% { transform: translate(0px, 58.201px); }
94
+ 28% { transform: translate(0px, 58.201px); }
95
+ 28.4444% { transform: translate(0px, 58.201px); }
96
+ 28.8889% { transform: translate(0px, 58.201px); }
97
+ 29.3333% { transform: translate(0px, 58.201px); }
98
+ 29.7778% { transform: translate(0px, 58.201px); }
99
+ 30.2222% { transform: translate(0px, 58.201px); }
100
+ 30.6667% { transform: translate(0px, 58.201px); }
101
+ 31.1111% { transform: translate(0px, 58.201px); }
102
+ 31.5556% { transform: translate(0px, 58.201px); }
103
+ 32% { transform: translate(0px, 58.201px); }
104
+ 32.4444% { transform: translate(0px, 58.201px); }
105
+ 32.8889% { transform: translate(0px, 58.201px); }
106
+ 33.3333% { transform: translate(0px, 58.201px); }
107
+ 33.7778% { transform: translate(0px, 58.201px); }
108
+ 34.2222% { transform: translate(0px, 58.201px); }
109
+ 34.6667% { transform: translate(0px, 58.201px); }
110
+ 35.1111% { transform: translate(0px, 58.201px); }
111
+ 35.5556% { transform: translate(0px, 58.201px); }
112
+ 36% { transform: translate(0px, 58.201px); }
113
+ 36.4444% { transform: translate(0px, 58.201px); }
114
+ 36.8889% { transform: translate(0px, 58.201px); }
115
+ 37.3333% { transform: translate(0px, 58.201px); }
116
+ 37.7778% { transform: translate(0px, 58.201px); }
117
+ 38.2222% { transform: translate(0px, 58.201px); }
118
+ 38.6667% { transform: translate(0px, 58.201px); }
119
+ 39.1111% { transform: translate(0px, 58.201px); }
120
+ 39.5556% { transform: translate(0px, 58.201px); }
121
+ 40% { transform: translate(0px, 58.201px); }
122
+ 40.4444% { transform: translate(0px, 58.201px); }
123
+ 40.8889% { transform: translate(0px, 58.201px); }
124
+ 41.3333% { transform: translate(0px, 58.194px); }
125
+ 41.7778% { transform: translate(0px, 58.143px); }
126
+ 42.2222% { transform: translate(0px, 58.041px); }
127
+ 42.6667% { transform: translate(0px, 57.888px); }
128
+ 43.1111% { transform: translate(0px, 57.685px); }
129
+ 43.5556% { transform: translate(0px, 57.432px); }
130
+ 44% { transform: translate(0px, 57.129px); }
131
+ 44.4444% { transform: translate(0px, 56.776px); }
132
+ 44.8889% { transform: translate(0px, 56.375px); }
133
+ 45.3333% { transform: translate(0px, 55.927px); }
134
+ 45.7778% { transform: translate(0px, 55.431px); }
135
+ 46.2222% { transform: translate(0px, 54.889px); }
136
+ 46.6667% { transform: translate(0px, 54.302px); }
137
+ 47.1111% { transform: translate(0px, 53.670px); }
138
+ 47.5556% { transform: translate(0px, 52.996px); }
139
+ 48% { transform: translate(0px, 52.280px); }
140
+ 48.4444% { transform: translate(0px, 51.522px); }
141
+ 48.8889% { transform: translate(0px, 50.726px); }
142
+ 49.3333% { transform: translate(0px, 49.892px); }
143
+ 49.7778% { transform: translate(0px, 49.021px); }
144
+ 50.2222% { transform: translate(0px, 48.115px); }
145
+ 50.6667% { transform: translate(0px, 47.176px); }
146
+ 51.1111% { transform: translate(0px, 46.205px); }
147
+ 51.5556% { transform: translate(0px, 45.204px); }
148
+ 52% { transform: translate(0px, 44.175px); }
149
+ 52.4444% { transform: translate(0px, 43.119px); }
150
+ 52.8889% { transform: translate(0px, 42.039px); }
151
+ 53.3333% { transform: translate(0px, 40.936px); }
152
+ 53.7778% { transform: translate(0px, 39.813px); }
153
+ 54.2222% { transform: translate(0px, 38.670px); }
154
+ 54.6667% { transform: translate(0px, 37.511px); }
155
+ 55.1111% { transform: translate(0px, 36.337px); }
156
+ 55.5556% { transform: translate(0px, 35.151px); }
157
+ 56% { transform: translate(0px, 33.953px); }
158
+ 56.4444% { transform: translate(0px, 32.748px); }
159
+ 56.8889% { transform: translate(0px, 31.535px); }
160
+ 57.3333% { transform: translate(0px, 30.319px); }
161
+ 57.7778% { transform: translate(0px, 29.100px); }
162
+ 58.2222% { transform: translate(0px, 27.882px); }
163
+ 58.6667% { transform: translate(0px, 26.665px); }
164
+ 59.1111% { transform: translate(0px, 25.453px); }
165
+ 59.5556% { transform: translate(0px, 24.247px); }
166
+ 60% { transform: translate(0px, 23.050px); }
167
+ 60.4444% { transform: translate(0px, 21.863px); }
168
+ 60.8889% { transform: translate(0px, 20.689px); }
169
+ 61.3333% { transform: translate(0px, 19.530px); }
170
+ 61.7778% { transform: translate(0px, 18.388px); }
171
+ 62.2222% { transform: translate(0px, 17.264px); }
172
+ 62.6667% { transform: translate(0px, 16.161px); }
173
+ 63.1111% { transform: translate(0px, 15.081px); }
174
+ 63.5556% { transform: translate(0px, 14.026px); }
175
+ 64% { transform: translate(0px, 12.996px); }
176
+ 64.4444% { transform: translate(0px, 11.996px); }
177
+ 64.8889% { transform: translate(0px, 11.025px); }
178
+ 65.3333% { transform: translate(0px, 10.086px); }
179
+ 65.7778% { transform: translate(0px, 9.180px); }
180
+ 66.2222% { transform: translate(0px, 8.309px); }
181
+ 66.6667% { transform: translate(0px, 7.475px); }
182
+ 67.1111% { transform: translate(0px, 6.678px); }
183
+ 67.5556% { transform: translate(0px, 5.921px); }
184
+ 68% { transform: translate(0px, 5.205px); }
185
+ 68.4444% { transform: translate(0px, 4.530px); }
186
+ 68.8889% { transform: translate(0px, 3.899px); }
187
+ 69.3333% { transform: translate(0px, 3.312px); }
188
+ 69.7778% { transform: translate(0px, 2.770px); }
189
+ 70.2222% { transform: translate(0px, 2.274px); }
190
+ 70.6667% { transform: translate(0px, 1.825px); }
191
+ 71.1111% { transform: translate(0px, 1.424px); }
192
+ 71.5556% { transform: translate(0px, 1.072px); }
193
+ 72% { transform: translate(0px, 0.769px); }
194
+ 72.4444% { transform: translate(0px, 0.515px); }
195
+ 72.8889% { transform: translate(0px, 0.312px); }
196
+ 73.3333% { transform: translate(0px, 0.159px); }
197
+ 73.7778% { transform: translate(0px, 0.057px); }
198
+ 74.2222% { transform: translate(0px, 0.006px); }
199
+ 74.6667% { transform: translate(0px, 0.000px); }
200
+ 75.1111% { transform: translate(0px, 0.000px); }
201
+ 75.5556% { transform: translate(0px, 0.000px); }
202
+ 76% { transform: translate(0px, 0.000px); }
203
+ 76.4444% { transform: translate(0px, 0.000px); }
204
+ 76.8889% { transform: translate(0px, 0.000px); }
205
+ 77.3333% { transform: translate(0px, 0.000px); }
206
+ 77.7778% { transform: translate(0px, 0.000px); }
207
+ 78.2222% { transform: translate(0px, 0.000px); }
208
+ 78.6667% { transform: translate(0px, 0.000px); }
209
+ 79.1111% { transform: translate(0px, 0.000px); }
210
+ 79.5556% { transform: translate(0px, 0.000px); }
211
+ 80% { transform: translate(0px, 0.000px); }
212
+ 80.4444% { transform: translate(0px, 0.000px); }
213
+ 80.8889% { transform: translate(0px, 0.000px); }
214
+ 81.3333% { transform: translate(0px, 0.000px); }
215
+ 81.7778% { transform: translate(0px, 0.000px); }
216
+ 82.2222% { transform: translate(0px, 0.000px); }
217
+ 82.6667% { transform: translate(0px, 0.000px); }
218
+ 83.1111% { transform: translate(0px, 0.000px); }
219
+ 83.5556% { transform: translate(0px, 0.000px); }
220
+ 84% { transform: translate(0px, 0.000px); }
221
+ 84.4444% { transform: translate(0px, 0.000px); }
222
+ 84.8889% { transform: translate(0px, 0.000px); }
223
+ 85.3333% { transform: translate(0px, 0.000px); }
224
+ 85.7778% { transform: translate(0px, 0.000px); }
225
+ 86.2222% { transform: translate(0px, 0.000px); }
226
+ 86.6667% { transform: translate(0px, 0.000px); }
227
+ 87.1111% { transform: translate(0px, 0.000px); }
228
+ 87.5556% { transform: translate(0px, 0.000px); }
229
+ 88% { transform: translate(0px, 0.000px); }
230
+ 88.4444% { transform: translate(0px, 0.000px); }
231
+ 88.8889% { transform: translate(0px, 0.000px); }
232
+ 89.3333% { transform: translate(0px, 0.000px); }
233
+ 89.7778% { transform: translate(0px, 0.000px); }
234
+ 90.2222% { transform: translate(0px, 0.000px); }
235
+ 90.6667% { transform: translate(0px, 0.000px); }
236
+ 91.1111% { transform: translate(0px, 0.000px); }
237
+ 91.5556% { transform: translate(0px, 0.000px); }
238
+ 92% { transform: translate(0px, 0.000px); }
239
+ 92.4444% { transform: translate(0px, 0.000px); }
240
+ 92.8889% { transform: translate(0px, 0.000px); }
241
+ 93.3333% { transform: translate(0px, 0.000px); }
242
+ 93.7778% { transform: translate(0px, 0.000px); }
243
+ 94.2222% { transform: translate(0px, 0.000px); }
244
+ 94.6667% { transform: translate(0px, 0.000px); }
245
+ 95.1111% { transform: translate(0px, 0.000px); }
246
+ 95.5556% { transform: translate(0px, 0.000px); }
247
+ 96% { transform: translate(0px, 0.000px); }
248
+ 96.4444% { transform: translate(0px, 0.000px); }
249
+ 96.8889% { transform: translate(0px, 0.000px); }
250
+ 97.3333% { transform: translate(0px, 0.000px); }
251
+ 97.7778% { transform: translate(0px, 0.000px); }
252
+ 98.2222% { transform: translate(0px, 0.000px); }
253
+ 98.6667% { transform: translate(0px, 0.000px); }
254
+ 99.1111% { transform: translate(0px, 0.000px); }
255
+ 99.5556% { transform: translate(0px, 0.000px); }
256
+ 100% { transform: translate(0px, 0.000px); }
40
257
  }
41
258
 
42
259
  @keyframes shared-opacity-1 {
43
260
  0% {
44
261
  opacity: 0;
45
262
  }
46
- 1.736691% {
263
+ 1.5556% {
47
264
  opacity: 0;
48
265
  }
49
- 1.737691% {
266
+ 1.5566% {
50
267
  opacity: 1;
51
268
  }
52
269
  100% {
@@ -57,67 +274,752 @@ svg {
57
274
  .Frame-1707483278 {
58
275
  transform-origin: 44.5px 34px;
59
276
  animation:
60
- Frame-1707483278-transform 2417ms linear infinite both,
61
- shared-opacity-1 2417ms linear infinite both;
277
+ Frame-1707483278-transform var(--loop) linear infinite both,
278
+ shared-opacity-1 var(--loop) linear infinite both;
62
279
  }
63
280
 
64
281
  @keyframes Frame-1707483278-transform {
65
- 0% {
66
- transform: translate(0px, 53.207292px);
67
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
68
- }
69
- 32.767894% {
70
- transform: translate(0px, 0px);
71
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
72
- }
73
- 100% {
74
- transform: translate(0px, 0px);
75
- }
282
+ 0% { transform: translate(0px, 53.207px); }
283
+ 0.4444% { transform: translate(0px, 53.207px); }
284
+ 0.8889% { transform: translate(0px, 53.207px); }
285
+ 1.3333% { transform: translate(0px, 53.207px); }
286
+ 1.7778% { transform: translate(0px, 53.207px); }
287
+ 2.2222% { transform: translate(0px, 53.207px); }
288
+ 2.6667% { transform: translate(0px, 53.207px); }
289
+ 3.1111% { transform: translate(0px, 53.207px); }
290
+ 3.5556% { transform: translate(0px, 53.207px); }
291
+ 4% { transform: translate(0px, 53.207px); }
292
+ 4.4444% { transform: translate(0px, 53.207px); }
293
+ 4.8889% { transform: translate(0px, 53.207px); }
294
+ 5.3333% { transform: translate(0px, 53.207px); }
295
+ 5.7778% { transform: translate(0px, 53.207px); }
296
+ 6.2222% { transform: translate(0px, 53.207px); }
297
+ 6.6667% { transform: translate(0px, 53.207px); }
298
+ 7.1111% { transform: translate(0px, 53.207px); }
299
+ 7.5556% { transform: translate(0px, 53.207px); }
300
+ 8% { transform: translate(0px, 53.207px); }
301
+ 8.4444% { transform: translate(0px, 53.207px); }
302
+ 8.8889% { transform: translate(0px, 53.207px); }
303
+ 9.3333% { transform: translate(0px, 53.207px); }
304
+ 9.7778% { transform: translate(0px, 53.207px); }
305
+ 10.2222% { transform: translate(0px, 53.207px); }
306
+ 10.6667% { transform: translate(0px, 53.207px); }
307
+ 11.1111% { transform: translate(0px, 53.207px); }
308
+ 11.5556% { transform: translate(0px, 53.207px); }
309
+ 12% { transform: translate(0px, 53.207px); }
310
+ 12.4444% { transform: translate(0px, 53.207px); }
311
+ 12.8889% { transform: translate(0px, 53.207px); }
312
+ 13.3333% { transform: translate(0px, 53.207px); }
313
+ 13.7778% { transform: translate(0px, 53.207px); }
314
+ 14.2222% { transform: translate(0px, 53.207px); }
315
+ 14.6667% { transform: translate(0px, 53.207px); }
316
+ 15.1111% { transform: translate(0px, 53.207px); }
317
+ 15.5556% { transform: translate(0px, 53.207px); }
318
+ 16% { transform: translate(0px, 53.207px); }
319
+ 16.4444% { transform: translate(0px, 53.207px); }
320
+ 16.8889% { transform: translate(0px, 53.207px); }
321
+ 17.3333% { transform: translate(0px, 53.207px); }
322
+ 17.7778% { transform: translate(0px, 53.207px); }
323
+ 18.2222% { transform: translate(0px, 53.207px); }
324
+ 18.6667% { transform: translate(0px, 53.207px); }
325
+ 19.1111% { transform: translate(0px, 53.207px); }
326
+ 19.5556% { transform: translate(0px, 53.207px); }
327
+ 20% { transform: translate(0px, 53.207px); }
328
+ 20.4444% { transform: translate(0px, 53.207px); }
329
+ 20.8889% { transform: translate(0px, 53.207px); }
330
+ 21.3333% { transform: translate(0px, 53.207px); }
331
+ 21.7778% { transform: translate(0px, 53.207px); }
332
+ 22.2222% { transform: translate(0px, 53.207px); }
333
+ 22.6667% { transform: translate(0px, 53.184px); }
334
+ 23.1111% { transform: translate(0px, 53.114px); }
335
+ 23.5556% { transform: translate(0px, 52.998px); }
336
+ 24% { transform: translate(0px, 52.835px); }
337
+ 24.4444% { transform: translate(0px, 52.626px); }
338
+ 24.8889% { transform: translate(0px, 52.371px); }
339
+ 25.3333% { transform: translate(0px, 52.072px); }
340
+ 25.7778% { transform: translate(0px, 51.728px); }
341
+ 26.2222% { transform: translate(0px, 51.339px); }
342
+ 26.6667% { transform: translate(0px, 50.907px); }
343
+ 27.1111% { transform: translate(0px, 50.433px); }
344
+ 27.5556% { transform: translate(0px, 49.917px); }
345
+ 28% { transform: translate(0px, 49.359px); }
346
+ 28.4444% { transform: translate(0px, 48.762px); }
347
+ 28.8889% { transform: translate(0px, 48.126px); }
348
+ 29.3333% { transform: translate(0px, 47.453px); }
349
+ 29.7778% { transform: translate(0px, 46.742px); }
350
+ 30.2222% { transform: translate(0px, 45.997px); }
351
+ 30.6667% { transform: translate(0px, 45.217px); }
352
+ 31.1111% { transform: translate(0px, 44.405px); }
353
+ 31.5556% { transform: translate(0px, 43.561px); }
354
+ 32% { transform: translate(0px, 42.688px); }
355
+ 32.4444% { transform: translate(0px, 41.787px); }
356
+ 32.8889% { transform: translate(0px, 40.859px); }
357
+ 33.3333% { transform: translate(0px, 39.905px); }
358
+ 33.7778% { transform: translate(0px, 38.929px); }
359
+ 34.2222% { transform: translate(0px, 37.931px); }
360
+ 34.6667% { transform: translate(0px, 36.913px); }
361
+ 35.1111% { transform: translate(0px, 35.877px); }
362
+ 35.5556% { transform: translate(0px, 34.825px); }
363
+ 36% { transform: translate(0px, 33.758px); }
364
+ 36.4444% { transform: translate(0px, 32.679px); }
365
+ 36.8889% { transform: translate(0px, 31.589px); }
366
+ 37.3333% { transform: translate(0px, 30.490px); }
367
+ 37.7778% { transform: translate(0px, 29.384px); }
368
+ 38.2222% { transform: translate(0px, 28.274px); }
369
+ 38.6667% { transform: translate(0px, 27.161px); }
370
+ 39.1111% { transform: translate(0px, 26.047px); }
371
+ 39.5556% { transform: translate(0px, 24.933px); }
372
+ 40% { transform: translate(0px, 23.823px); }
373
+ 40.4444% { transform: translate(0px, 22.717px); }
374
+ 40.8889% { transform: translate(0px, 21.619px); }
375
+ 41.3333% { transform: translate(0px, 20.529px); }
376
+ 41.7778% { transform: translate(0px, 19.449px); }
377
+ 42.2222% { transform: translate(0px, 18.383px); }
378
+ 42.6667% { transform: translate(0px, 17.330px); }
379
+ 43.1111% { transform: translate(0px, 16.294px); }
380
+ 43.5556% { transform: translate(0px, 15.276px); }
381
+ 44% { transform: translate(0px, 14.278px); }
382
+ 44.4444% { transform: translate(0px, 13.302px); }
383
+ 44.8889% { transform: translate(0px, 12.349px); }
384
+ 45.3333% { transform: translate(0px, 11.421px); }
385
+ 45.7778% { transform: translate(0px, 10.519px); }
386
+ 46.2222% { transform: translate(0px, 9.646px); }
387
+ 46.6667% { transform: translate(0px, 8.802px); }
388
+ 47.1111% { transform: translate(0px, 7.990px); }
389
+ 47.5556% { transform: translate(0px, 7.210px); }
390
+ 48% { transform: translate(0px, 6.465px); }
391
+ 48.4444% { transform: translate(0px, 5.755px); }
392
+ 48.8889% { transform: translate(0px, 5.081px); }
393
+ 49.3333% { transform: translate(0px, 4.445px); }
394
+ 49.7778% { transform: translate(0px, 3.848px); }
395
+ 50.2222% { transform: translate(0px, 3.291px); }
396
+ 50.6667% { transform: translate(0px, 2.774px); }
397
+ 51.1111% { transform: translate(0px, 2.300px); }
398
+ 51.5556% { transform: translate(0px, 1.868px); }
399
+ 52% { transform: translate(0px, 1.480px); }
400
+ 52.4444% { transform: translate(0px, 1.135px); }
401
+ 52.8889% { transform: translate(0px, 0.836px); }
402
+ 53.3333% { transform: translate(0px, 0.581px); }
403
+ 53.7778% { transform: translate(0px, 0.373px); }
404
+ 54.2222% { transform: translate(0px, 0.210px); }
405
+ 54.6667% { transform: translate(0px, 0.093px); }
406
+ 55.1111% { transform: translate(0px, 0.023px); }
407
+ 55.5556% { transform: translate(0px, 0.000px); }
408
+ 56% { transform: translate(0px, 0.000px); }
409
+ 56.4444% { transform: translate(0px, 0.000px); }
410
+ 56.8889% { transform: translate(0px, 0.000px); }
411
+ 57.3333% { transform: translate(0px, 0.000px); }
412
+ 57.7778% { transform: translate(0px, 0.000px); }
413
+ 58.2222% { transform: translate(0px, 0.000px); }
414
+ 58.6667% { transform: translate(0px, 0.000px); }
415
+ 59.1111% { transform: translate(0px, 0.000px); }
416
+ 59.5556% { transform: translate(0px, 0.000px); }
417
+ 60% { transform: translate(0px, 0.000px); }
418
+ 60.4444% { transform: translate(0px, 0.000px); }
419
+ 60.8889% { transform: translate(0px, 0.000px); }
420
+ 61.3333% { transform: translate(0px, 0.000px); }
421
+ 61.7778% { transform: translate(0px, 0.000px); }
422
+ 62.2222% { transform: translate(0px, 0.000px); }
423
+ 62.6667% { transform: translate(0px, 0.000px); }
424
+ 63.1111% { transform: translate(0px, 0.000px); }
425
+ 63.5556% { transform: translate(0px, 0.000px); }
426
+ 64% { transform: translate(0px, 0.000px); }
427
+ 64.4444% { transform: translate(0px, 0.000px); }
428
+ 64.8889% { transform: translate(0px, 0.000px); }
429
+ 65.3333% { transform: translate(0px, 0.000px); }
430
+ 65.7778% { transform: translate(0px, 0.000px); }
431
+ 66.2222% { transform: translate(0px, 0.000px); }
432
+ 66.6667% { transform: translate(0px, 0.000px); }
433
+ 67.1111% { transform: translate(0px, 0.000px); }
434
+ 67.5556% { transform: translate(0px, 0.000px); }
435
+ 68% { transform: translate(0px, 0.000px); }
436
+ 68.4444% { transform: translate(0px, 0.000px); }
437
+ 68.8889% { transform: translate(0px, 0.000px); }
438
+ 69.3333% { transform: translate(0px, 0.000px); }
439
+ 69.7778% { transform: translate(0px, 0.000px); }
440
+ 70.2222% { transform: translate(0px, 0.000px); }
441
+ 70.6667% { transform: translate(0px, 0.000px); }
442
+ 71.1111% { transform: translate(0px, 0.000px); }
443
+ 71.5556% { transform: translate(0px, 0.000px); }
444
+ 72% { transform: translate(0px, 0.000px); }
445
+ 72.4444% { transform: translate(0px, 0.000px); }
446
+ 72.8889% { transform: translate(0px, 0.000px); }
447
+ 73.3333% { transform: translate(0px, 0.000px); }
448
+ 73.7778% { transform: translate(0px, 0.000px); }
449
+ 74.2222% { transform: translate(0px, 0.000px); }
450
+ 74.6667% { transform: translate(0px, 0.000px); }
451
+ 75.1111% { transform: translate(0px, 0.000px); }
452
+ 75.5556% { transform: translate(0px, 0.000px); }
453
+ 76% { transform: translate(0px, 0.000px); }
454
+ 76.4444% { transform: translate(0px, 0.000px); }
455
+ 76.8889% { transform: translate(0px, 0.000px); }
456
+ 77.3333% { transform: translate(0px, 0.000px); }
457
+ 77.7778% { transform: translate(0px, 0.000px); }
458
+ 78.2222% { transform: translate(0px, 0.000px); }
459
+ 78.6667% { transform: translate(0px, 0.000px); }
460
+ 79.1111% { transform: translate(0px, 0.000px); }
461
+ 79.5556% { transform: translate(0px, 0.000px); }
462
+ 80% { transform: translate(0px, 0.000px); }
463
+ 80.4444% { transform: translate(0px, 0.000px); }
464
+ 80.8889% { transform: translate(0px, 0.000px); }
465
+ 81.3333% { transform: translate(0px, 0.000px); }
466
+ 81.7778% { transform: translate(0px, 0.000px); }
467
+ 82.2222% { transform: translate(0px, 0.000px); }
468
+ 82.6667% { transform: translate(0px, 0.000px); }
469
+ 83.1111% { transform: translate(0px, 0.000px); }
470
+ 83.5556% { transform: translate(0px, 0.000px); }
471
+ 84% { transform: translate(0px, 0.000px); }
472
+ 84.4444% { transform: translate(0px, 0.000px); }
473
+ 84.8889% { transform: translate(0px, 0.000px); }
474
+ 85.3333% { transform: translate(0px, 0.000px); }
475
+ 85.7778% { transform: translate(0px, 0.000px); }
476
+ 86.2222% { transform: translate(0px, 0.000px); }
477
+ 86.6667% { transform: translate(0px, 0.000px); }
478
+ 87.1111% { transform: translate(0px, 0.000px); }
479
+ 87.5556% { transform: translate(0px, 0.000px); }
480
+ 88% { transform: translate(0px, 0.000px); }
481
+ 88.4444% { transform: translate(0px, 0.000px); }
482
+ 88.8889% { transform: translate(0px, 0.000px); }
483
+ 89.3333% { transform: translate(0px, 0.000px); }
484
+ 89.7778% { transform: translate(0px, 0.000px); }
485
+ 90.2222% { transform: translate(0px, 0.000px); }
486
+ 90.6667% { transform: translate(0px, 0.000px); }
487
+ 91.1111% { transform: translate(0px, 0.000px); }
488
+ 91.5556% { transform: translate(0px, 0.000px); }
489
+ 92% { transform: translate(0px, 0.000px); }
490
+ 92.4444% { transform: translate(0px, 0.000px); }
491
+ 92.8889% { transform: translate(0px, 0.000px); }
492
+ 93.3333% { transform: translate(0px, 0.000px); }
493
+ 93.7778% { transform: translate(0px, 0.000px); }
494
+ 94.2222% { transform: translate(0px, 0.000px); }
495
+ 94.6667% { transform: translate(0px, 0.000px); }
496
+ 95.1111% { transform: translate(0px, 0.000px); }
497
+ 95.5556% { transform: translate(0px, 0.000px); }
498
+ 96% { transform: translate(0px, 0.000px); }
499
+ 96.4444% { transform: translate(0px, 0.000px); }
500
+ 96.8889% { transform: translate(0px, 0.000px); }
501
+ 97.3333% { transform: translate(0px, 0.000px); }
502
+ 97.7778% { transform: translate(0px, 0.000px); }
503
+ 98.2222% { transform: translate(0px, 0.000px); }
504
+ 98.6667% { transform: translate(0px, 0.000px); }
505
+ 99.1111% { transform: translate(0px, 0.000px); }
506
+ 99.5556% { transform: translate(0px, 0.000px); }
507
+ 100% { transform: translate(0px, 0.000px); }
76
508
  }
77
509
 
78
510
  .Frame-1707483281 {
79
511
  transform-origin: 44.5px 24px;
80
512
  animation:
81
- Frame-1707483281-transform 2417ms linear infinite both,
82
- shared-opacity-1 2417ms linear infinite both;
513
+ Frame-1707483281-transform var(--loop) linear infinite both,
514
+ shared-opacity-1 var(--loop) linear infinite both;
83
515
  }
84
516
 
85
517
  @keyframes Frame-1707483281-transform {
86
- 0% {
87
- transform: translate(0px, 35.105832px);
88
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
89
- }
90
- 25.872293% {
91
- transform: translate(0px, 0px);
92
- animation-timing-function: cubic-bezier(0.801, 0, 0.199, 1);
93
- }
94
- 100% {
95
- transform: translate(0px, 0px);
96
- }
518
+ 0% { transform: translate(0px, 35.106px); }
519
+ 0.4444% { transform: translate(0px, 35.106px); }
520
+ 0.8889% { transform: translate(0px, 35.106px); }
521
+ 1.3333% { transform: translate(0px, 35.106px); }
522
+ 1.7778% { transform: translate(0px, 35.106px); }
523
+ 2.2222% { transform: translate(0px, 35.106px); }
524
+ 2.6667% { transform: translate(0px, 35.106px); }
525
+ 3.1111% { transform: translate(0px, 35.106px); }
526
+ 3.5556% { transform: translate(0px, 35.102px); }
527
+ 4% { transform: translate(0px, 35.071px); }
528
+ 4.4444% { transform: translate(0px, 35.010px); }
529
+ 4.8889% { transform: translate(0px, 34.918px); }
530
+ 5.3333% { transform: translate(0px, 34.795px); }
531
+ 5.7778% { transform: translate(0px, 34.642px); }
532
+ 6.2222% { transform: translate(0px, 34.459px); }
533
+ 6.6667% { transform: translate(0px, 34.247px); }
534
+ 7.1111% { transform: translate(0px, 34.005px); }
535
+ 7.5556% { transform: translate(0px, 33.734px); }
536
+ 8% { transform: translate(0px, 33.435px); }
537
+ 8.4444% { transform: translate(0px, 33.108px); }
538
+ 8.8889% { transform: translate(0px, 32.754px); }
539
+ 9.3333% { transform: translate(0px, 32.373px); }
540
+ 9.7778% { transform: translate(0px, 31.966px); }
541
+ 10.2222% { transform: translate(0px, 31.534px); }
542
+ 10.6667% { transform: translate(0px, 31.078px); }
543
+ 11.1111% { transform: translate(0px, 30.597px); }
544
+ 11.5556% { transform: translate(0px, 30.094px); }
545
+ 12% { transform: translate(0px, 29.569px); }
546
+ 12.4444% { transform: translate(0px, 29.022px); }
547
+ 12.8889% { transform: translate(0px, 28.456px); }
548
+ 13.3333% { transform: translate(0px, 27.870px); }
549
+ 13.7778% { transform: translate(0px, 27.267px); }
550
+ 14.2222% { transform: translate(0px, 26.646px); }
551
+ 14.6667% { transform: translate(0px, 26.009px); }
552
+ 15.1111% { transform: translate(0px, 25.358px); }
553
+ 15.5556% { transform: translate(0px, 24.692px); }
554
+ 16% { transform: translate(0px, 24.015px); }
555
+ 16.4444% { transform: translate(0px, 23.325px); }
556
+ 16.8889% { transform: translate(0px, 22.626px); }
557
+ 17.3333% { transform: translate(0px, 21.918px); }
558
+ 17.7778% { transform: translate(0px, 21.202px); }
559
+ 18.2222% { transform: translate(0px, 20.480px); }
560
+ 18.6667% { transform: translate(0px, 19.753px); }
561
+ 19.1111% { transform: translate(0px, 19.022px); }
562
+ 19.5556% { transform: translate(0px, 18.288px); }
563
+ 20% { transform: translate(0px, 17.553px); }
564
+ 20.4444% { transform: translate(0px, 16.818px); }
565
+ 20.8889% { transform: translate(0px, 16.084px); }
566
+ 21.3333% { transform: translate(0px, 15.353px); }
567
+ 21.7778% { transform: translate(0px, 14.626px); }
568
+ 22.2222% { transform: translate(0px, 13.903px); }
569
+ 22.6667% { transform: translate(0px, 13.188px); }
570
+ 23.1111% { transform: translate(0px, 12.480px); }
571
+ 23.5556% { transform: translate(0px, 11.780px); }
572
+ 24% { transform: translate(0px, 11.091px); }
573
+ 24.4444% { transform: translate(0px, 10.414px); }
574
+ 24.8889% { transform: translate(0px, 9.748px); }
575
+ 25.3333% { transform: translate(0px, 9.097px); }
576
+ 25.7778% { transform: translate(0px, 8.460px); }
577
+ 26.2222% { transform: translate(0px, 7.839px); }
578
+ 26.6667% { transform: translate(0px, 7.236px); }
579
+ 27.1111% { transform: translate(0px, 6.650px); }
580
+ 27.5556% { transform: translate(0px, 6.083px); }
581
+ 28% { transform: translate(0px, 5.537px); }
582
+ 28.4444% { transform: translate(0px, 5.012px); }
583
+ 28.8889% { transform: translate(0px, 4.509px); }
584
+ 29.3333% { transform: translate(0px, 4.028px); }
585
+ 29.7778% { transform: translate(0px, 3.571px); }
586
+ 30.2222% { transform: translate(0px, 3.139px); }
587
+ 30.6667% { transform: translate(0px, 2.732px); }
588
+ 31.1111% { transform: translate(0px, 2.352px); }
589
+ 31.5556% { transform: translate(0px, 1.997px); }
590
+ 32% { transform: translate(0px, 1.671px); }
591
+ 32.4444% { transform: translate(0px, 1.372px); }
592
+ 32.8889% { transform: translate(0px, 1.101px); }
593
+ 33.3333% { transform: translate(0px, 0.859px); }
594
+ 33.7778% { transform: translate(0px, 0.647px); }
595
+ 34.2222% { transform: translate(0px, 0.464px); }
596
+ 34.6667% { transform: translate(0px, 0.311px); }
597
+ 35.1111% { transform: translate(0px, 0.188px); }
598
+ 35.5556% { transform: translate(0px, 0.096px); }
599
+ 36% { transform: translate(0px, 0.035px); }
600
+ 36.4444% { transform: translate(0px, 0.004px); }
601
+ 36.8889% { transform: translate(0px, 0.000px); }
602
+ 37.3333% { transform: translate(0px, 0.000px); }
603
+ 37.7778% { transform: translate(0px, 0.000px); }
604
+ 38.2222% { transform: translate(0px, 0.000px); }
605
+ 38.6667% { transform: translate(0px, 0.000px); }
606
+ 39.1111% { transform: translate(0px, 0.000px); }
607
+ 39.5556% { transform: translate(0px, 0.000px); }
608
+ 40% { transform: translate(0px, 0.000px); }
609
+ 40.4444% { transform: translate(0px, 0.000px); }
610
+ 40.8889% { transform: translate(0px, 0.000px); }
611
+ 41.3333% { transform: translate(0px, 0.000px); }
612
+ 41.7778% { transform: translate(0px, 0.000px); }
613
+ 42.2222% { transform: translate(0px, 0.000px); }
614
+ 42.6667% { transform: translate(0px, 0.000px); }
615
+ 43.1111% { transform: translate(0px, 0.000px); }
616
+ 43.5556% { transform: translate(0px, 0.000px); }
617
+ 44% { transform: translate(0px, 0.000px); }
618
+ 44.4444% { transform: translate(0px, 0.000px); }
619
+ 44.8889% { transform: translate(0px, 0.000px); }
620
+ 45.3333% { transform: translate(0px, 0.000px); }
621
+ 45.7778% { transform: translate(0px, 0.000px); }
622
+ 46.2222% { transform: translate(0px, 0.000px); }
623
+ 46.6667% { transform: translate(0px, 0.000px); }
624
+ 47.1111% { transform: translate(0px, 0.000px); }
625
+ 47.5556% { transform: translate(0px, 0.000px); }
626
+ 48% { transform: translate(0px, 0.000px); }
627
+ 48.4444% { transform: translate(0px, 0.000px); }
628
+ 48.8889% { transform: translate(0px, 0.000px); }
629
+ 49.3333% { transform: translate(0px, 0.000px); }
630
+ 49.7778% { transform: translate(0px, 0.000px); }
631
+ 50.2222% { transform: translate(0px, 0.000px); }
632
+ 50.6667% { transform: translate(0px, 0.000px); }
633
+ 51.1111% { transform: translate(0px, 0.000px); }
634
+ 51.5556% { transform: translate(0px, 0.000px); }
635
+ 52% { transform: translate(0px, 0.000px); }
636
+ 52.4444% { transform: translate(0px, 0.000px); }
637
+ 52.8889% { transform: translate(0px, 0.000px); }
638
+ 53.3333% { transform: translate(0px, 0.000px); }
639
+ 53.7778% { transform: translate(0px, 0.000px); }
640
+ 54.2222% { transform: translate(0px, 0.000px); }
641
+ 54.6667% { transform: translate(0px, 0.000px); }
642
+ 55.1111% { transform: translate(0px, 0.000px); }
643
+ 55.5556% { transform: translate(0px, 0.000px); }
644
+ 56% { transform: translate(0px, 0.000px); }
645
+ 56.4444% { transform: translate(0px, 0.000px); }
646
+ 56.8889% { transform: translate(0px, 0.000px); }
647
+ 57.3333% { transform: translate(0px, 0.000px); }
648
+ 57.7778% { transform: translate(0px, 0.000px); }
649
+ 58.2222% { transform: translate(0px, 0.000px); }
650
+ 58.6667% { transform: translate(0px, 0.000px); }
651
+ 59.1111% { transform: translate(0px, 0.000px); }
652
+ 59.5556% { transform: translate(0px, 0.000px); }
653
+ 60% { transform: translate(0px, 0.000px); }
654
+ 60.4444% { transform: translate(0px, 0.000px); }
655
+ 60.8889% { transform: translate(0px, 0.000px); }
656
+ 61.3333% { transform: translate(0px, 0.000px); }
657
+ 61.7778% { transform: translate(0px, 0.000px); }
658
+ 62.2222% { transform: translate(0px, 0.000px); }
659
+ 62.6667% { transform: translate(0px, 0.000px); }
660
+ 63.1111% { transform: translate(0px, 0.000px); }
661
+ 63.5556% { transform: translate(0px, 0.000px); }
662
+ 64% { transform: translate(0px, 0.000px); }
663
+ 64.4444% { transform: translate(0px, 0.000px); }
664
+ 64.8889% { transform: translate(0px, 0.000px); }
665
+ 65.3333% { transform: translate(0px, 0.000px); }
666
+ 65.7778% { transform: translate(0px, 0.000px); }
667
+ 66.2222% { transform: translate(0px, 0.000px); }
668
+ 66.6667% { transform: translate(0px, 0.000px); }
669
+ 67.1111% { transform: translate(0px, 0.000px); }
670
+ 67.5556% { transform: translate(0px, 0.000px); }
671
+ 68% { transform: translate(0px, 0.000px); }
672
+ 68.4444% { transform: translate(0px, 0.000px); }
673
+ 68.8889% { transform: translate(0px, 0.000px); }
674
+ 69.3333% { transform: translate(0px, 0.000px); }
675
+ 69.7778% { transform: translate(0px, 0.000px); }
676
+ 70.2222% { transform: translate(0px, 0.000px); }
677
+ 70.6667% { transform: translate(0px, 0.000px); }
678
+ 71.1111% { transform: translate(0px, 0.000px); }
679
+ 71.5556% { transform: translate(0px, 0.000px); }
680
+ 72% { transform: translate(0px, 0.000px); }
681
+ 72.4444% { transform: translate(0px, 0.000px); }
682
+ 72.8889% { transform: translate(0px, 0.000px); }
683
+ 73.3333% { transform: translate(0px, 0.000px); }
684
+ 73.7778% { transform: translate(0px, 0.000px); }
685
+ 74.2222% { transform: translate(0px, 0.000px); }
686
+ 74.6667% { transform: translate(0px, 0.000px); }
687
+ 75.1111% { transform: translate(0px, 0.000px); }
688
+ 75.5556% { transform: translate(0px, 0.000px); }
689
+ 76% { transform: translate(0px, 0.000px); }
690
+ 76.4444% { transform: translate(0px, 0.000px); }
691
+ 76.8889% { transform: translate(0px, 0.000px); }
692
+ 77.3333% { transform: translate(0px, 0.000px); }
693
+ 77.7778% { transform: translate(0px, 0.000px); }
694
+ 78.2222% { transform: translate(0px, 0.000px); }
695
+ 78.6667% { transform: translate(0px, 0.000px); }
696
+ 79.1111% { transform: translate(0px, 0.000px); }
697
+ 79.5556% { transform: translate(0px, 0.000px); }
698
+ 80% { transform: translate(0px, 0.000px); }
699
+ 80.4444% { transform: translate(0px, 0.000px); }
700
+ 80.8889% { transform: translate(0px, 0.000px); }
701
+ 81.3333% { transform: translate(0px, 0.000px); }
702
+ 81.7778% { transform: translate(0px, 0.000px); }
703
+ 82.2222% { transform: translate(0px, 0.000px); }
704
+ 82.6667% { transform: translate(0px, 0.000px); }
705
+ 83.1111% { transform: translate(0px, 0.000px); }
706
+ 83.5556% { transform: translate(0px, 0.000px); }
707
+ 84% { transform: translate(0px, 0.000px); }
708
+ 84.4444% { transform: translate(0px, 0.000px); }
709
+ 84.8889% { transform: translate(0px, 0.000px); }
710
+ 85.3333% { transform: translate(0px, 0.000px); }
711
+ 85.7778% { transform: translate(0px, 0.000px); }
712
+ 86.2222% { transform: translate(0px, 0.000px); }
713
+ 86.6667% { transform: translate(0px, 0.000px); }
714
+ 87.1111% { transform: translate(0px, 0.000px); }
715
+ 87.5556% { transform: translate(0px, 0.000px); }
716
+ 88% { transform: translate(0px, 0.000px); }
717
+ 88.4444% { transform: translate(0px, 0.000px); }
718
+ 88.8889% { transform: translate(0px, 0.000px); }
719
+ 89.3333% { transform: translate(0px, 0.000px); }
720
+ 89.7778% { transform: translate(0px, 0.000px); }
721
+ 90.2222% { transform: translate(0px, 0.000px); }
722
+ 90.6667% { transform: translate(0px, 0.000px); }
723
+ 91.1111% { transform: translate(0px, 0.000px); }
724
+ 91.5556% { transform: translate(0px, 0.000px); }
725
+ 92% { transform: translate(0px, 0.000px); }
726
+ 92.4444% { transform: translate(0px, 0.000px); }
727
+ 92.8889% { transform: translate(0px, 0.000px); }
728
+ 93.3333% { transform: translate(0px, 0.000px); }
729
+ 93.7778% { transform: translate(0px, 0.000px); }
730
+ 94.2222% { transform: translate(0px, 0.000px); }
731
+ 94.6667% { transform: translate(0px, 0.000px); }
732
+ 95.1111% { transform: translate(0px, 0.000px); }
733
+ 95.5556% { transform: translate(0px, 0.000px); }
734
+ 96% { transform: translate(0px, 0.000px); }
735
+ 96.4444% { transform: translate(0px, 0.000px); }
736
+ 96.8889% { transform: translate(0px, 0.000px); }
737
+ 97.3333% { transform: translate(0px, 0.000px); }
738
+ 97.7778% { transform: translate(0px, 0.000px); }
739
+ 98.2222% { transform: translate(0px, 0.000px); }
740
+ 98.6667% { transform: translate(0px, 0.000px); }
741
+ 99.1111% { transform: translate(0px, 0.000px); }
742
+ 99.5556% { transform: translate(0px, 0.000px); }
743
+ 100% { transform: translate(0px, 0.000px); }
97
744
  }
98
745
 
99
746
  .split07 {
100
- animation: shared-opacity-1 2417ms linear infinite both;
747
+ animation: shared-opacity-1 var(--loop) linear infinite both;
101
748
  }
102
749
 
103
750
  .split07-2 {
104
- animation: split07-2-opacity 2417ms linear infinite both;
751
+ animation: split07-2-opacity var(--loop) linear infinite both;
105
752
  }
106
753
 
107
754
  @keyframes split07-2-opacity {
108
755
  0% {
109
756
  opacity: 1;
110
757
  }
111
- 1.737691% {
758
+ 1.5556% {
112
759
  opacity: 1;
113
760
  }
114
- 1.738691% {
761
+ 1.5566% {
115
762
  opacity: 0;
116
763
  }
117
764
  100% {
118
765
  opacity: 0;
119
766
  }
120
767
  }
768
+
769
+ .scrollbar {
770
+ animation: shared-opacity-1 var(--loop) linear infinite both;
771
+ }
772
+
773
+ /* Hidden for the rest of the first loop (the loop minus the start offset), so a snapshot taken at load shows no scroll bar */
774
+ .scrollbar-first-run {
775
+ animation: scrollbar-first-run calc(var(--loop) * 0.14) linear 1 both;
776
+ animation-delay: 0s !important;
777
+ }
778
+
779
+ @keyframes scrollbar-first-run {
780
+ 0% {
781
+ opacity: 0;
782
+ }
783
+ 99.9% {
784
+ opacity: 0;
785
+ }
786
+ 100% {
787
+ opacity: 1;
788
+ }
789
+ }
790
+
791
+ .scrollbar-thumb {
792
+ animation: scrollbar-thumb-transform var(--loop) linear infinite both;
793
+ }
794
+
795
+ @keyframes scrollbar-thumb-transform {
796
+ 0% { transform: translate(0px, 0.000px); }
797
+ 0.4444% { transform: translate(0px, 0.000px); }
798
+ 0.8889% { transform: translate(0px, 0.000px); }
799
+ 1.3333% { transform: translate(0px, 0.000px); }
800
+ 1.7778% { transform: translate(0px, 0.000px); }
801
+ 2.2222% { transform: translate(0px, 0.000px); }
802
+ 2.6667% { transform: translate(0px, 0.000px); }
803
+ 3.1111% { transform: translate(0px, 0.000px); }
804
+ 3.5556% { transform: translate(0px, 0.001px); }
805
+ 4% { transform: translate(0px, 0.011px); }
806
+ 4.4444% { transform: translate(0px, 0.029px); }
807
+ 4.8889% { transform: translate(0px, 0.057px); }
808
+ 5.3333% { transform: translate(0px, 0.094px); }
809
+ 5.7778% { transform: translate(0px, 0.141px); }
810
+ 6.2222% { transform: translate(0px, 0.196px); }
811
+ 6.6667% { transform: translate(0px, 0.261px); }
812
+ 7.1111% { transform: translate(0px, 0.334px); }
813
+ 7.5556% { transform: translate(0px, 0.417px); }
814
+ 8% { transform: translate(0px, 0.508px); }
815
+ 8.4444% { transform: translate(0px, 0.607px); }
816
+ 8.8889% { transform: translate(0px, 0.715px); }
817
+ 9.3333% { transform: translate(0px, 0.830px); }
818
+ 9.7778% { transform: translate(0px, 0.954px); }
819
+ 10.2222% { transform: translate(0px, 1.085px); }
820
+ 10.6667% { transform: translate(0px, 1.224px); }
821
+ 11.1111% { transform: translate(0px, 1.370px); }
822
+ 11.5556% { transform: translate(0px, 1.523px); }
823
+ 12% { transform: translate(0px, 1.682px); }
824
+ 12.4444% { transform: translate(0px, 1.848px); }
825
+ 12.8889% { transform: translate(0px, 2.021px); }
826
+ 13.3333% { transform: translate(0px, 2.198px); }
827
+ 13.7778% { transform: translate(0px, 2.382px); }
828
+ 14.2222% { transform: translate(0px, 2.571px); }
829
+ 14.6667% { transform: translate(0px, 2.764px); }
830
+ 15.1111% { transform: translate(0px, 2.962px); }
831
+ 15.5556% { transform: translate(0px, 3.164px); }
832
+ 16% { transform: translate(0px, 3.370px); }
833
+ 16.4444% { transform: translate(0px, 3.579px); }
834
+ 16.8889% { transform: translate(0px, 3.792px); }
835
+ 17.3333% { transform: translate(0px, 4.007px); }
836
+ 17.7778% { transform: translate(0px, 4.224px); }
837
+ 18.2222% { transform: translate(0px, 4.444px); }
838
+ 18.6667% { transform: translate(0px, 4.665px); }
839
+ 19.1111% { transform: translate(0px, 4.887px); }
840
+ 19.5556% { transform: translate(0px, 5.110px); }
841
+ 20% { transform: translate(0px, 5.333px); }
842
+ 20.4444% { transform: translate(0px, 5.557px); }
843
+ 20.8889% { transform: translate(0px, 5.780px); }
844
+ 21.3333% { transform: translate(0px, 6.002px); }
845
+ 21.7778% { transform: translate(0px, 6.223px); }
846
+ 22.2222% { transform: translate(0px, 6.442px); }
847
+ 22.6667% { transform: translate(0px, 6.664px); }
848
+ 23.1111% { transform: translate(0px, 6.894px); }
849
+ 23.5556% { transform: translate(0px, 7.129px); }
850
+ 24% { transform: translate(0px, 7.371px); }
851
+ 24.4444% { transform: translate(0px, 7.619px); }
852
+ 24.8889% { transform: translate(0px, 7.872px); }
853
+ 25.3333% { transform: translate(0px, 8.130px); }
854
+ 25.7778% { transform: translate(0px, 8.393px); }
855
+ 26.2222% { transform: translate(0px, 8.659px); }
856
+ 26.6667% { transform: translate(0px, 8.929px); }
857
+ 27.1111% { transform: translate(0px, 9.202px); }
858
+ 27.5556% { transform: translate(0px, 9.478px); }
859
+ 28% { transform: translate(0px, 9.756px); }
860
+ 28.4444% { transform: translate(0px, 10.035px); }
861
+ 28.8889% { transform: translate(0px, 10.315px); }
862
+ 29.3333% { transform: translate(0px, 10.596px); }
863
+ 29.7778% { transform: translate(0px, 10.878px); }
864
+ 30.2222% { transform: translate(0px, 11.158px); }
865
+ 30.6667% { transform: translate(0px, 11.438px); }
866
+ 31.1111% { transform: translate(0px, 11.717px); }
867
+ 31.5556% { transform: translate(0px, 11.993px); }
868
+ 32% { transform: translate(0px, 12.268px); }
869
+ 32.4444% { transform: translate(0px, 12.539px); }
870
+ 32.8889% { transform: translate(0px, 12.808px); }
871
+ 33.3333% { transform: translate(0px, 13.072px); }
872
+ 33.7778% { transform: translate(0px, 13.333px); }
873
+ 34.2222% { transform: translate(0px, 13.588px); }
874
+ 34.6667% { transform: translate(0px, 13.839px); }
875
+ 35.1111% { transform: translate(0px, 14.084px); }
876
+ 35.5556% { transform: translate(0px, 14.323px); }
877
+ 36% { transform: translate(0px, 14.555px); }
878
+ 36.4444% { transform: translate(0px, 14.781px); }
879
+ 36.8889% { transform: translate(0px, 15.001px); }
880
+ 37.3333% { transform: translate(0px, 15.221px); }
881
+ 37.7778% { transform: translate(0px, 15.443px); }
882
+ 38.2222% { transform: translate(0px, 15.665px); }
883
+ 38.6667% { transform: translate(0px, 15.888px); }
884
+ 39.1111% { transform: translate(0px, 16.112px); }
885
+ 39.5556% { transform: translate(0px, 16.335px); }
886
+ 40% { transform: translate(0px, 16.557px); }
887
+ 40.4444% { transform: translate(0px, 16.779px); }
888
+ 40.8889% { transform: translate(0px, 16.999px); }
889
+ 41.3333% { transform: translate(0px, 17.219px); }
890
+ 41.7778% { transform: translate(0px, 17.445px); }
891
+ 42.2222% { transform: translate(0px, 17.677px); }
892
+ 42.6667% { transform: translate(0px, 17.916px); }
893
+ 43.1111% { transform: translate(0px, 18.161px); }
894
+ 43.5556% { transform: translate(0px, 18.412px); }
895
+ 44% { transform: translate(0px, 18.667px); }
896
+ 44.4444% { transform: translate(0px, 18.928px); }
897
+ 44.8889% { transform: translate(0px, 19.192px); }
898
+ 45.3333% { transform: translate(0px, 19.461px); }
899
+ 45.7778% { transform: translate(0px, 19.732px); }
900
+ 46.2222% { transform: translate(0px, 20.007px); }
901
+ 46.6667% { transform: translate(0px, 20.283px); }
902
+ 47.1111% { transform: translate(0px, 20.562px); }
903
+ 47.5556% { transform: translate(0px, 20.842px); }
904
+ 48% { transform: translate(0px, 21.122px); }
905
+ 48.4444% { transform: translate(0px, 21.404px); }
906
+ 48.8889% { transform: translate(0px, 21.685px); }
907
+ 49.3333% { transform: translate(0px, 21.965px); }
908
+ 49.7778% { transform: translate(0px, 22.244px); }
909
+ 50.2222% { transform: translate(0px, 22.522px); }
910
+ 50.6667% { transform: translate(0px, 22.798px); }
911
+ 51.1111% { transform: translate(0px, 23.071px); }
912
+ 51.5556% { transform: translate(0px, 23.341px); }
913
+ 52% { transform: translate(0px, 23.607px); }
914
+ 52.4444% { transform: translate(0px, 23.870px); }
915
+ 52.8889% { transform: translate(0px, 24.128px); }
916
+ 53.3333% { transform: translate(0px, 24.381px); }
917
+ 53.7778% { transform: translate(0px, 24.629px); }
918
+ 54.2222% { transform: translate(0px, 24.871px); }
919
+ 54.6667% { transform: translate(0px, 25.106px); }
920
+ 55.1111% { transform: translate(0px, 25.336px); }
921
+ 55.5556% { transform: translate(0px, 25.558px); }
922
+ 56% { transform: translate(0px, 25.777px); }
923
+ 56.4444% { transform: translate(0px, 25.998px); }
924
+ 56.8889% { transform: translate(0px, 26.220px); }
925
+ 57.3333% { transform: translate(0px, 26.443px); }
926
+ 57.7778% { transform: translate(0px, 26.667px); }
927
+ 58.2222% { transform: translate(0px, 26.890px); }
928
+ 58.6667% { transform: translate(0px, 27.113px); }
929
+ 59.1111% { transform: translate(0px, 27.335px); }
930
+ 59.5556% { transform: translate(0px, 27.556px); }
931
+ 60% { transform: translate(0px, 27.776px); }
932
+ 60.4444% { transform: translate(0px, 27.993px); }
933
+ 60.8889% { transform: translate(0px, 28.208px); }
934
+ 61.3333% { transform: translate(0px, 28.421px); }
935
+ 61.7778% { transform: translate(0px, 28.630px); }
936
+ 62.2222% { transform: translate(0px, 28.836px); }
937
+ 62.6667% { transform: translate(0px, 29.038px); }
938
+ 63.1111% { transform: translate(0px, 29.236px); }
939
+ 63.5556% { transform: translate(0px, 29.429px); }
940
+ 64% { transform: translate(0px, 29.618px); }
941
+ 64.4444% { transform: translate(0px, 29.802px); }
942
+ 64.8889% { transform: translate(0px, 29.979px); }
943
+ 65.3333% { transform: translate(0px, 30.152px); }
944
+ 65.7778% { transform: translate(0px, 30.318px); }
945
+ 66.2222% { transform: translate(0px, 30.477px); }
946
+ 66.6667% { transform: translate(0px, 30.630px); }
947
+ 67.1111% { transform: translate(0px, 30.776px); }
948
+ 67.5556% { transform: translate(0px, 30.915px); }
949
+ 68% { transform: translate(0px, 31.046px); }
950
+ 68.4444% { transform: translate(0px, 31.170px); }
951
+ 68.8889% { transform: translate(0px, 31.285px); }
952
+ 69.3333% { transform: translate(0px, 31.393px); }
953
+ 69.7778% { transform: translate(0px, 31.492px); }
954
+ 70.2222% { transform: translate(0px, 31.583px); }
955
+ 70.6667% { transform: translate(0px, 31.666px); }
956
+ 71.1111% { transform: translate(0px, 31.739px); }
957
+ 71.5556% { transform: translate(0px, 31.804px); }
958
+ 72% { transform: translate(0px, 31.859px); }
959
+ 72.4444% { transform: translate(0px, 31.906px); }
960
+ 72.8889% { transform: translate(0px, 31.943px); }
961
+ 73.3333% { transform: translate(0px, 31.971px); }
962
+ 73.7778% { transform: translate(0px, 31.989px); }
963
+ 74.2222% { transform: translate(0px, 31.999px); }
964
+ 74.6667% { transform: translate(0px, 32.000px); }
965
+ 75.1111% { transform: translate(0px, 32.000px); }
966
+ 75.5556% { transform: translate(0px, 32.000px); }
967
+ 76% { transform: translate(0px, 32.000px); }
968
+ 76.4444% { transform: translate(0px, 32.000px); }
969
+ 76.8889% { transform: translate(0px, 32.000px); }
970
+ 77.3333% { transform: translate(0px, 32.000px); }
971
+ 77.7778% { transform: translate(0px, 32.000px); }
972
+ 78.2222% { transform: translate(0px, 32.000px); }
973
+ 78.6667% { transform: translate(0px, 32.000px); }
974
+ 79.1111% { transform: translate(0px, 32.000px); }
975
+ 79.5556% { transform: translate(0px, 32.000px); }
976
+ 80% { transform: translate(0px, 32.000px); }
977
+ 80.4444% { transform: translate(0px, 32.000px); }
978
+ 80.8889% { transform: translate(0px, 32.000px); }
979
+ 81.3333% { transform: translate(0px, 32.000px); }
980
+ 81.7778% { transform: translate(0px, 32.000px); }
981
+ 82.2222% { transform: translate(0px, 32.000px); }
982
+ 82.6667% { transform: translate(0px, 32.000px); }
983
+ 83.1111% { transform: translate(0px, 32.000px); }
984
+ 83.5556% { transform: translate(0px, 32.000px); }
985
+ 84% { transform: translate(0px, 32.000px); }
986
+ 84.4444% { transform: translate(0px, 32.000px); }
987
+ 84.8889% { transform: translate(0px, 32.000px); }
988
+ 85.3333% { transform: translate(0px, 32.000px); }
989
+ 85.7778% { transform: translate(0px, 32.000px); }
990
+ 86.2222% { transform: translate(0px, 32.000px); }
991
+ 86.6667% { transform: translate(0px, 32.000px); }
992
+ 87.1111% { transform: translate(0px, 32.000px); }
993
+ 87.5556% { transform: translate(0px, 32.000px); }
994
+ 88% { transform: translate(0px, 32.000px); }
995
+ 88.4444% { transform: translate(0px, 32.000px); }
996
+ 88.8889% { transform: translate(0px, 32.000px); }
997
+ 89.3333% { transform: translate(0px, 32.000px); }
998
+ 89.7778% { transform: translate(0px, 32.000px); }
999
+ 90.2222% { transform: translate(0px, 32.000px); }
1000
+ 90.6667% { transform: translate(0px, 32.000px); }
1001
+ 91.1111% { transform: translate(0px, 32.000px); }
1002
+ 91.5556% { transform: translate(0px, 32.000px); }
1003
+ 92% { transform: translate(0px, 32.000px); }
1004
+ 92.4444% { transform: translate(0px, 32.000px); }
1005
+ 92.8889% { transform: translate(0px, 32.000px); }
1006
+ 93.3333% { transform: translate(0px, 32.000px); }
1007
+ 93.7778% { transform: translate(0px, 32.000px); }
1008
+ 94.2222% { transform: translate(0px, 32.000px); }
1009
+ 94.6667% { transform: translate(0px, 32.000px); }
1010
+ 95.1111% { transform: translate(0px, 32.000px); }
1011
+ 95.5556% { transform: translate(0px, 32.000px); }
1012
+ 96% { transform: translate(0px, 32.000px); }
1013
+ 96.4444% { transform: translate(0px, 32.000px); }
1014
+ 96.8889% { transform: translate(0px, 32.000px); }
1015
+ 97.3333% { transform: translate(0px, 32.000px); }
1016
+ 97.7778% { transform: translate(0px, 32.000px); }
1017
+ 98.2222% { transform: translate(0px, 32.000px); }
1018
+ 98.6667% { transform: translate(0px, 32.000px); }
1019
+ 99.1111% { transform: translate(0px, 32.000px); }
1020
+ 99.5556% { transform: translate(0px, 32.000px); }
1021
+ 100% { transform: translate(0px, 32.000px); }
1022
+ }
121
1023
  </style>
122
1024
  </head>
123
1025
  <body>
@@ -205,6 +1107,16 @@ svg {
205
1107
  </g>
206
1108
  </g>
207
1109
  </g>
1110
+ <g class="scrollbar-first-run" fill="none">
1111
+ <g class="scrollbar" fill="none">
1112
+ <g transform="translate(56.8 18) scale(0.52)" fill="none">
1113
+ <path d="M4 58.125C4 59.1605 3.10468 60 2.00025 60C0.895815 60 0.000495434 59.1605 0.000495434 58.125L0.000495434 1.875C0.000495434 0.839466 0.895815 0 2.00025 0C3.10468 0 4 0.839466 4 1.875L4 58.125Z" fill="var(--scrollbar-track)" />
1114
+ <g class="scrollbar-thumb">
1115
+ <path d="M2 8.48438L2 17.4572" fill="none" stroke="var(--color-2)" stroke-width="4" stroke-linecap="round" />
1116
+ </g>
1117
+ </g>
1118
+ </g>
1119
+ </g>
208
1120
  </svg>
209
1121
  </body>
210
1122
  </html>