@neurodyn/model-viewer 0.0.15 → 0.1.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.
@@ -1,4 +1,4 @@
1
- import { ModelViewer, ModelViewerDialog } from "@neurodyn/react-model-viewer";
1
+ import { ModelViewer, ModelViewerDialog, isIOSDevice, isMobileArDevice, withinTapWindow } from "@neurodyn/react-model-viewer";
2
2
  import { createElement } from "react";
3
3
  import { createRoot } from "react-dom/client";
4
4
  const DIALOG_ROOT_ID_PREFIX = 'neurodyn-model-viewer-dialog-root';
@@ -121,8 +121,76 @@ const modelViewerContract = defineTriggerContract()({
121
121
  function readTriggerProps(trigger, props = {}) {
122
122
  return readTriggerAttributes(trigger, modelViewerContract, props);
123
123
  }
124
+ const web_ar_renderer_DIALOG_ROOT_ID_PREFIX = 'neurodyn-model-viewer-web-ar-root';
125
+ let web_ar_renderer_nextContainerId = 0;
126
+ class WebArRenderer {
127
+ container = null;
128
+ destroyed = false;
129
+ dialog = null;
130
+ props = null;
131
+ root = null;
132
+ openState = false;
133
+ launchAr = isMobileArDevice() && !isIOSDevice() ? async (target)=>{
134
+ const dialog = await withinTapWindow(loadArDialog(target.tinuuid)).catch(()=>null);
135
+ if (!dialog || this.destroyed) return false;
136
+ this.dialog = dialog;
137
+ this.open(toDialogProps(target));
138
+ return true;
139
+ } : void 0;
140
+ destroy() {
141
+ this.destroyed = true;
142
+ this.root?.unmount();
143
+ this.root = null;
144
+ this.container?.remove();
145
+ this.container = null;
146
+ this.dialog = null;
147
+ this.props = null;
148
+ this.openState = false;
149
+ }
150
+ open(props) {
151
+ this.props = props;
152
+ this.openState = true;
153
+ this.render();
154
+ }
155
+ handleOpenChange = (open)=>{
156
+ this.openState = open;
157
+ this.render();
158
+ };
159
+ ensureRoot() {
160
+ if (this.root) return this.root;
161
+ this.container = document.createElement('div');
162
+ this.container.id = `${web_ar_renderer_DIALOG_ROOT_ID_PREFIX}-${web_ar_renderer_nextContainerId++}`;
163
+ document.body.appendChild(this.container);
164
+ this.root = createRoot(this.container);
165
+ return this.root;
166
+ }
167
+ render() {
168
+ if (!this.props || !this.dialog) return;
169
+ this.ensureRoot().render(createElement(this.dialog, {
170
+ ...this.props,
171
+ onOpenChange: this.handleOpenChange,
172
+ open: this.openState
173
+ }));
174
+ }
175
+ }
176
+ async function loadArDialog(tinuuid) {
177
+ const { ArDialog: dialog, prepareArSessionInPage } = await import("@neurodyn/react-ar");
178
+ return await prepareArSessionInPage(tinuuid) ? dialog : null;
179
+ }
180
+ function toDialogProps(target) {
181
+ return {
182
+ apiBaseUrl: target.apiBaseUrl,
183
+ apiKey: target.apiKey,
184
+ hid: target.hid,
185
+ initialWidgetSessionToken: target.widgetSessionToken,
186
+ language: target.lang,
187
+ name: target.name,
188
+ tinuuid: target.tinuuid
189
+ };
190
+ }
124
191
  class src_ModelViewer {
125
192
  roots = [];
193
+ webAr = new WebArRenderer();
126
194
  destroyed = false;
127
195
  constructor(target, props = {}){
128
196
  for (const element of resolveTargets(target)){
@@ -132,6 +200,7 @@ class src_ModelViewer {
132
200
  root.render(createElement(ModelViewer, {
133
201
  apiKey: viewerProps.apiKey ?? '',
134
202
  hid: viewerProps.hid,
203
+ launchAr: this.webAr.launchAr,
135
204
  tinuuid: viewerProps.tinuuid
136
205
  }));
137
206
  this.roots.push(root);
@@ -142,10 +211,12 @@ class src_ModelViewer {
142
211
  this.destroyed = true;
143
212
  for (const root of this.roots)root.unmount();
144
213
  this.roots.length = 0;
214
+ this.webAr.destroy();
145
215
  }
146
216
  }
147
217
  class src_ModelViewerDialog {
148
218
  renderer = new ModelViewerDialogRenderer();
219
+ webAr = new WebArRenderer();
149
220
  triggers;
150
221
  props;
151
222
  destroyed = false;
@@ -159,6 +230,7 @@ class src_ModelViewerDialog {
159
230
  this.destroyed = true;
160
231
  for (const trigger of this.triggers)trigger.removeEventListener('click', this.handleClick);
161
232
  this.renderer.destroy();
233
+ this.webAr.destroy();
162
234
  }
163
235
  handleClick = (event)=>{
164
236
  if (this.destroyed || !(event.currentTarget instanceof Element)) return;
@@ -167,6 +239,7 @@ class src_ModelViewerDialog {
167
239
  this.renderer.open({
168
240
  apiKey: props.apiKey ?? '',
169
241
  hid: props.hid,
242
+ launchAr: this.webAr.launchAr,
170
243
  tinuuid: props.tinuuid
171
244
  });
172
245
  };
@@ -0,0 +1,139 @@
1
+ <svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264" aria-hidden="true" xmlns:c2pa="http://c2pa.org/manifest">
2
+ <style>
3
+ .camera-intro__k,.camera-intro__move,.camera-intro__drop,.camera-intro__finger{transform-box:view-box;transform-origin:0 0;animation-duration:10.6s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both}
4
+ .camera-intro__move{transform-origin:132px 196px;animation-name:camera-intro-move}
5
+ .camera-intro__drop{transform-origin:132px 196px;animation-name:camera-intro-drop}
6
+ .camera-intro__stand{transform-box:fill-box;transform-origin:center}
7
+ .camera-intro__finger{animation-name:camera-intro-finger}
8
+ .camera-intro__ring{transform-box:fill-box;transform-origin:center;animation:camera-intro-ring 10.6s infinite both}
9
+ @keyframes camera-intro-drop{0%,28.30%{opacity:0;transform:translateY(-14px) scale(.92);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}33.02%,100%{opacity:1;transform:none}}
10
+ .camera-intro__top{animation-name:camera-intro-top}@keyframes camera-intro-top{0%,39.15%{transform:translate(113.63px,177.63px) rotate(8.79deg) skewX(-16.1deg) scale(29.32,-17.72)}39.82%{transform:translate(113.61px,177.61px) rotate(8.86deg) skewX(-16.21deg) scale(29.31,-17.73)}40.50%{transform:translate(113.54px,177.54px) rotate(9.1deg) skewX(-16.56deg) scale(29.28,-17.75)}41.17%{transform:translate(113.4px,177.39px) rotate(9.57deg) skewX(-17.26deg) scale(29.2,-17.79)}41.85%{transform:translate(113.17px,177.14px) rotate(10.38deg) skewX(-18.42deg) scale(29.07,-17.87)}42.52%{transform:translate(112.8px,176.71px) rotate(11.77deg) skewX(-20.24deg) scale(28.82,-18.03)}43.19%{transform:translate(112.24px,175.96px) rotate(14.22deg) skewX(-23.02deg) scale(28.34,-18.34)}43.87%{transform:translate(111.51px,174.67px) rotate(18.43deg) skewX(-26.57deg) scale(27.39,-18.97)}44.54%{transform:translate(111.03px,173.36px) rotate(22.99deg) skewX(-28.85deg) scale(26.26,-19.79)}45.22%{transform:translate(110.86px,172.54px) rotate(25.97deg) skewX(-29.64deg) scale(25.51,-20.37)}45.89%{transform:translate(110.81px,172.06px) rotate(27.79deg) skewX(-29.9deg) scale(25.05,-20.75)}46.56%{transform:translate(110.79px,171.78px) rotate(28.91deg) skewX(-29.98deg) scale(24.77,-20.98)}47.24%{transform:translate(110.79px,171.61px) rotate(29.57deg) skewX(-30deg) scale(24.6,-21.12)}47.91%{transform:translate(110.79px,171.53px) rotate(29.9deg) skewX(-30deg) scale(24.52,-21.19)}48.58%,100%{transform:translate(110.79px,171.51px) rotate(30deg) skewX(-30deg) scale(24.49,-21.21)}}
11
+ .camera-intro__front{animation-name:camera-intro-front}@keyframes camera-intro-front{0%,39.15%{transform:translate(113.63px,202.12px) rotate(8.79deg) skewX(8.79deg) scale(29.32,-24.21)}39.82%{transform:translate(113.61px,202.1px) rotate(8.86deg) skewX(8.86deg) scale(29.31,-24.2)}40.50%{transform:translate(113.54px,202.03px) rotate(9.1deg) skewX(9.1deg) scale(29.28,-24.19)}41.17%{transform:translate(113.4px,201.89px) rotate(9.57deg) skewX(9.57deg) scale(29.2,-24.15)}41.85%{transform:translate(113.17px,201.63px) rotate(10.38deg) skewX(10.38deg) scale(29.07,-24.09)}42.52%{transform:translate(112.8px,201.21px) rotate(11.77deg) skewX(11.77deg) scale(28.82,-23.98)}43.19%{transform:translate(112.24px,200.45px) rotate(14.22deg) skewX(14.22deg) scale(28.34,-23.74)}43.87%{transform:translate(111.51px,199.17px) rotate(18.43deg) skewX(18.43deg) scale(27.39,-23.24)}44.54%{transform:translate(111.03px,197.85px) rotate(22.99deg) skewX(22.99deg) scale(26.26,-22.55)}45.22%{transform:translate(110.86px,197.03px) rotate(25.97deg) skewX(25.97deg) scale(25.51,-22.02)}45.89%{transform:translate(110.81px,196.56px) rotate(27.79deg) skewX(27.79deg) scale(25.05,-21.67)}46.56%{transform:translate(110.79px,196.27px) rotate(28.91deg) skewX(28.91deg) scale(24.77,-21.44)}47.24%{transform:translate(110.79px,196.11px) rotate(29.57deg) skewX(29.57deg) scale(24.6,-21.31)}47.91%{transform:translate(110.79px,196.02px) rotate(29.9deg) skewX(29.9deg) scale(24.52,-21.23)}48.58%,100%{transform:translate(110.79px,196px) rotate(30deg) skewX(30deg) scale(24.49,-21.21)}}
12
+ .camera-intro__right{animation-name:camera-intro-right}@keyframes camera-intro-right{0%,39.15%{transform:translate(142.61px,206.61px) rotate(-65.1deg) skewX(-65.1deg) scale(18.44,-10.31)}39.82%{transform:translate(142.57px,206.62px) rotate(-64.93deg) skewX(-64.93deg) scale(18.46,-10.38)}40.50%{transform:translate(142.44px,206.66px) rotate(-64.34deg) skewX(-64.34deg) scale(18.52,-10.61)}41.17%{transform:translate(142.2px,206.74px) rotate(-63.17deg) skewX(-63.17deg) scale(18.63,-11.05)}41.85%{transform:translate(141.76px,206.87px) rotate(-61.2deg) skewX(-61.2deg) scale(18.84,-11.8)}42.52%{transform:translate(141.02px,207.09px) rotate(-57.99deg) skewX(-57.99deg) scale(19.21,-12.99)}43.19%{transform:translate(139.71px,207.41px) rotate(-52.76deg) skewX(-52.76deg) scale(19.92,-14.82)}43.87%{transform:translate(137.49px,207.83px) rotate(-45deg) skewX(-45deg) scale(21.21,-17.32)}44.54%{transform:translate(135.21px,208.11px) rotate(-38.16deg) skewX(-38.16deg) scale(22.59,-19.26)}45.22%{transform:translate(133.79px,208.2px) rotate(-34.39deg) skewX(-34.39deg) scale(23.44,-20.21)}45.89%{transform:translate(132.97px,208.23px) rotate(-32.31deg) skewX(-32.31deg) scale(23.93,-20.7)}46.56%{transform:translate(132.47px,208.24px) rotate(-31.12deg) skewX(-31.12deg) scale(24.22,-20.97)}47.24%{transform:translate(132.19px,208.25px) rotate(-30.44deg) skewX(-30.44deg) scale(24.39,-21.12)}47.91%{transform:translate(132.04px,208.25px) rotate(-30.1deg) skewX(-30.1deg) scale(24.47,-21.19)}48.58%,100%{transform:translate(132px,208.25px) rotate(-30deg) skewX(-30deg) scale(24.49,-21.21)}}
13
+ .camera-intro__e0{animation-name:camera-intro-e0}@keyframes camera-intro-e0{0%,39.15%{transform:translate(121.39px,160.9px) rotate(8.79deg) scaleX(29.32)}39.82%{transform:translate(121.43px,160.89px) rotate(8.86deg) scaleX(29.31)}40.50%{transform:translate(121.56px,160.85px) rotate(9.1deg) scaleX(29.28)}41.17%{transform:translate(121.8px,160.76px) rotate(9.57deg) scaleX(29.2)}41.85%{transform:translate(122.24px,160.63px) rotate(10.38deg) scaleX(29.07)}42.52%{transform:translate(122.98px,160.42px) rotate(11.77deg) scaleX(28.82)}43.19%{transform:translate(124.29px,160.09px) rotate(14.22deg) scaleX(28.34)}43.87%{transform:translate(126.51px,159.67px) rotate(18.43deg) scaleX(27.39)}44.54%{transform:translate(128.79px,159.4px) rotate(22.99deg) scaleX(26.26)}45.22%{transform:translate(130.21px,159.3px) rotate(25.97deg) scaleX(25.51)}45.89%{transform:translate(131.03px,159.27px) rotate(27.79deg) scaleX(25.05)}46.56%{transform:translate(131.53px,159.26px) rotate(28.91deg) scaleX(24.77)}47.24%{transform:translate(131.81px,159.26px) rotate(29.57deg) scaleX(24.6)}47.91%{transform:translate(131.96px,159.26px) rotate(29.9deg) scaleX(24.52)}48.58%,100%{transform:translate(132px,159.26px) rotate(30deg) scaleX(24.49)}}
14
+ .camera-intro__e1{animation-name:camera-intro-e1}@keyframes camera-intro-e1{0%,39.15%{transform:translate(150.37px,165.38px) rotate(114.9deg) scaleX(18.44)}39.82%{transform:translate(150.39px,165.4px) rotate(115.07deg) scaleX(18.46)}40.50%{transform:translate(150.46px,165.47px) rotate(115.66deg) scaleX(18.52)}41.17%{transform:translate(150.6px,165.62px) rotate(116.83deg) scaleX(18.63)}41.85%{transform:translate(150.83px,165.87px) rotate(118.8deg) scaleX(18.84)}42.52%{transform:translate(151.2px,166.3px) rotate(122.01deg) scaleX(19.21)}43.19%{transform:translate(151.76px,167.06px) rotate(127.24deg) scaleX(19.92)}43.87%{transform:translate(152.49px,168.34px) rotate(135deg) scaleX(21.21)}44.54%{transform:translate(152.97px,169.65px) rotate(141.84deg) scaleX(22.59)}45.22%{transform:translate(153.14px,170.47px) rotate(145.61deg) scaleX(23.44)}45.89%{transform:translate(153.19px,170.95px) rotate(147.69deg) scaleX(23.93)}46.56%{transform:translate(153.21px,171.23px) rotate(148.88deg) scaleX(24.22)}47.24%{transform:translate(153.21px,171.4px) rotate(149.56deg) scaleX(24.39)}47.91%{transform:translate(153.21px,171.48px) rotate(149.9deg) scaleX(24.47)}48.58%,100%{transform:translate(153.21px,171.51px) rotate(150deg) scaleX(24.49)}}
15
+ .camera-intro__e2{animation-name:camera-intro-e2}@keyframes camera-intro-e2{0%,39.15%{transform:translate(142.61px,182.11px) rotate(-171.21deg) scaleX(29.32)}39.82%{transform:translate(142.57px,182.12px) rotate(-171.14deg) scaleX(29.31)}40.50%{transform:translate(142.44px,182.17px) rotate(-170.9deg) scaleX(29.28)}41.17%{transform:translate(142.2px,182.25px) rotate(-170.43deg) scaleX(29.2)}41.85%{transform:translate(141.76px,182.38px) rotate(-169.62deg) scaleX(29.07)}42.52%{transform:translate(141.02px,182.59px) rotate(-168.23deg) scaleX(28.82)}43.19%{transform:translate(139.71px,182.92px) rotate(-165.78deg) scaleX(28.34)}43.87%{transform:translate(137.49px,183.34px) rotate(-161.57deg) scaleX(27.39)}44.54%{transform:translate(135.21px,183.61px) rotate(-157.01deg) scaleX(26.26)}45.22%{transform:translate(133.79px,183.71px) rotate(-154.03deg) scaleX(25.51)}45.89%{transform:translate(132.97px,183.74px) rotate(-152.21deg) scaleX(25.05)}46.56%{transform:translate(132.47px,183.75px) rotate(-151.09deg) scaleX(24.77)}47.24%{transform:translate(132.19px,183.75px) rotate(-150.43deg) scaleX(24.6)}47.91%{transform:translate(132.04px,183.75px) rotate(-150.1deg) scaleX(24.52)}48.58%,100%{transform:translate(132px,183.75px) rotate(-150deg) scaleX(24.49)}}
16
+ .camera-intro__e3{animation-name:camera-intro-e3}@keyframes camera-intro-e3{0%,39.15%{transform:translate(113.63px,177.63px) rotate(-65.1deg) scaleX(18.44)}39.82%{transform:translate(113.61px,177.61px) rotate(-64.93deg) scaleX(18.46)}40.50%{transform:translate(113.54px,177.54px) rotate(-64.34deg) scaleX(18.52)}41.17%{transform:translate(113.4px,177.39px) rotate(-63.17deg) scaleX(18.63)}41.85%{transform:translate(113.17px,177.14px) rotate(-61.2deg) scaleX(18.84)}42.52%{transform:translate(112.8px,176.71px) rotate(-57.99deg) scaleX(19.21)}43.19%{transform:translate(112.24px,175.96px) rotate(-52.76deg) scaleX(19.92)}43.87%{transform:translate(111.51px,174.67px) rotate(-45deg) scaleX(21.21)}44.54%{transform:translate(111.03px,173.36px) rotate(-38.16deg) scaleX(22.59)}45.22%{transform:translate(110.86px,172.54px) rotate(-34.39deg) scaleX(23.44)}45.89%{transform:translate(110.81px,172.06px) rotate(-32.31deg) scaleX(23.93)}46.56%{transform:translate(110.79px,171.78px) rotate(-31.12deg) scaleX(24.22)}47.24%{transform:translate(110.79px,171.61px) rotate(-30.44deg) scaleX(24.39)}47.91%{transform:translate(110.79px,171.53px) rotate(-30.1deg) scaleX(24.47)}48.58%,100%{transform:translate(110.79px,171.51px) rotate(-30deg) scaleX(24.49)}}
17
+ .camera-intro__e4{animation-name:camera-intro-e4}@keyframes camera-intro-e4{0%,39.15%{transform:translate(113.63px,177.63px) rotate(90deg) scaleX(24.49)}39.82%{transform:translate(113.61px,177.61px) rotate(90deg) scaleX(24.49)}40.50%{transform:translate(113.54px,177.54px) rotate(90deg) scaleX(24.49)}41.17%{transform:translate(113.4px,177.39px) rotate(90deg) scaleX(24.49)}41.85%{transform:translate(113.17px,177.14px) rotate(90deg) scaleX(24.49)}42.52%{transform:translate(112.8px,176.71px) rotate(90deg) scaleX(24.49)}43.19%{transform:translate(112.24px,175.96px) rotate(90deg) scaleX(24.49)}43.87%{transform:translate(111.51px,174.67px) rotate(90deg) scaleX(24.49)}44.54%{transform:translate(111.03px,173.36px) rotate(90deg) scaleX(24.49)}45.22%{transform:translate(110.86px,172.54px) rotate(90deg) scaleX(24.49)}45.89%{transform:translate(110.81px,172.06px) rotate(90deg) scaleX(24.49)}46.56%{transform:translate(110.79px,171.78px) rotate(90deg) scaleX(24.49)}47.24%{transform:translate(110.79px,171.61px) rotate(90deg) scaleX(24.49)}47.91%{transform:translate(110.79px,171.53px) rotate(90deg) scaleX(24.49)}48.58%,100%{transform:translate(110.79px,171.51px) rotate(90deg) scaleX(24.49)}}
18
+ .camera-intro__e5{animation-name:camera-intro-e5}@keyframes camera-intro-e5{0%,39.15%{transform:translate(142.61px,182.11px) rotate(90deg) scaleX(24.49)}39.82%{transform:translate(142.57px,182.12px) rotate(90deg) scaleX(24.49)}40.50%{transform:translate(142.44px,182.17px) rotate(90deg) scaleX(24.49)}41.17%{transform:translate(142.2px,182.25px) rotate(90deg) scaleX(24.49)}41.85%{transform:translate(141.76px,182.38px) rotate(90deg) scaleX(24.49)}42.52%{transform:translate(141.02px,182.59px) rotate(90deg) scaleX(24.49)}43.19%{transform:translate(139.71px,182.92px) rotate(90deg) scaleX(24.49)}43.87%{transform:translate(137.49px,183.34px) rotate(90deg) scaleX(24.49)}44.54%{transform:translate(135.21px,183.61px) rotate(90deg) scaleX(24.49)}45.22%{transform:translate(133.79px,183.71px) rotate(90deg) scaleX(24.49)}45.89%{transform:translate(132.97px,183.74px) rotate(90deg) scaleX(24.49)}46.56%{transform:translate(132.47px,183.75px) rotate(90deg) scaleX(24.49)}47.24%{transform:translate(132.19px,183.75px) rotate(90deg) scaleX(24.49)}47.91%{transform:translate(132.04px,183.75px) rotate(90deg) scaleX(24.49)}48.58%,100%{transform:translate(132px,183.75px) rotate(90deg) scaleX(24.49)}}
19
+ .camera-intro__e6{animation-name:camera-intro-e6}@keyframes camera-intro-e6{0%,39.15%{transform:translate(150.37px,165.38px) rotate(90deg) scaleX(24.49)}39.82%{transform:translate(150.39px,165.4px) rotate(90deg) scaleX(24.49)}40.50%{transform:translate(150.46px,165.47px) rotate(90deg) scaleX(24.49)}41.17%{transform:translate(150.6px,165.62px) rotate(90deg) scaleX(24.49)}41.85%{transform:translate(150.83px,165.87px) rotate(90deg) scaleX(24.49)}42.52%{transform:translate(151.2px,166.3px) rotate(90deg) scaleX(24.49)}43.19%{transform:translate(151.76px,167.06px) rotate(90deg) scaleX(24.49)}43.87%{transform:translate(152.49px,168.34px) rotate(90deg) scaleX(24.49)}44.54%{transform:translate(152.97px,169.65px) rotate(90deg) scaleX(24.49)}45.22%{transform:translate(153.14px,170.47px) rotate(90deg) scaleX(24.49)}45.89%{transform:translate(153.19px,170.95px) rotate(90deg) scaleX(24.49)}46.56%{transform:translate(153.21px,171.23px) rotate(90deg) scaleX(24.49)}47.24%{transform:translate(153.21px,171.4px) rotate(90deg) scaleX(24.49)}47.91%{transform:translate(153.21px,171.48px) rotate(90deg) scaleX(24.49)}48.58%,100%{transform:translate(153.21px,171.51px) rotate(90deg) scaleX(24.49)}}
20
+ .camera-intro__e7{animation-name:camera-intro-e7}@keyframes camera-intro-e7{0%,39.15%{transform:translate(113.63px,202.12px) rotate(8.79deg) scaleX(29.32)}39.82%{transform:translate(113.61px,202.1px) rotate(8.86deg) scaleX(29.31)}40.50%{transform:translate(113.54px,202.03px) rotate(9.1deg) scaleX(29.28)}41.17%{transform:translate(113.4px,201.89px) rotate(9.57deg) scaleX(29.2)}41.85%{transform:translate(113.17px,201.63px) rotate(10.38deg) scaleX(29.07)}42.52%{transform:translate(112.8px,201.21px) rotate(11.77deg) scaleX(28.82)}43.19%{transform:translate(112.24px,200.45px) rotate(14.22deg) scaleX(28.34)}43.87%{transform:translate(111.51px,199.17px) rotate(18.43deg) scaleX(27.39)}44.54%{transform:translate(111.03px,197.85px) rotate(22.99deg) scaleX(26.26)}45.22%{transform:translate(110.86px,197.03px) rotate(25.97deg) scaleX(25.51)}45.89%{transform:translate(110.81px,196.56px) rotate(27.79deg) scaleX(25.05)}46.56%{transform:translate(110.79px,196.27px) rotate(28.91deg) scaleX(24.77)}47.24%{transform:translate(110.79px,196.11px) rotate(29.57deg) scaleX(24.6)}47.91%{transform:translate(110.79px,196.02px) rotate(29.9deg) scaleX(24.52)}48.58%,100%{transform:translate(110.79px,196px) rotate(30deg) scaleX(24.49)}}
21
+ .camera-intro__e8{animation-name:camera-intro-e8}@keyframes camera-intro-e8{0%,39.15%{transform:translate(142.61px,206.61px) rotate(-65.1deg) scaleX(18.44)}39.82%{transform:translate(142.57px,206.62px) rotate(-64.93deg) scaleX(18.46)}40.50%{transform:translate(142.44px,206.66px) rotate(-64.34deg) scaleX(18.52)}41.17%{transform:translate(142.2px,206.74px) rotate(-63.17deg) scaleX(18.63)}41.85%{transform:translate(141.76px,206.87px) rotate(-61.2deg) scaleX(18.84)}42.52%{transform:translate(141.02px,207.09px) rotate(-57.99deg) scaleX(19.21)}43.19%{transform:translate(139.71px,207.41px) rotate(-52.76deg) scaleX(19.92)}43.87%{transform:translate(137.49px,207.83px) rotate(-45deg) scaleX(21.21)}44.54%{transform:translate(135.21px,208.11px) rotate(-38.16deg) scaleX(22.59)}45.22%{transform:translate(133.79px,208.2px) rotate(-34.39deg) scaleX(23.44)}45.89%{transform:translate(132.97px,208.23px) rotate(-32.31deg) scaleX(23.93)}46.56%{transform:translate(132.47px,208.24px) rotate(-31.12deg) scaleX(24.22)}47.24%{transform:translate(132.19px,208.25px) rotate(-30.44deg) scaleX(24.39)}47.91%{transform:translate(132.04px,208.25px) rotate(-30.1deg) scaleX(24.47)}48.58%,100%{transform:translate(132px,208.25px) rotate(-30deg) scaleX(24.49)}}
22
+ .camera-intro__vTbl{animation-name:camera-intro-vTbl}@keyframes camera-intro-vTbl{0%,39.15%{transform:translate(121.39px,160.9px)}39.82%{transform:translate(121.43px,160.89px)}40.50%{transform:translate(121.56px,160.85px)}41.17%{transform:translate(121.8px,160.76px)}41.85%{transform:translate(122.24px,160.63px)}42.52%{transform:translate(122.98px,160.42px)}43.19%{transform:translate(124.29px,160.09px)}43.87%{transform:translate(126.51px,159.67px)}44.54%{transform:translate(128.79px,159.4px)}45.22%{transform:translate(130.21px,159.3px)}45.89%{transform:translate(131.03px,159.27px)}46.56%{transform:translate(131.53px,159.26px)}47.24%{transform:translate(131.81px,159.26px)}47.91%{transform:translate(131.96px,159.26px)}48.58%,100%{transform:translate(132px,159.26px)}}
23
+ .camera-intro__vTbr{animation-name:camera-intro-vTbr}@keyframes camera-intro-vTbr{0%,39.15%{transform:translate(150.37px,165.38px)}39.82%{transform:translate(150.39px,165.4px)}40.50%{transform:translate(150.46px,165.47px)}41.17%{transform:translate(150.6px,165.62px)}41.85%{transform:translate(150.83px,165.87px)}42.52%{transform:translate(151.2px,166.3px)}43.19%{transform:translate(151.76px,167.06px)}43.87%{transform:translate(152.49px,168.34px)}44.54%{transform:translate(152.97px,169.65px)}45.22%{transform:translate(153.14px,170.47px)}45.89%{transform:translate(153.19px,170.95px)}46.56%{transform:translate(153.21px,171.23px)}47.24%{transform:translate(153.21px,171.4px)}47.91%{transform:translate(153.21px,171.48px)}48.58%,100%{transform:translate(153.21px,171.51px)}}
24
+ .camera-intro__vTfl{animation-name:camera-intro-vTfl}@keyframes camera-intro-vTfl{0%,39.15%{transform:translate(113.63px,177.63px)}39.82%{transform:translate(113.61px,177.61px)}40.50%{transform:translate(113.54px,177.54px)}41.17%{transform:translate(113.4px,177.39px)}41.85%{transform:translate(113.17px,177.14px)}42.52%{transform:translate(112.8px,176.71px)}43.19%{transform:translate(112.24px,175.96px)}43.87%{transform:translate(111.51px,174.67px)}44.54%{transform:translate(111.03px,173.36px)}45.22%{transform:translate(110.86px,172.54px)}45.89%{transform:translate(110.81px,172.06px)}46.56%{transform:translate(110.79px,171.78px)}47.24%{transform:translate(110.79px,171.61px)}47.91%{transform:translate(110.79px,171.53px)}48.58%,100%{transform:translate(110.79px,171.51px)}}
25
+ .camera-intro__vTfr{animation-name:camera-intro-vTfr}@keyframes camera-intro-vTfr{0%,39.15%{transform:translate(142.61px,182.11px)}39.82%{transform:translate(142.57px,182.12px)}40.50%{transform:translate(142.44px,182.17px)}41.17%{transform:translate(142.2px,182.25px)}41.85%{transform:translate(141.76px,182.38px)}42.52%{transform:translate(141.02px,182.59px)}43.19%{transform:translate(139.71px,182.92px)}43.87%{transform:translate(137.49px,183.34px)}44.54%{transform:translate(135.21px,183.61px)}45.22%{transform:translate(133.79px,183.71px)}45.89%{transform:translate(132.97px,183.74px)}46.56%{transform:translate(132.47px,183.75px)}47.24%{transform:translate(132.19px,183.75px)}47.91%{transform:translate(132.04px,183.75px)}48.58%,100%{transform:translate(132px,183.75px)}}
26
+ .camera-intro__vBfl{animation-name:camera-intro-vBfl}@keyframes camera-intro-vBfl{0%,39.15%{transform:translate(113.63px,202.12px)}39.82%{transform:translate(113.61px,202.1px)}40.50%{transform:translate(113.54px,202.03px)}41.17%{transform:translate(113.4px,201.89px)}41.85%{transform:translate(113.17px,201.63px)}42.52%{transform:translate(112.8px,201.21px)}43.19%{transform:translate(112.24px,200.45px)}43.87%{transform:translate(111.51px,199.17px)}44.54%{transform:translate(111.03px,197.85px)}45.22%{transform:translate(110.86px,197.03px)}45.89%{transform:translate(110.81px,196.56px)}46.56%{transform:translate(110.79px,196.27px)}47.24%{transform:translate(110.79px,196.11px)}47.91%{transform:translate(110.79px,196.02px)}48.58%,100%{transform:translate(110.79px,196px)}}
27
+ .camera-intro__vBfr{animation-name:camera-intro-vBfr}@keyframes camera-intro-vBfr{0%,39.15%{transform:translate(142.61px,206.61px)}39.82%{transform:translate(142.57px,206.62px)}40.50%{transform:translate(142.44px,206.66px)}41.17%{transform:translate(142.2px,206.74px)}41.85%{transform:translate(141.76px,206.87px)}42.52%{transform:translate(141.02px,207.09px)}43.19%{transform:translate(139.71px,207.41px)}43.87%{transform:translate(137.49px,207.83px)}44.54%{transform:translate(135.21px,208.11px)}45.22%{transform:translate(133.79px,208.2px)}45.89%{transform:translate(132.97px,208.23px)}46.56%{transform:translate(132.47px,208.24px)}47.24%{transform:translate(132.19px,208.25px)}47.91%{transform:translate(132.04px,208.25px)}48.58%,100%{transform:translate(132px,208.25px)}}
28
+ .camera-intro__vBbr{animation-name:camera-intro-vBbr}@keyframes camera-intro-vBbr{0%,39.15%{transform:translate(150.37px,189.88px)}39.82%{transform:translate(150.39px,189.9px)}40.50%{transform:translate(150.46px,189.97px)}41.17%{transform:translate(150.6px,190.11px)}41.85%{transform:translate(150.83px,190.37px)}42.52%{transform:translate(151.2px,190.79px)}43.19%{transform:translate(151.76px,191.55px)}43.87%{transform:translate(152.49px,192.83px)}44.54%{transform:translate(152.97px,194.15px)}45.22%{transform:translate(153.14px,194.97px)}45.89%{transform:translate(153.19px,195.44px)}46.56%{transform:translate(153.21px,195.73px)}47.24%{transform:translate(153.21px,195.89px)}47.91%{transform:translate(153.21px,195.98px)}48.58%,100%{transform:translate(153.21px,196px)}}
29
+ @keyframes camera-intro-move{0%,55.66%{transform:none;animation-timing-function:cubic-bezier(.7,0,.3,1)}65.09%,100%{transform:translate(0px,-53.59px) scale(0.85)}}
30
+ @keyframes camera-intro-finger{0%,36.79%{opacity:0;transform:translate(150px,230px);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}39.15%{opacity:1;transform:translate(150px,224px);animation-timing-function:cubic-bezier(.7,0,.3,1)}48.58%{opacity:1;transform:translate(114px,224px);animation-timing-function:cubic-bezier(.5,0,.75,0)}51.42%{opacity:0;transform:translate(114px,230px)}53.30%{opacity:0;transform:translate(132px,189.75px);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}55.66%{opacity:1;transform:translate(132px,183.75px);animation-timing-function:cubic-bezier(.7,0,.3,1)}65.09%{opacity:1;transform:translate(132px,132px);animation-timing-function:cubic-bezier(.5,0,.75,0)}67.92%,100%{opacity:0;transform:translate(132px,138px)}}
31
+ @keyframes camera-intro-ring{0%,36.79%{transform:scale(.4);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}39.15%,48.58%{transform:scale(1);animation-timing-function:ease-out}51.42%{transform:scale(1.6)}53.30%{transform:scale(.4);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}55.66%,65.09%{transform:scale(1);animation-timing-function:ease-out}67.92%,100%{transform:scale(1.6)}}
32
+ .camera-intro__pan{transform-box:view-box;animation:camera-intro-pan 10.6s infinite both}
33
+ @keyframes camera-intro-pan{0%,7.55%{transform:translate(0,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}12.26%{transform:translate(0,-16px);animation-timing-function:cubic-bezier(.45,0,.55,1)}17.45%{transform:translate(-10px,-16px);animation-timing-function:cubic-bezier(.45,0,.55,1)}23.11%{transform:translate(10px,-16px);animation-timing-function:cubic-bezier(.45,0,.55,1)}27.36%,100%{transform:translate(0,0)}}
34
+ .camera-intro__d104{animation:camera-intro-d104 10.6s infinite both}@keyframes camera-intro-d104{0%,20.75%{opacity:0}22.17%,32.08%{opacity:1}36.79%,100%{opacity:0}}
35
+ .camera-intro__d112{animation:camera-intro-d112 10.6s infinite both}@keyframes camera-intro-d112{0%,19.81%{opacity:0}21.23%,32.08%{opacity:1}36.79%,100%{opacity:0}}
36
+ .camera-intro__d120{animation:camera-intro-d120 10.6s infinite both}@keyframes camera-intro-d120{0%,18.87%{opacity:0}20.28%,32.08%{opacity:1}36.79%,100%{opacity:0}}
37
+ .camera-intro__d128{animation:camera-intro-d128 10.6s infinite both}@keyframes camera-intro-d128{0%,17.92%{opacity:0}19.34%,32.08%{opacity:1}36.79%,100%{opacity:0}}
38
+ .camera-intro__d136{animation:camera-intro-d136 10.6s infinite both}@keyframes camera-intro-d136{0%,12.74%{opacity:0}14.15%,32.08%{opacity:1}36.79%,100%{opacity:0}}
39
+ .camera-intro__d144{animation:camera-intro-d144 10.6s infinite both}@keyframes camera-intro-d144{0%,13.68%{opacity:0}15.09%,32.08%{opacity:1}36.79%,100%{opacity:0}}
40
+ .camera-intro__d152{animation:camera-intro-d152 10.6s infinite both}@keyframes camera-intro-d152{0%,14.62%{opacity:0}16.04%,32.08%{opacity:1}36.79%,100%{opacity:0}}
41
+ .camera-intro__d160{animation:camera-intro-d160 10.6s infinite both}@keyframes camera-intro-d160{0%,15.57%{opacity:0}16.98%,32.08%{opacity:1}36.79%,100%{opacity:0}}
42
+
43
+ .camera-intro__bg{animation:camera-intro-bg 10.6s infinite both}
44
+ @keyframes camera-intro-bg{0%,59.43%{opacity:1}66.04%,100%{opacity:0}}
45
+ .camera-intro__stand{animation:camera-intro-standfade 10.6s infinite both}
46
+ @keyframes camera-intro-standfade{0%,30.19%{opacity:0;transform:scale(.6);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}33.96%,60.38%{opacity:1;transform:none}65.09%,100%{opacity:0;transform:none}}
47
+ .camera-intro__faces{animation:camera-intro-faces 10.6s infinite both}
48
+ @keyframes camera-intro-faces{0%,69.81%{opacity:1}73.11%,100%{opacity:0}}
49
+ .camera-intro__wire{animation:camera-intro-wire 10.6s infinite both}
50
+ @keyframes camera-intro-wire{0%,69.81%{opacity:1}69.91%,100%{opacity:0}}
51
+ .camera-intro__logo{animation:camera-intro-logo 10.6s infinite both}
52
+ @keyframes camera-intro-logo{0%,69.81%{opacity:0}69.91%,100%{opacity:1}}
53
+ .camera-intro__lw{animation:camera-intro-lw 10.6s infinite both}
54
+ @keyframes camera-intro-lw{0%,78.30%{stroke-width:1.7px;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}81.60%,100%{stroke-width:4.37px}}
55
+ .camera-intro__spin{transform-box:view-box;transform-origin:132px 132px;animation:camera-intro-spin 10.6s infinite both}
56
+ @keyframes camera-intro-spin{0%,71.70%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.5,0,.9,.6)}74.06%{transform:rotate(30deg) scale(.86);animation-timing-function:cubic-bezier(.2,.5,.4,1.25)}76.60%,100%{transform:rotate(60deg) scale(1)}}
57
+ .camera-intro__orbit{stroke-dasharray:1;transform-box:view-box;transform-origin:132px 132px;transform:rotate(-90deg);animation:camera-intro-orbit 10.6s infinite both}
58
+ @keyframes camera-intro-orbit{0%,72.55%{stroke-dashoffset:1;opacity:0}72.64%{stroke-dashoffset:1;opacity:1;animation-timing-function:cubic-bezier(.45,0,.3,1)}77.36%,78.77%{stroke-dashoffset:0;opacity:1}80.66%,100%{stroke-dashoffset:0;opacity:0}}
59
+ .camera-intro__disc{transform-box:view-box;transform-origin:132px 132px;animation:camera-intro-disc 10.6s infinite both}
60
+ @keyframes camera-intro-disc{0%,76.89%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}80.66%,100%{transform:none}}
61
+ .camera-intro__hub{transform-box:view-box;transform-origin:132px 132px;animation:camera-intro-hub 10.6s infinite both}
62
+ @keyframes camera-intro-hub{0%,79.72%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}83.02%,100%{transform:none}}
63
+ .camera-intro__all{animation:camera-intro-all 10.6s infinite both}
64
+ @keyframes camera-intro-all{0%,2.83%{opacity:0}7.55%,92.45%{opacity:1}97.17%,100%{opacity:0}}
65
+
66
+ @media (prefers-reduced-motion:reduce){
67
+ .camera-intro__k,.camera-intro__move,.camera-intro__drop,.camera-intro__finger,.camera-intro__stand,.camera-intro__ring,.camera-intro__bg,.camera-intro__all,.camera-intro__pan,.camera-intro__dot,.camera-intro__faces,.camera-intro__wire,.camera-intro__logo,.camera-intro__lw,.camera-intro__spin,.camera-intro__orbit,.camera-intro__disc,.camera-intro__hub{animation:none}
68
+ .camera-intro__bg,.camera-intro__all,.camera-intro__drop,.camera-intro__stand,.camera-intro__faces,.camera-intro__wire{opacity:1;transform:none}
69
+ .camera-intro__move,.camera-intro__pan{transform:none}
70
+ .camera-intro__finger,.camera-intro__dot,.camera-intro__logo,.camera-intro__disc,.camera-intro__orbit{opacity:0}
71
+ .camera-intro__top{transform:translate(110.79px,171.51px) rotate(30deg) skewX(-30deg) scale(24.49,-21.21)}
72
+ .camera-intro__front{transform:translate(110.79px,196px) rotate(30deg) skewX(30deg) scale(24.49,-21.21)}
73
+ .camera-intro__right{transform:translate(132px,208.25px) rotate(-30deg) skewX(-30deg) scale(24.49,-21.21)}
74
+ .camera-intro__e0{transform:translate(132px,159.26px) rotate(30deg) scaleX(24.49)}
75
+ .camera-intro__e1{transform:translate(153.21px,171.51px) rotate(150deg) scaleX(24.49)}
76
+ .camera-intro__e2{transform:translate(132px,183.75px) rotate(-150deg) scaleX(24.49)}
77
+ .camera-intro__e3{transform:translate(110.79px,171.51px) rotate(-30deg) scaleX(24.49)}
78
+ .camera-intro__e4{transform:translate(110.79px,171.51px) rotate(90deg) scaleX(24.49)}
79
+ .camera-intro__e5{transform:translate(132px,183.75px) rotate(90deg) scaleX(24.49)}
80
+ .camera-intro__e6{transform:translate(153.21px,171.51px) rotate(90deg) scaleX(24.49)}
81
+ .camera-intro__e7{transform:translate(110.79px,196px) rotate(30deg) scaleX(24.49)}
82
+ .camera-intro__e8{transform:translate(132px,208.25px) rotate(-30deg) scaleX(24.49)}
83
+ .camera-intro__vTbl{transform:translate(132px,159.26px)}
84
+ .camera-intro__vTbr{transform:translate(153.21px,171.51px)}
85
+ .camera-intro__vTfl{transform:translate(110.79px,171.51px)}
86
+ .camera-intro__vTfr{transform:translate(132px,183.75px)}
87
+ .camera-intro__vBfl{transform:translate(110.79px,196px)}
88
+ .camera-intro__vBfr{transform:translate(132px,208.25px)}
89
+ .camera-intro__vBbr{transform:translate(153.21px,196px)}
90
+ }
91
+ </style>
92
+ <defs>
93
+ <clipPath id="camera-intro-scr"><rect x="87" y="31" width="90" height="202" rx="13"/></clipPath>
94
+ <linearGradient id="camera-intro-gw" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#4B4D58"/><stop offset="1" stop-color="#3B3C45"/></linearGradient>
95
+ <linearGradient id="camera-intro-gfl" x1="0" y1="150" x2="0" y2="233" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#34353D"/><stop offset="1" stop-color="#1F2025"/></linearGradient>
96
+ <linearGradient id="camera-intro-gc" x1="0" y1="31" x2="0" y2="92" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#202127"/><stop offset="1" stop-color="#33343C"/></linearGradient>
97
+ <linearGradient id="camera-intro-gl" x1="87" y1="0" x2="177" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#26272D"/><stop offset=".2" stop-color="#35363E" stop-opacity="0"/><stop offset=".8" stop-color="#35363E" stop-opacity="0"/><stop offset="1" stop-color="#26272D"/></linearGradient>
98
+ <linearGradient id="camera-intro-gwin" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#8A8EA0"/><stop offset="1" stop-color="#666979"/></linearGradient>
99
+ <linearGradient id="camera-intro-glt" x1="0" y1="150" x2="0" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>
100
+ <linearGradient id="camera-intro-gt" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7A7B86"/><stop offset="1" stop-color="#666772"/></linearGradient>
101
+ <linearGradient id="camera-intro-gf" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#55565F"/><stop offset="1" stop-color="#43444C"/></linearGradient>
102
+ <linearGradient id="camera-intro-gr" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3D3E46"/><stop offset="1" stop-color="#2E2F35"/></linearGradient>
103
+ <radialGradient id="camera-intro-sh"><stop offset="0" stop-color="#000" stop-opacity=".5"/><stop offset="1" stop-color="#000" stop-opacity="0"/></radialGradient>
104
+ <linearGradient id="camera-intro-o" x1="107.37" y1="156.63" x2="156.63" y2="107.37" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#E2335C"/><stop offset=".5" stop-color="#F0622E"/><stop offset="1" stop-color="#F8A43C"/></linearGradient>
105
+ </defs>
106
+ <rect x="83" y="27" width="98" height="210" rx="17" fill="#121317" stroke="#E9EAEE" stroke-width="2.5"/>
107
+ <path d="M81.5 70V84M81.5 92V106M182.5 80V102" stroke="#E9EAEE" stroke-width="2" stroke-linecap="round"/>
108
+ <rect x="87" y="31" width="90" height="202" rx="13" fill="#1B1C21"/>
109
+ <g clip-path="url(#camera-intro-scr)"><g class="camera-intro__all">
110
+ <g class="camera-intro__bg">
111
+ <g class="camera-intro__pan">
112
+ <path d="M100 92L-45.66 -40H309.66L164 92Z" fill="url(#camera-intro-gc)"/><path d="M100 92L-45.66 -40V300L100 150ZM164 92L309.66 -40V300L164 150Z" fill="#2C2D34"/><path d="M100 150L-65.52 300H329.52L164 150Z" fill="url(#camera-intro-gfl)"/>
113
+ <path d="M100 92H164V150H100Z" fill="url(#camera-intro-gw)"/>
114
+ <rect x="116" y="102" width="32" height="30" rx="2" fill="url(#camera-intro-gwin)"/>
115
+ <path d="M116 150H148L175.59 200H88.41Z" fill="url(#camera-intro-glt)"/>
116
+ <g fill="#5B6BFF"><g class="camera-intro__dot camera-intro__d104"><circle cx="92.41" cy="162" r="0.96"/><circle cx="78.9" cy="176" r="1.27"/><circle cx="61.52" cy="194" r="1.67"/><circle cx="40.28" cy="216" r="2.15"/><circle cx="15.17" cy="242" r="2.72"/></g><g class="camera-intro__dot camera-intro__d112"><circle cx="103.72" cy="162" r="0.96"/><circle cx="94.07" cy="176" r="1.27"/><circle cx="81.66" cy="194" r="1.67"/><circle cx="66.48" cy="216" r="2.15"/><circle cx="48.55" cy="242" r="2.72"/></g><g class="camera-intro__dot camera-intro__d120"><circle cx="115.03" cy="162" r="0.96"/><circle cx="109.24" cy="176" r="1.27"/><circle cx="101.79" cy="194" r="1.67"/><circle cx="92.69" cy="216" r="2.15"/><circle cx="81.93" cy="242" r="2.72"/></g><g class="camera-intro__dot camera-intro__d128"><circle cx="126.34" cy="162" r="0.96"/><circle cx="124.41" cy="176" r="1.27"/><circle cx="121.93" cy="194" r="1.67"/><circle cx="118.9" cy="216" r="2.15"/><circle cx="115.31" cy="242" r="2.72"/></g><g class="camera-intro__dot camera-intro__d136"><circle cx="137.66" cy="162" r="0.96"/><circle cx="139.59" cy="176" r="1.27"/><circle cx="142.07" cy="194" r="1.67"/><circle cx="145.1" cy="216" r="2.15"/><circle cx="148.69" cy="242" r="2.72"/></g><g class="camera-intro__dot camera-intro__d144"><circle cx="148.97" cy="162" r="0.96"/><circle cx="154.76" cy="176" r="1.27"/><circle cx="162.21" cy="194" r="1.67"/><circle cx="171.31" cy="216" r="2.15"/><circle cx="182.07" cy="242" r="2.72"/></g><g class="camera-intro__dot camera-intro__d152"><circle cx="160.28" cy="162" r="0.96"/><circle cx="169.93" cy="176" r="1.27"/><circle cx="182.34" cy="194" r="1.67"/><circle cx="197.52" cy="216" r="2.15"/><circle cx="215.45" cy="242" r="2.72"/></g><g class="camera-intro__dot camera-intro__d160"><circle cx="171.59" cy="162" r="0.96"/><circle cx="185.1" cy="176" r="1.27"/><circle cx="202.48" cy="194" r="1.67"/><circle cx="223.72" cy="216" r="2.15"/><circle cx="248.83" cy="242" r="2.72"/></g></g>
117
+ </g>
118
+ <rect x="87" y="31" width="90" height="202" fill="url(#camera-intro-gl)"/>
119
+ </g>
120
+ <circle class="camera-intro__disc" cx="132" cy="132" r="35.19" fill="url(#camera-intro-o)"/>
121
+ <circle class="camera-intro__orbit" pathLength="1" cx="132" cy="132" r="35.19" fill="none" stroke="#fff" stroke-opacity=".6" stroke-width="1.5" stroke-linecap="round"/>
122
+ <g class="camera-intro__drop"><g class="camera-intro__move">
123
+ <g class="camera-intro__stand"><ellipse cx="132" cy="199" rx="29.93" ry="18.85" fill="url(#camera-intro-sh)"/>
124
+ <ellipse cx="132" cy="196" rx="27.21" ry="15.71" fill="none" stroke="#fff" stroke-opacity=".5" stroke-width="1.5"/></g>
125
+ <g class="camera-intro__faces"><path class="camera-intro__k camera-intro__top" d="M0 0H1V1H0Z" fill="url(#camera-intro-gt)"/><path class="camera-intro__k camera-intro__front" d="M0 0H1V1H0Z" fill="url(#camera-intro-gf)"/><path class="camera-intro__k camera-intro__right" d="M0 0H1V1H0Z" fill="url(#camera-intro-gr)"/></g>
126
+ <g class="camera-intro__wire"><g stroke="#F4F5F8" stroke-width="2" fill="none"><path class="camera-intro__k camera-intro__e0" d="M0 0H1"/><path class="camera-intro__k camera-intro__e1" d="M0 0H1"/><path class="camera-intro__k camera-intro__e2" d="M0 0H1"/><path class="camera-intro__k camera-intro__e3" d="M0 0H1"/><path class="camera-intro__k camera-intro__e4" d="M0 0H1"/><path class="camera-intro__k camera-intro__e5" d="M0 0H1"/><path class="camera-intro__k camera-intro__e6" d="M0 0H1"/><path class="camera-intro__k camera-intro__e7" d="M0 0H1"/><path class="camera-intro__k camera-intro__e8" d="M0 0H1"/></g><g fill="#F4F5F8"><circle class="camera-intro__k camera-intro__vTbl" r="1"/><circle class="camera-intro__k camera-intro__vTbr" r="1"/><circle class="camera-intro__k camera-intro__vTfl" r="1"/><circle class="camera-intro__k camera-intro__vTfr" r="1"/><circle class="camera-intro__k camera-intro__vBfl" r="1"/><circle class="camera-intro__k camera-intro__vBfr" r="1"/><circle class="camera-intro__k camera-intro__vBbr" r="1"/></g></g>
127
+ </g></g>
128
+ <g class="camera-intro__logo" fill="none" stroke="#F4F5F8" stroke-linejoin="round" stroke-linecap="round">
129
+ <path class="camera-intro__lw" d="M132 152.82L113.97 142.41L113.97 121.59L132 111.18L150.03 121.59L150.03 142.41Z"/>
130
+ <g class="camera-intro__spin"><path class="camera-intro__lw" d="M132 132L113.97 121.59M132 132L150.03 121.59M132 132L132 152.82"/></g>
131
+ <circle class="camera-intro__hub" cx="132" cy="132" r="6.04" fill="url(#camera-intro-o)" stroke-width="4.37"/>
132
+ </g>
133
+ <g class="camera-intro__finger">
134
+ <circle class="camera-intro__ring" r="8" fill="#fff" stroke="#5B6BFF" stroke-opacity=".7" stroke-width="1.75"/>
135
+ <circle r="5" fill="#5B6BFF"/>
136
+ </g>
137
+ </g></g>
138
+ <rect x="119" y="36" width="26" height="8" rx="4" fill="#000"/>
139
+ </svg>
@@ -0,0 +1,100 @@
1
+ <svg width="1000" height="858" xmlns="http://www.w3.org/2000/svg" viewBox="5.5 -16.4 105.7 90.7" aria-hidden="true" xmlns:c2pa="http://c2pa.org/manifest">
2
+ <style>
3
+ .gesture-rotate__m,.gesture-rotate__finger{transform-box:view-box;transform-origin:0 0;animation-duration:2.4s;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode:both;animation-timing-function:linear}
4
+ .gesture-rotate__finger{animation-name:gesture-rotate-finger}
5
+ .gesture-rotate__vBbr{animation-name:gesture-rotate-vBbr}
6
+ .gesture-rotate__vBfr{animation-name:gesture-rotate-vBfr}
7
+ .gesture-rotate__vBfl{animation-name:gesture-rotate-vBfl}
8
+ .gesture-rotate__vTfr{animation-name:gesture-rotate-vTfr}
9
+ .gesture-rotate__vTfl{animation-name:gesture-rotate-vTfl}
10
+ .gesture-rotate__vTbr{animation-name:gesture-rotate-vTbr}
11
+ .gesture-rotate__vTbl{animation-name:gesture-rotate-vTbl}
12
+ .gesture-rotate__e8{animation-name:gesture-rotate-e8}
13
+ .gesture-rotate__e7{animation-name:gesture-rotate-e7}
14
+ .gesture-rotate__e6{animation-name:gesture-rotate-e6}
15
+ .gesture-rotate__e5{animation-name:gesture-rotate-e5}
16
+ .gesture-rotate__e4{animation-name:gesture-rotate-e4}
17
+ .gesture-rotate__e3{animation-name:gesture-rotate-e3}
18
+ .gesture-rotate__e2{animation-name:gesture-rotate-e2}
19
+ .gesture-rotate__e1{animation-name:gesture-rotate-e1}
20
+ .gesture-rotate__e0{animation-name:gesture-rotate-e0}
21
+ .gesture-rotate__right{animation-name:gesture-rotate-right}
22
+ .gesture-rotate__front{animation-name:gesture-rotate-front}
23
+ .gesture-rotate__top{animation-name:gesture-rotate-top}
24
+ @keyframes gesture-rotate-top{0%,22.9%{transform:translate(39.18px,34.27px) rotate(6.46deg) skewX(-25.91deg) scale(33.05,-14.78)}26.3%{transform:translate(39.15px,34.24px) rotate(6.52deg) skewX(-26.11deg) scale(33.03,-14.79)}29.7%{transform:translate(39.05px,34.17px) rotate(6.74deg) skewX(-26.76deg) scale(32.97,-14.82)}33.1%{transform:translate(38.86px,34.03px) rotate(7.16deg) skewX(-27.96deg) scale(32.85,-14.87)}36.4%{transform:translate(38.56px,33.78px) rotate(7.86deg) skewX(-29.85deg) scale(32.63,-14.97)}39.8%{transform:translate(38.12px,33.39px) rotate(8.99deg) skewX(-32.55deg) scale(32.24,-15.15)}43.2%{transform:translate(37.5px,32.77px) rotate(10.83deg) skewX(-36.14deg) scale(31.53,-15.49)}46.6%{transform:translate(36.72px,31.72px) rotate(14.02deg) skewX(-40.4deg) scale(30.17,-16.19)}50.0%{transform:translate(36.05px,30.07px) rotate(19.53deg) skewX(-43.74deg) scale(27.63,-17.68)}53.4%{transform:translate(36.03px,28.4px) rotate(26.27deg) skewX(-43.84deg) scale(24.66,-19.81)}56.8%{transform:translate(36.37px,27.31px) rotate(31.72deg) skewX(-42.16deg) scale(22.56,-21.65)}60.2%{transform:translate(36.72px,26.65px) rotate(35.63deg) skewX(-40.38deg) scale(21.25,-22.99)}63.5%{transform:translate(37px,26.23px) rotate(38.37deg) skewX(-38.92deg) scale(20.42,-23.92)}66.9%{transform:translate(37.19px,25.97px) rotate(40.22deg) skewX(-37.85deg) scale(19.91,-24.54)}70.3%{transform:translate(37.32px,25.82px) rotate(41.38deg) skewX(-37.16deg) scale(19.6,-24.93)}73.7%{transform:translate(37.39px,25.73px) rotate(42deg) skewX(-36.78deg) scale(19.44,-25.13)}77.1%,100%{transform:translate(37.41px,25.71px) rotate(42.19deg) skewX(-36.67deg) scale(19.39,-25.19)}}
25
+ @keyframes gesture-rotate-front{0%,22.9%{transform:translate(39.18px,65.08px) rotate(6.46deg) skewX(6.46deg) scale(33.05,-30.62)}26.3%{transform:translate(39.15px,65.06px) rotate(6.52deg) skewX(6.52deg) scale(33.03,-30.61)}29.7%{transform:translate(39.05px,64.98px) rotate(6.74deg) skewX(6.74deg) scale(32.97,-30.6)}33.1%{transform:translate(38.86px,64.84px) rotate(7.16deg) skewX(7.16deg) scale(32.85,-30.57)}36.4%{transform:translate(38.56px,64.6px) rotate(7.86deg) skewX(7.86deg) scale(32.63,-30.52)}39.8%{transform:translate(38.12px,64.21px) rotate(8.99deg) skewX(8.99deg) scale(32.24,-30.44)}43.2%{transform:translate(37.5px,63.58px) rotate(10.83deg) skewX(10.83deg) scale(31.53,-30.27)}46.6%{transform:translate(36.72px,62.53px) rotate(14.02deg) skewX(14.02deg) scale(30.17,-29.9)}50.0%{transform:translate(36.05px,60.89px) rotate(19.53deg) skewX(19.53deg) scale(27.63,-29.04)}53.4%{transform:translate(36.03px,59.22px) rotate(26.27deg) skewX(26.27deg) scale(24.66,-27.63)}56.8%{transform:translate(36.37px,58.12px) rotate(31.72deg) skewX(31.72deg) scale(22.56,-26.21)}60.2%{transform:translate(36.72px,57.46px) rotate(35.63deg) skewX(35.63deg) scale(21.25,-25.05)}63.5%{transform:translate(37px,57.05px) rotate(38.37deg) skewX(38.37deg) scale(20.42,-24.16)}66.9%{transform:translate(37.19px,56.79px) rotate(40.22deg) skewX(40.22deg) scale(19.91,-23.53)}70.3%{transform:translate(37.32px,56.63px) rotate(41.38deg) skewX(41.38deg) scale(19.6,-23.12)}73.7%{transform:translate(37.39px,56.55px) rotate(42deg) skewX(42deg) scale(19.44,-22.9)}77.1%,100%{transform:translate(37.41px,56.52px) rotate(42.19deg) skewX(42.19deg) scale(19.39,-22.83)}}
26
+ @keyframes gesture-rotate-right{0%,22.9%{transform:translate(72.02px,68.8px) rotate(-57.62deg) skewX(-57.62deg) scale(16.43,-16.5)}26.3%{transform:translate(71.97px,68.81px) rotate(-57.37deg) skewX(-57.37deg) scale(16.47,-16.62)}29.7%{transform:translate(71.79px,68.85px) rotate(-56.5deg) skewX(-56.5deg) scale(16.59,-17.01)}33.1%{transform:translate(71.45px,68.93px) rotate(-54.88deg) skewX(-54.88deg) scale(16.84,-17.73)}36.4%{transform:translate(70.88px,69.06px) rotate(-52.29deg) skewX(-52.29deg) scale(17.26,-18.85)}39.8%{transform:translate(69.96px,69.25px) rotate(-48.46deg) skewX(-48.46deg) scale(17.98,-20.43)}43.2%{transform:translate(68.47px,69.51px) rotate(-43.02deg) skewX(-43.02deg) scale(19.19,-22.53)}46.6%{transform:translate(65.99px,69.84px) rotate(-35.58deg) skewX(-35.58deg) scale(21.26,-25.06)}50.0%{transform:translate(62.1px,70.12px) rotate(-26.73deg) skewX(-26.73deg) scale(24.47,-27.52)}53.4%{transform:translate(58.14px,70.13px) rotate(-19.89deg) skewX(-19.89deg) scale(27.46,-28.98)}56.8%{transform:translate(55.56px,69.99px) rotate(-16.12deg) skewX(-16.12deg) scale(29.21,-29.6)}60.2%{transform:translate(53.99px,69.84px) rotate(-13.99deg) skewX(-13.99deg) scale(30.18,-29.9)}63.5%{transform:translate(53.01px,69.72px) rotate(-12.71deg) skewX(-12.71deg) scale(30.75,-30.06)}66.9%{transform:translate(52.39px,69.64px) rotate(-11.93deg) skewX(-11.93deg) scale(31.08,-30.15)}70.3%{transform:translate(52.02px,69.59px) rotate(-11.46deg) skewX(-11.46deg) scale(31.28,-30.2)}73.7%{transform:translate(51.83px,69.56px) rotate(-11.22deg) skewX(-11.22deg) scale(31.38,-30.23)}77.1%,100%{transform:translate(51.78px,69.55px) rotate(-11.15deg) skewX(-11.15deg) scale(31.41,-30.23)}}
27
+ @keyframes gesture-rotate-e0{0%,22.9%{transform:translate(47.98px,20.39px) rotate(6.46deg) scaleX(33.05)}26.3%{transform:translate(48.03px,20.37px) rotate(6.52deg) scaleX(33.03)}29.7%{transform:translate(48.21px,20.33px) rotate(6.74deg) scaleX(32.97)}33.1%{transform:translate(48.55px,20.25px) rotate(7.16deg) scaleX(32.85)}36.4%{transform:translate(49.12px,20.13px) rotate(7.86deg) scaleX(32.63)}39.8%{transform:translate(50.04px,19.94px) rotate(8.99deg) scaleX(32.24)}43.2%{transform:translate(51.53px,19.68px) rotate(10.83deg) scaleX(31.53)}46.6%{transform:translate(54.01px,19.35px) rotate(14.02deg) scaleX(30.17)}50.0%{transform:translate(57.9px,19.06px) rotate(19.53deg) scaleX(27.63)}53.4%{transform:translate(61.86px,19.06px) rotate(26.27deg) scaleX(24.66)}56.8%{transform:translate(64.44px,19.2px) rotate(31.72deg) scaleX(22.56)}60.2%{transform:translate(66.01px,19.35px) rotate(35.63deg) scaleX(21.25)}63.5%{transform:translate(66.99px,19.46px) rotate(38.37deg) scaleX(20.42)}66.9%{transform:translate(67.61px,19.55px) rotate(40.22deg) scaleX(19.91)}70.3%{transform:translate(67.98px,19.6px) rotate(41.38deg) scaleX(19.6)}73.7%{transform:translate(68.17px,19.63px) rotate(42deg) scaleX(19.44)}77.1%,100%{transform:translate(68.22px,19.64px) rotate(42.19deg) scaleX(19.39)}}
28
+ @keyframes gesture-rotate-e1{0%,22.9%{transform:translate(80.82px,24.11px) rotate(122.38deg) scaleX(16.43)}26.3%{transform:translate(80.85px,24.13px) rotate(122.63deg) scaleX(16.47)}29.7%{transform:translate(80.95px,24.2px) rotate(123.5deg) scaleX(16.59)}33.1%{transform:translate(81.14px,24.35px) rotate(125.12deg) scaleX(16.84)}36.4%{transform:translate(81.44px,24.59px) rotate(127.71deg) scaleX(17.26)}39.8%{transform:translate(81.88px,24.98px) rotate(131.54deg) scaleX(17.98)}43.2%{transform:translate(82.5px,25.6px) rotate(136.98deg) scaleX(19.19)}46.6%{transform:translate(83.28px,26.65px) rotate(144.42deg) scaleX(21.26)}50.0%{transform:translate(83.95px,28.3px) rotate(153.27deg) scaleX(24.47)}53.4%{transform:translate(83.97px,29.97px) rotate(160.11deg) scaleX(27.46)}56.8%{transform:translate(83.63px,31.06px) rotate(163.88deg) scaleX(29.21)}60.2%{transform:translate(83.28px,31.73px) rotate(166.01deg) scaleX(30.18)}63.5%{transform:translate(83px,32.14px) rotate(167.29deg) scaleX(30.75)}66.9%{transform:translate(82.81px,32.4px) rotate(168.07deg) scaleX(31.08)}70.3%{transform:translate(82.68px,32.56px) rotate(168.54deg) scaleX(31.28)}73.7%{transform:translate(82.61px,32.64px) rotate(168.78deg) scaleX(31.38)}77.1%,100%{transform:translate(82.59px,32.66px) rotate(168.85deg) scaleX(31.41)}}
29
+ @keyframes gesture-rotate-e2{0%,22.9%{transform:translate(72.02px,37.98px) rotate(-173.54deg) scaleX(33.05)}26.3%{transform:translate(71.97px,38px) rotate(-173.48deg) scaleX(33.03)}29.7%{transform:translate(71.79px,38.04px) rotate(-173.26deg) scaleX(32.97)}33.1%{transform:translate(71.45px,38.12px) rotate(-172.84deg) scaleX(32.85)}36.4%{transform:translate(70.88px,38.25px) rotate(-172.14deg) scaleX(32.63)}39.8%{transform:translate(69.96px,38.43px) rotate(-171.01deg) scaleX(32.24)}43.2%{transform:translate(68.47px,38.69px) rotate(-169.17deg) scaleX(31.53)}46.6%{transform:translate(65.99px,39.03px) rotate(-165.98deg) scaleX(30.17)}50.0%{transform:translate(62.1px,39.31px) rotate(-160.47deg) scaleX(27.63)}53.4%{transform:translate(58.14px,39.32px) rotate(-153.73deg) scaleX(24.66)}56.8%{transform:translate(55.56px,39.17px) rotate(-148.28deg) scaleX(22.56)}60.2%{transform:translate(53.99px,39.02px) rotate(-144.37deg) scaleX(21.25)}63.5%{transform:translate(53.01px,38.91px) rotate(-141.63deg) scaleX(20.42)}66.9%{transform:translate(52.39px,38.82px) rotate(-139.78deg) scaleX(19.91)}70.3%{transform:translate(52.02px,38.77px) rotate(-138.62deg) scaleX(19.6)}73.7%{transform:translate(51.83px,38.74px) rotate(-138deg) scaleX(19.44)}77.1%,100%{transform:translate(51.78px,38.73px) rotate(-137.81deg) scaleX(19.39)}}
30
+ @keyframes gesture-rotate-e3{0%,22.9%{transform:translate(39.18px,34.27px) rotate(-57.62deg) scaleX(16.43)}26.3%{transform:translate(39.15px,34.24px) rotate(-57.37deg) scaleX(16.47)}29.7%{transform:translate(39.05px,34.17px) rotate(-56.5deg) scaleX(16.59)}33.1%{transform:translate(38.86px,34.03px) rotate(-54.88deg) scaleX(16.84)}36.4%{transform:translate(38.56px,33.78px) rotate(-52.29deg) scaleX(17.26)}39.8%{transform:translate(38.12px,33.39px) rotate(-48.46deg) scaleX(17.98)}43.2%{transform:translate(37.5px,32.77px) rotate(-43.02deg) scaleX(19.19)}46.6%{transform:translate(36.72px,31.72px) rotate(-35.58deg) scaleX(21.26)}50.0%{transform:translate(36.05px,30.07px) rotate(-26.73deg) scaleX(24.47)}53.4%{transform:translate(36.03px,28.4px) rotate(-19.89deg) scaleX(27.46)}56.8%{transform:translate(36.37px,27.31px) rotate(-16.12deg) scaleX(29.21)}60.2%{transform:translate(36.72px,26.65px) rotate(-13.99deg) scaleX(30.18)}63.5%{transform:translate(37px,26.23px) rotate(-12.71deg) scaleX(30.75)}66.9%{transform:translate(37.19px,25.97px) rotate(-11.93deg) scaleX(31.08)}70.3%{transform:translate(37.32px,25.82px) rotate(-11.46deg) scaleX(31.28)}73.7%{transform:translate(37.39px,25.73px) rotate(-11.22deg) scaleX(31.38)}77.1%,100%{transform:translate(37.41px,25.71px) rotate(-11.15deg) scaleX(31.41)}}
31
+ @keyframes gesture-rotate-e4{0%,22.9%{transform:translate(39.18px,34.27px) rotate(90deg) scaleX(30.81)}26.3%{transform:translate(39.15px,34.24px) rotate(90deg) scaleX(30.81)}29.7%{transform:translate(39.05px,34.17px) rotate(90deg) scaleX(30.81)}33.1%{transform:translate(38.86px,34.03px) rotate(90deg) scaleX(30.81)}36.4%{transform:translate(38.56px,33.78px) rotate(90deg) scaleX(30.81)}39.8%{transform:translate(38.12px,33.39px) rotate(90deg) scaleX(30.81)}43.2%{transform:translate(37.5px,32.77px) rotate(90deg) scaleX(30.81)}46.6%{transform:translate(36.72px,31.72px) rotate(90deg) scaleX(30.81)}50.0%{transform:translate(36.05px,30.07px) rotate(90deg) scaleX(30.81)}53.4%{transform:translate(36.03px,28.4px) rotate(90deg) scaleX(30.81)}56.8%{transform:translate(36.37px,27.31px) rotate(90deg) scaleX(30.81)}60.2%{transform:translate(36.72px,26.65px) rotate(90deg) scaleX(30.81)}63.5%{transform:translate(37px,26.23px) rotate(90deg) scaleX(30.81)}66.9%{transform:translate(37.19px,25.97px) rotate(90deg) scaleX(30.81)}70.3%{transform:translate(37.32px,25.82px) rotate(90deg) scaleX(30.81)}73.7%{transform:translate(37.39px,25.73px) rotate(90deg) scaleX(30.81)}77.1%,100%{transform:translate(37.41px,25.71px) rotate(90deg) scaleX(30.81)}}
32
+ @keyframes gesture-rotate-e5{0%,22.9%{transform:translate(72.02px,37.98px) rotate(90deg) scaleX(30.81)}26.3%{transform:translate(71.97px,38px) rotate(90deg) scaleX(30.81)}29.7%{transform:translate(71.79px,38.04px) rotate(90deg) scaleX(30.81)}33.1%{transform:translate(71.45px,38.12px) rotate(90deg) scaleX(30.81)}36.4%{transform:translate(70.88px,38.25px) rotate(90deg) scaleX(30.81)}39.8%{transform:translate(69.96px,38.43px) rotate(90deg) scaleX(30.81)}43.2%{transform:translate(68.47px,38.69px) rotate(90deg) scaleX(30.81)}46.6%{transform:translate(65.99px,39.03px) rotate(90deg) scaleX(30.81)}50.0%{transform:translate(62.1px,39.31px) rotate(90deg) scaleX(30.81)}53.4%{transform:translate(58.14px,39.32px) rotate(90deg) scaleX(30.81)}56.8%{transform:translate(55.56px,39.17px) rotate(90deg) scaleX(30.81)}60.2%{transform:translate(53.99px,39.02px) rotate(90deg) scaleX(30.81)}63.5%{transform:translate(53.01px,38.91px) rotate(90deg) scaleX(30.81)}66.9%{transform:translate(52.39px,38.82px) rotate(90deg) scaleX(30.81)}70.3%{transform:translate(52.02px,38.77px) rotate(90deg) scaleX(30.81)}73.7%{transform:translate(51.83px,38.74px) rotate(90deg) scaleX(30.81)}77.1%,100%{transform:translate(51.78px,38.73px) rotate(90deg) scaleX(30.81)}}
33
+ @keyframes gesture-rotate-e6{0%,22.9%{transform:translate(80.82px,24.11px) rotate(90deg) scaleX(30.81)}26.3%{transform:translate(80.85px,24.13px) rotate(90deg) scaleX(30.81)}29.7%{transform:translate(80.95px,24.2px) rotate(90deg) scaleX(30.81)}33.1%{transform:translate(81.14px,24.35px) rotate(90deg) scaleX(30.81)}36.4%{transform:translate(81.44px,24.59px) rotate(90deg) scaleX(30.81)}39.8%{transform:translate(81.88px,24.98px) rotate(90deg) scaleX(30.81)}43.2%{transform:translate(82.5px,25.6px) rotate(90deg) scaleX(30.81)}46.6%{transform:translate(83.28px,26.65px) rotate(90deg) scaleX(30.81)}50.0%{transform:translate(83.95px,28.3px) rotate(90deg) scaleX(30.81)}53.4%{transform:translate(83.97px,29.97px) rotate(90deg) scaleX(30.81)}56.8%{transform:translate(83.63px,31.06px) rotate(90deg) scaleX(30.81)}60.2%{transform:translate(83.28px,31.73px) rotate(90deg) scaleX(30.81)}63.5%{transform:translate(83px,32.14px) rotate(90deg) scaleX(30.81)}66.9%{transform:translate(82.81px,32.4px) rotate(90deg) scaleX(30.81)}70.3%{transform:translate(82.68px,32.56px) rotate(90deg) scaleX(30.81)}73.7%{transform:translate(82.61px,32.64px) rotate(90deg) scaleX(30.81)}77.1%,100%{transform:translate(82.59px,32.66px) rotate(90deg) scaleX(30.81)}}
34
+ @keyframes gesture-rotate-e7{0%,22.9%{transform:translate(39.18px,65.08px) rotate(6.46deg) scaleX(33.05)}26.3%{transform:translate(39.15px,65.06px) rotate(6.52deg) scaleX(33.03)}29.7%{transform:translate(39.05px,64.98px) rotate(6.74deg) scaleX(32.97)}33.1%{transform:translate(38.86px,64.84px) rotate(7.16deg) scaleX(32.85)}36.4%{transform:translate(38.56px,64.6px) rotate(7.86deg) scaleX(32.63)}39.8%{transform:translate(38.12px,64.21px) rotate(8.99deg) scaleX(32.24)}43.2%{transform:translate(37.5px,63.58px) rotate(10.83deg) scaleX(31.53)}46.6%{transform:translate(36.72px,62.53px) rotate(14.02deg) scaleX(30.17)}50.0%{transform:translate(36.05px,60.89px) rotate(19.53deg) scaleX(27.63)}53.4%{transform:translate(36.03px,59.22px) rotate(26.27deg) scaleX(24.66)}56.8%{transform:translate(36.37px,58.12px) rotate(31.72deg) scaleX(22.56)}60.2%{transform:translate(36.72px,57.46px) rotate(35.63deg) scaleX(21.25)}63.5%{transform:translate(37px,57.05px) rotate(38.37deg) scaleX(20.42)}66.9%{transform:translate(37.19px,56.79px) rotate(40.22deg) scaleX(19.91)}70.3%{transform:translate(37.32px,56.63px) rotate(41.38deg) scaleX(19.6)}73.7%{transform:translate(37.39px,56.55px) rotate(42deg) scaleX(19.44)}77.1%,100%{transform:translate(37.41px,56.52px) rotate(42.19deg) scaleX(19.39)}}
35
+ @keyframes gesture-rotate-e8{0%,22.9%{transform:translate(72.02px,68.8px) rotate(-57.62deg) scaleX(16.43)}26.3%{transform:translate(71.97px,68.81px) rotate(-57.37deg) scaleX(16.47)}29.7%{transform:translate(71.79px,68.85px) rotate(-56.5deg) scaleX(16.59)}33.1%{transform:translate(71.45px,68.93px) rotate(-54.88deg) scaleX(16.84)}36.4%{transform:translate(70.88px,69.06px) rotate(-52.29deg) scaleX(17.26)}39.8%{transform:translate(69.96px,69.25px) rotate(-48.46deg) scaleX(17.98)}43.2%{transform:translate(68.47px,69.51px) rotate(-43.02deg) scaleX(19.19)}46.6%{transform:translate(65.99px,69.84px) rotate(-35.58deg) scaleX(21.26)}50.0%{transform:translate(62.1px,70.12px) rotate(-26.73deg) scaleX(24.47)}53.4%{transform:translate(58.14px,70.13px) rotate(-19.89deg) scaleX(27.46)}56.8%{transform:translate(55.56px,69.99px) rotate(-16.12deg) scaleX(29.21)}60.2%{transform:translate(53.99px,69.84px) rotate(-13.99deg) scaleX(30.18)}63.5%{transform:translate(53.01px,69.72px) rotate(-12.71deg) scaleX(30.75)}66.9%{transform:translate(52.39px,69.64px) rotate(-11.93deg) scaleX(31.08)}70.3%{transform:translate(52.02px,69.59px) rotate(-11.46deg) scaleX(31.28)}73.7%{transform:translate(51.83px,69.56px) rotate(-11.22deg) scaleX(31.38)}77.1%,100%{transform:translate(51.78px,69.55px) rotate(-11.15deg) scaleX(31.41)}}
36
+ @keyframes gesture-rotate-vTbl{0%,22.9%{transform:translate(47.98px,20.39px)}26.3%{transform:translate(48.03px,20.37px)}29.7%{transform:translate(48.21px,20.33px)}33.1%{transform:translate(48.55px,20.25px)}36.4%{transform:translate(49.12px,20.13px)}39.8%{transform:translate(50.04px,19.94px)}43.2%{transform:translate(51.53px,19.68px)}46.6%{transform:translate(54.01px,19.35px)}50.0%{transform:translate(57.9px,19.06px)}53.4%{transform:translate(61.86px,19.06px)}56.8%{transform:translate(64.44px,19.2px)}60.2%{transform:translate(66.01px,19.35px)}63.5%{transform:translate(66.99px,19.46px)}66.9%{transform:translate(67.61px,19.55px)}70.3%{transform:translate(67.98px,19.6px)}73.7%{transform:translate(68.17px,19.63px)}77.1%,100%{transform:translate(68.22px,19.64px)}}
37
+ @keyframes gesture-rotate-vTbr{0%,22.9%{transform:translate(80.82px,24.11px)}26.3%{transform:translate(80.85px,24.13px)}29.7%{transform:translate(80.95px,24.2px)}33.1%{transform:translate(81.14px,24.35px)}36.4%{transform:translate(81.44px,24.59px)}39.8%{transform:translate(81.88px,24.98px)}43.2%{transform:translate(82.5px,25.6px)}46.6%{transform:translate(83.28px,26.65px)}50.0%{transform:translate(83.95px,28.3px)}53.4%{transform:translate(83.97px,29.97px)}56.8%{transform:translate(83.63px,31.06px)}60.2%{transform:translate(83.28px,31.73px)}63.5%{transform:translate(83px,32.14px)}66.9%{transform:translate(82.81px,32.4px)}70.3%{transform:translate(82.68px,32.56px)}73.7%{transform:translate(82.61px,32.64px)}77.1%,100%{transform:translate(82.59px,32.66px)}}
38
+ @keyframes gesture-rotate-vTfl{0%,22.9%{transform:translate(39.18px,34.27px)}26.3%{transform:translate(39.15px,34.24px)}29.7%{transform:translate(39.05px,34.17px)}33.1%{transform:translate(38.86px,34.03px)}36.4%{transform:translate(38.56px,33.78px)}39.8%{transform:translate(38.12px,33.39px)}43.2%{transform:translate(37.5px,32.77px)}46.6%{transform:translate(36.72px,31.72px)}50.0%{transform:translate(36.05px,30.07px)}53.4%{transform:translate(36.03px,28.4px)}56.8%{transform:translate(36.37px,27.31px)}60.2%{transform:translate(36.72px,26.65px)}63.5%{transform:translate(37px,26.23px)}66.9%{transform:translate(37.19px,25.97px)}70.3%{transform:translate(37.32px,25.82px)}73.7%{transform:translate(37.39px,25.73px)}77.1%,100%{transform:translate(37.41px,25.71px)}}
39
+ @keyframes gesture-rotate-vTfr{0%,22.9%{transform:translate(72.02px,37.98px)}26.3%{transform:translate(71.97px,38px)}29.7%{transform:translate(71.79px,38.04px)}33.1%{transform:translate(71.45px,38.12px)}36.4%{transform:translate(70.88px,38.25px)}39.8%{transform:translate(69.96px,38.43px)}43.2%{transform:translate(68.47px,38.69px)}46.6%{transform:translate(65.99px,39.03px)}50.0%{transform:translate(62.1px,39.31px)}53.4%{transform:translate(58.14px,39.32px)}56.8%{transform:translate(55.56px,39.17px)}60.2%{transform:translate(53.99px,39.02px)}63.5%{transform:translate(53.01px,38.91px)}66.9%{transform:translate(52.39px,38.82px)}70.3%{transform:translate(52.02px,38.77px)}73.7%{transform:translate(51.83px,38.74px)}77.1%,100%{transform:translate(51.78px,38.73px)}}
40
+ @keyframes gesture-rotate-vBfl{0%,22.9%{transform:translate(39.18px,65.08px)}26.3%{transform:translate(39.15px,65.06px)}29.7%{transform:translate(39.05px,64.98px)}33.1%{transform:translate(38.86px,64.84px)}36.4%{transform:translate(38.56px,64.6px)}39.8%{transform:translate(38.12px,64.21px)}43.2%{transform:translate(37.5px,63.58px)}46.6%{transform:translate(36.72px,62.53px)}50.0%{transform:translate(36.05px,60.89px)}53.4%{transform:translate(36.03px,59.22px)}56.8%{transform:translate(36.37px,58.12px)}60.2%{transform:translate(36.72px,57.46px)}63.5%{transform:translate(37px,57.05px)}66.9%{transform:translate(37.19px,56.79px)}70.3%{transform:translate(37.32px,56.63px)}73.7%{transform:translate(37.39px,56.55px)}77.1%,100%{transform:translate(37.41px,56.52px)}}
41
+ @keyframes gesture-rotate-vBfr{0%,22.9%{transform:translate(72.02px,68.8px)}26.3%{transform:translate(71.97px,68.81px)}29.7%{transform:translate(71.79px,68.85px)}33.1%{transform:translate(71.45px,68.93px)}36.4%{transform:translate(70.88px,69.06px)}39.8%{transform:translate(69.96px,69.25px)}43.2%{transform:translate(68.47px,69.51px)}46.6%{transform:translate(65.99px,69.84px)}50.0%{transform:translate(62.1px,70.12px)}53.4%{transform:translate(58.14px,70.13px)}56.8%{transform:translate(55.56px,69.99px)}60.2%{transform:translate(53.99px,69.84px)}63.5%{transform:translate(53.01px,69.72px)}66.9%{transform:translate(52.39px,69.64px)}70.3%{transform:translate(52.02px,69.59px)}73.7%{transform:translate(51.83px,69.56px)}77.1%,100%{transform:translate(51.78px,69.55px)}}
42
+ @keyframes gesture-rotate-vBbr{0%,22.9%{transform:translate(80.82px,54.92px)}26.3%{transform:translate(80.85px,54.94px)}29.7%{transform:translate(80.95px,55.02px)}33.1%{transform:translate(81.14px,55.16px)}36.4%{transform:translate(81.44px,55.4px)}39.8%{transform:translate(81.88px,55.79px)}43.2%{transform:translate(82.5px,56.42px)}46.6%{transform:translate(83.28px,57.47px)}50.0%{transform:translate(83.95px,59.11px)}53.4%{transform:translate(83.97px,60.78px)}56.8%{transform:translate(83.63px,61.88px)}60.2%{transform:translate(83.28px,62.54px)}63.5%{transform:translate(83px,62.95px)}66.9%{transform:translate(82.81px,63.21px)}70.3%{transform:translate(82.68px,63.37px)}73.7%{transform:translate(82.61px,63.45px)}77.1%,100%{transform:translate(82.59px,63.48px)}}
43
+ @keyframes gesture-rotate-finger{0%,10.4%{opacity:0;transform:translate(18px,6px);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}22.9%{opacity:1;transform:translate(18px,0)}26.3%{opacity:1;transform:translate(17.9px,0)}29.7%{opacity:1;transform:translate(17.55px,0)}33.1%{opacity:1;transform:translate(16.88px,0)}36.4%{opacity:1;transform:translate(15.77px,0)}39.8%{opacity:1;transform:translate(14.02px,0)}43.2%{opacity:1;transform:translate(11.26px,0)}46.6%{opacity:1;transform:translate(6.79px,0)}50.0%{opacity:1;transform:translate(0px,0)}53.4%{opacity:1;transform:translate(-6.79px,0)}56.8%{opacity:1;transform:translate(-11.26px,0)}60.2%{opacity:1;transform:translate(-14.02px,0)}63.5%{opacity:1;transform:translate(-15.77px,0)}66.9%{opacity:1;transform:translate(-16.88px,0)}70.3%{opacity:1;transform:translate(-17.55px,0)}73.7%{opacity:1;transform:translate(-17.9px,0)}77.1%{opacity:1;transform:translate(-18px,0);animation-timing-function:cubic-bezier(.5,0,.75,0)}89.6%,100%{opacity:0;transform:translate(-18px,6px)}}
44
+ .gesture-rotate__ring{transform-box:fill-box;transform-origin:center;animation:gesture-rotate-ring 2.4s infinite alternate both}
45
+ @keyframes gesture-rotate-ring{0%,10.4%{transform:scale(.4);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}22.9%,77.1%{transform:scale(1);animation-timing-function:ease-out}89.6%,100%{transform:scale(1.6)}}
46
+ @media (prefers-reduced-motion:reduce){
47
+ .gesture-rotate__m,.gesture-rotate__finger{animation:none}
48
+ .gesture-rotate__finger{opacity:1;transform:none}
49
+ .gesture-rotate__ring{animation:none;transform:none}
50
+ .gesture-rotate__top{transform:translate(36.05px,30.07px) rotate(19.53deg) skewX(-43.74deg) scale(27.63,-17.68)}
51
+ .gesture-rotate__front{transform:translate(36.05px,60.89px) rotate(19.53deg) skewX(19.53deg) scale(27.63,-29.04)}
52
+ .gesture-rotate__right{transform:translate(62.1px,70.12px) rotate(-26.73deg) skewX(-26.73deg) scale(24.47,-27.52)}
53
+ .gesture-rotate__e0{transform:translate(57.9px,19.06px) rotate(19.53deg) scaleX(27.63)}
54
+ .gesture-rotate__e1{transform:translate(83.95px,28.3px) rotate(153.27deg) scaleX(24.47)}
55
+ .gesture-rotate__e2{transform:translate(62.1px,39.31px) rotate(-160.47deg) scaleX(27.63)}
56
+ .gesture-rotate__e3{transform:translate(36.05px,30.07px) rotate(-26.73deg) scaleX(24.47)}
57
+ .gesture-rotate__e4{transform:translate(36.05px,30.07px) rotate(90deg) scaleX(30.81)}
58
+ .gesture-rotate__e5{transform:translate(62.1px,39.31px) rotate(90deg) scaleX(30.81)}
59
+ .gesture-rotate__e6{transform:translate(83.95px,28.3px) rotate(90deg) scaleX(30.81)}
60
+ .gesture-rotate__e7{transform:translate(36.05px,60.89px) rotate(19.53deg) scaleX(27.63)}
61
+ .gesture-rotate__e8{transform:translate(62.1px,70.12px) rotate(-26.73deg) scaleX(24.47)}
62
+ .gesture-rotate__vTbl{transform:translate(57.9px,19.06px)}
63
+ .gesture-rotate__vTbr{transform:translate(83.95px,28.3px)}
64
+ .gesture-rotate__vTfl{transform:translate(36.05px,30.07px)}
65
+ .gesture-rotate__vTfr{transform:translate(62.1px,39.31px)}
66
+ .gesture-rotate__vBfl{transform:translate(36.05px,60.89px)}
67
+ .gesture-rotate__vBfr{transform:translate(62.1px,70.12px)}
68
+ .gesture-rotate__vBbr{transform:translate(83.95px,59.11px)}
69
+ }
70
+ </style>
71
+
72
+ <ellipse cx="60" cy="60" rx="29.04" ry="12.27" fill="none" stroke="#fff" stroke-opacity=".4" stroke-width="1.5"/>
73
+ <path class="gesture-rotate__m gesture-rotate__top" d="M0 0H1V1H0Z" fill="#5E5F68"/>
74
+ <path class="gesture-rotate__m gesture-rotate__front" d="M0 0H1V1H0Z" fill="#45464E"/>
75
+ <path class="gesture-rotate__m gesture-rotate__right" d="M0 0H1V1H0Z" fill="#33343B"/>
76
+ <g stroke="#F4F5F8" stroke-width="2.75" fill="none">
77
+ <path class="gesture-rotate__m gesture-rotate__e0" d="M0 0H1"/>
78
+ <path class="gesture-rotate__m gesture-rotate__e1" d="M0 0H1"/>
79
+ <path class="gesture-rotate__m gesture-rotate__e2" d="M0 0H1"/>
80
+ <path class="gesture-rotate__m gesture-rotate__e3" d="M0 0H1"/>
81
+ <path class="gesture-rotate__m gesture-rotate__e4" d="M0 0H1"/>
82
+ <path class="gesture-rotate__m gesture-rotate__e5" d="M0 0H1"/>
83
+ <path class="gesture-rotate__m gesture-rotate__e6" d="M0 0H1"/>
84
+ <path class="gesture-rotate__m gesture-rotate__e7" d="M0 0H1"/>
85
+ <path class="gesture-rotate__m gesture-rotate__e8" d="M0 0H1"/>
86
+ </g>
87
+ <g fill="#F4F5F8">
88
+ <circle class="gesture-rotate__m gesture-rotate__vTbl" r="1.375"/>
89
+ <circle class="gesture-rotate__m gesture-rotate__vTbr" r="1.375"/>
90
+ <circle class="gesture-rotate__m gesture-rotate__vTfl" r="1.375"/>
91
+ <circle class="gesture-rotate__m gesture-rotate__vTfr" r="1.375"/>
92
+ <circle class="gesture-rotate__m gesture-rotate__vBfl" r="1.375"/>
93
+ <circle class="gesture-rotate__m gesture-rotate__vBfr" r="1.375"/>
94
+ <circle class="gesture-rotate__m gesture-rotate__vBbr" r="1.375"/>
95
+ </g>
96
+ <g class="gesture-rotate__finger">
97
+ <circle class="gesture-rotate__ring" cx="60" cy="-2" r="9" fill="#fff" stroke="#5B6BFF" stroke-opacity=".6" stroke-width="2"/>
98
+ <circle cx="60" cy="-2" r="5.5" fill="#5B6BFF"/>
99
+ </g>
100
+ </svg>
@@ -0,0 +1,66 @@
1
+ <svg width="1000" height="633" viewBox="0 0 226 143" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:c2pa="http://c2pa.org/manifest">
2
+ <style>
3
+ .scan-floor-2__hand{transform-box:view-box;transform-origin:124px 170px;animation:scan-floor-2-sweep 3.0s infinite both}
4
+ .scan-floor-2__spot{transform-box:view-box;animation:scan-floor-2-spot 3.0s infinite both}
5
+ @keyframes scan-floor-2-sweep{0%{transform:rotate(-9deg) translateX(-10px);animation-timing-function:cubic-bezier(.45,0,.55,1)}36.67%,46.67%{transform:rotate(9deg) translateX(10px);animation-timing-function:cubic-bezier(.45,0,.55,1)}83.33%,100%{transform:rotate(-9deg) translateX(-10px)}}
6
+ @keyframes scan-floor-2-spot{0%{transform:translateX(-72px);animation-timing-function:cubic-bezier(.45,0,.55,1)}36.67%,46.67%{transform:translateX(72px);animation-timing-function:cubic-bezier(.45,0,.55,1)}83.33%,100%{transform:translateX(-72px)}}
7
+ .scan-floor-2__d0{animation:scan-floor-2-d0 3.0s infinite both}@keyframes scan-floor-2-d0{0%,0.00%{opacity:0}6.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
8
+ .scan-floor-2__d1{animation:scan-floor-2-d1 3.0s infinite both}@keyframes scan-floor-2-d1{0%,2.00%{opacity:0}8.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
9
+ .scan-floor-2__d2{animation:scan-floor-2-d2 3.0s infinite both}@keyframes scan-floor-2-d2{0%,4.00%{opacity:0}10.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
10
+ .scan-floor-2__d3{animation:scan-floor-2-d3 3.0s infinite both}@keyframes scan-floor-2-d3{0%,6.00%{opacity:0}12.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
11
+ .scan-floor-2__d4{animation:scan-floor-2-d4 3.0s infinite both}@keyframes scan-floor-2-d4{0%,8.00%{opacity:0}14.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
12
+ .scan-floor-2__d5{animation:scan-floor-2-d5 3.0s infinite both}@keyframes scan-floor-2-d5{0%,10.00%{opacity:0}16.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
13
+ .scan-floor-2__d6{animation:scan-floor-2-d6 3.0s infinite both}@keyframes scan-floor-2-d6{0%,12.00%{opacity:0}18.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
14
+ .scan-floor-2__d7{animation:scan-floor-2-d7 3.0s infinite both}@keyframes scan-floor-2-d7{0%,14.00%{opacity:0}20.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
15
+ .scan-floor-2__d8{animation:scan-floor-2-d8 3.0s infinite both}@keyframes scan-floor-2-d8{0%,16.00%{opacity:0}22.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
16
+ .scan-floor-2__d9{animation:scan-floor-2-d9 3.0s infinite both}@keyframes scan-floor-2-d9{0%,18.00%{opacity:0}24.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
17
+ .scan-floor-2__d10{animation:scan-floor-2-d10 3.0s infinite both}@keyframes scan-floor-2-d10{0%,20.00%{opacity:0}26.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
18
+ .scan-floor-2__d11{animation:scan-floor-2-d11 3.0s infinite both}@keyframes scan-floor-2-d11{0%,22.00%{opacity:0}28.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
19
+ .scan-floor-2__d12{animation:scan-floor-2-d12 3.0s infinite both}@keyframes scan-floor-2-d12{0%,24.00%{opacity:0}30.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
20
+ .scan-floor-2__d13{animation:scan-floor-2-d13 3.0s infinite both}@keyframes scan-floor-2-d13{0%,26.00%{opacity:0}32.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
21
+ .scan-floor-2__d14{animation:scan-floor-2-d14 3.0s infinite both}@keyframes scan-floor-2-d14{0%,28.00%{opacity:0}34.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
22
+ .scan-floor-2__d15{animation:scan-floor-2-d15 3.0s infinite both}@keyframes scan-floor-2-d15{0%,30.00%{opacity:0}36.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
23
+ .scan-floor-2__d16{animation:scan-floor-2-d16 3.0s infinite both}@keyframes scan-floor-2-d16{0%,32.00%{opacity:0}38.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
24
+ .scan-floor-2__d17{animation:scan-floor-2-d17 3.0s infinite both}@keyframes scan-floor-2-d17{0%,36.00%{opacity:0}42.00%,86.00%{opacity:1}95.00%,100%{opacity:0}}
25
+ @media (prefers-reduced-motion:reduce){
26
+ .scan-floor-2__hand,.scan-floor-2__spot,[class^="scan-floor-2__d"]{animation:none}
27
+ .scan-floor-2__hand{transform:rotate(6.84deg) translateX(7.6px)}
28
+ .scan-floor-2__spot{transform:translateX(54.7px)}
29
+ .scan-floor-2__d0{opacity:1}
30
+ .scan-floor-2__d1{opacity:1}
31
+ .scan-floor-2__d2{opacity:1}
32
+ .scan-floor-2__d3{opacity:1}
33
+ .scan-floor-2__d4{opacity:1}
34
+ .scan-floor-2__d5{opacity:1}
35
+ .scan-floor-2__d6{opacity:1}
36
+ .scan-floor-2__d7{opacity:1}
37
+ .scan-floor-2__d8{opacity:1}
38
+ .scan-floor-2__d9{opacity:1}
39
+ .scan-floor-2__d10{opacity:1}
40
+ .scan-floor-2__d11{opacity:1}
41
+ .scan-floor-2__d12{opacity:1}
42
+ .scan-floor-2__d13{opacity:1}
43
+ .scan-floor-2__d14{opacity:0}
44
+ .scan-floor-2__d15{opacity:0}
45
+ .scan-floor-2__d16{opacity:0}
46
+ .scan-floor-2__d17{opacity:0}
47
+ }
48
+ </style>
49
+ <defs>
50
+ <radialGradient id="scan-floor-2-s"><stop offset="0" stop-color="#fff" stop-opacity=".3"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient>
51
+ </defs>
52
+ <g opacity="0.3"><path d="M32.5 0.5H193.5V76.5L224.976 117.5H1.024L32.5 76.5Z" fill="black"/><path d="M32.5 0.5H193.5V76.5L224.976 117.5H1.024L32.5 76.5ZM32.5 76.5H193.5" stroke="white" stroke-linejoin="round"/></g>
53
+ <g opacity="0.6">
54
+ <path d="M173.98 35.8638L169.636 18.4501C169.585 18.2474 169.399 18.1069 169.182 18.1069H155.811C155.594 18.1069 155.408 18.2507 155.357 18.4501L151.013 35.8638C150.979 35.9978 151.013 36.1384 151.101 36.2463C151.189 36.3542 151.325 36.4163 151.467 36.4163H154.54V42.6272C153.222 42.8429 152.216 43.9478 152.216 45.2783C152.216 46.7623 153.466 47.9719 155.008 47.9719C156.546 47.9719 157.8 46.7656 157.8 45.2783C157.8 43.9479 156.794 42.8429 155.476 42.6272V36.4163H160.098V69.847H156.099C155.842 69.847 155.631 70.0497 155.631 70.2981V75.6558C155.631 75.9042 155.842 76.1069 156.099 76.1069H168.904C169.162 76.1069 169.372 75.9042 169.372 75.6558V70.2981C169.372 70.0497 169.162 69.847 168.904 69.847H164.906V36.4163H173.533C173.675 36.4163 173.811 36.3541 173.899 36.2463C173.987 36.1384 174.021 35.9978 173.987 35.8638H173.98ZM156.865 45.2782C156.865 46.2654 156.032 47.0695 155.005 47.0695C153.982 47.0695 153.145 46.2654 153.145 45.2782C153.145 44.291 153.978 43.4836 155.005 43.4836C156.028 43.4836 156.865 44.2878 156.865 45.2782ZM157.651 35.5174H152.06L156.181 19.0033H159.305L157.651 35.5174ZM168.434 70.7498V75.2086H156.56V70.7498H168.434ZM161.026 69.8509V36.4201H163.968V69.8509H161.026ZM158.587 35.518L160.24 19.0039H164.757L166.411 35.518H158.587ZM167.346 35.518L165.693 19.0039H168.817L172.937 35.518H167.346Z" fill="white"/>
55
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M72.517 38.0331H71.3603C68.1145 38.0333 65.4744 40.6644 65.4744 43.8994L65.4777 43.9028V50.1013C66.8683 50.0544 68.2288 50.4638 69.2154 51.2625C70.303 52.145 70.8552 53.3902 70.8115 54.8634L70.7913 57.6858H72.517V58.6054H70.7214L70.6776 58.602C70.6743 58.602 70.3207 58.5752 70.0075 58.7497L69.9234 58.7866C68.5125 59.2396 67.6976 60.4377 67.3171 61.1727H72.517V62.0956H67.1698V65.8946C67.1765 66.0187 67.304 67.2469 69.5193 67.247H72.517V68.1733H69.5193C68.415 68.1733 67.6807 67.9014 67.1959 67.5491C67.2666 69.5392 67.3777 72.016 67.5528 75.0833H72.517V76.0095H67.1824C66.8591 76.08 66.2017 76.1069 64.7706 76.1069C64.141 76.1069 63.3595 76.1002 62.3933 76.0934C61.5178 76.0932 60.1648 75.2432 58.6127 67.8948C57.7035 63.5989 57.1269 58.9174 57.0057 56.9643C56.9518 56.1321 57.2853 55.4373 57.8509 54.8869C58.9182 53.5647 61.5146 50.6888 64.2184 50.2657C64.326 50.2389 64.4374 50.2154 64.5484 50.1952V43.8994C64.5484 40.1543 67.6026 37.1104 71.3603 37.1102L72.517 37.1094V38.0331ZM62.2266 54.2099C60.0177 54.3575 57.8357 55.3274 57.9334 56.9081C58.0512 58.8308 58.6203 63.4516 59.5193 67.7035C61.0514 74.9591 62.2637 75.1672 62.3984 75.1672L62.4017 75.168C64.0516 75.1815 65.8599 75.1781 66.631 75.1445C65.924 62.6721 66.2302 59.9628 66.2438 59.8513C66.2471 59.8345 66.4962 57.0188 65.0349 55.3845C64.3649 54.6361 63.4219 54.2401 62.2266 54.2099ZM68.6312 51.9773C67.5604 51.1081 65.944 50.7994 64.4154 51.1651L64.3783 51.1718H64.3749C62.9137 51.3933 61.4352 52.5008 60.2803 53.6049C60.8931 53.4338 61.5432 53.3264 62.1829 53.2861H62.2233C63.6946 53.3164 64.8734 53.8198 65.7252 54.7728C67.1797 56.4071 67.2102 58.8704 67.1765 59.6826C67.7186 58.9947 68.5034 58.2865 69.5976 57.9241C69.685 57.8772 69.7761 57.8402 69.8636 57.81L69.8872 54.8433C69.9242 53.6587 69.4864 52.6719 68.6312 51.9773Z" fill="white"/>
56
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M119.641 37.1069C123.399 37.107 126.453 40.1542 126.453 43.896V50.1919C126.564 50.212 126.675 50.2355 126.786 50.2624C129.49 50.6854 132.083 53.5613 133.151 54.8836H133.146C133.715 55.4374 134.045 56.1287 133.995 56.9643C133.877 58.9179 133.301 63.5992 132.392 67.8948C130.84 75.2444 129.489 76.0934 128.607 76.0934C127.641 76.1035 126.863 76.1069 126.233 76.1069C124.425 76.1069 123.849 76.0666 123.627 75.9458V76.0095L71.9048 76.0172V75.091L123.454 75.0833V75.0866C123.629 71.9791 123.74 69.4821 123.811 67.4786C123.329 67.8645 122.571 68.1732 121.393 68.1733L71.9048 68.181V67.2547L121.393 67.247C123.608 67.247 123.737 66.0187 123.743 65.8778V62.0956L71.9048 62.1033V61.1804L123.561 61.1727C123.167 60.4848 122.385 59.4074 121.136 58.8973L121.022 58.8302C120.69 58.5694 120.234 58.6018 120.227 58.602L120.187 58.6054L71.9048 58.6131V57.6935L120.166 57.6858C120.179 57.6825 120.193 57.6825 120.209 57.6825L120.189 54.85C120.142 53.3869 120.694 52.1417 121.785 51.2591C122.772 50.4604 124.129 50.051 125.523 50.0979V43.8994C125.523 40.6643 122.883 38.0331 119.637 38.0331L71.9048 38.0408V37.1146L119.641 37.1069ZM128.781 54.2015C127.586 54.2317 126.642 54.6279 125.972 55.3761C124.515 57.0088 124.759 59.8129 124.764 59.8563C124.777 59.9568 125.083 62.6651 124.376 75.1395C125.147 75.1697 126.952 75.1764 128.602 75.163C128.741 75.1628 129.957 74.9511 131.488 67.6993C132.387 63.4478 132.956 58.8269 133.074 56.9039V56.8997C133.171 55.3193 130.989 54.3492 128.781 54.2015ZM125.309 51.0141C124.205 51.0141 123.147 51.3497 122.373 51.9773C121.514 52.672 121.08 53.6586 121.117 54.8332L121.14 57.8436C121.275 57.8972 121.413 57.9711 121.544 58.0684V58.0718C122.578 58.5114 123.329 59.2464 123.841 59.9209C123.811 59.5283 123.632 56.6219 125.279 54.7728C126.127 53.8197 127.306 53.3197 128.781 53.2861H128.821C129.461 53.3264 130.111 53.4304 130.72 53.6016C129.562 52.4976 128.084 51.3934 126.626 51.1718L126.589 51.1651C126.164 51.0645 125.733 51.0141 125.309 51.0141Z" fill="white"/>
57
+ <path d="M119.873 48.6414V49.5643L71.9048 49.572V48.6491L119.873 48.6414Z" fill="white"/>
58
+ <path d="M72.517 49.5643H71.1246V48.6414H72.517V49.5643Z" fill="white"/>
59
+ <path d="M118.804 27.8127L119.141 27.4758V12.7358L118.804 12.3989L93.6847 12.4014L93.3478 12.7383V27.4782L93.6847 27.8151H118.804V27.8127ZM94.019 13.0727H118.468V22.8619L111.671 17.8428H111.273L104.905 22.5469L100.667 19.4173H100.269L94.0193 24.0336L94.019 13.0727ZM94.019 24.7779L94.0605 24.8341L100.466 20.1031L107.189 25.0709L107.587 24.5314L105.466 22.9641L111.469 18.5309L118.465 23.6989V27.1434L94.0191 27.141L94.019 24.7779Z" fill="white"/>
60
+ <path d="M105.504 19.1883C106.701 19.1883 107.675 18.2143 107.675 17.0181C107.675 15.8219 106.701 14.8478 105.504 14.8478C104.308 14.8478 103.334 15.8219 103.334 17.0181C103.334 18.2143 104.308 19.1883 105.504 19.1883ZM105.504 15.5217C106.329 15.5217 107.003 16.193 107.003 17.0205C107.003 17.8456 106.332 18.5194 105.504 18.5194C104.679 18.5194 104.005 17.8481 104.005 17.0205C104.005 16.1954 104.677 15.5217 105.504 15.5217Z" fill="white"/>
61
+ <path d="M84.7326 27.9509L85.1594 27.5241V13.2351L84.7326 12.8083H72.4848L72.058 13.2351V27.5241L72.4848 27.9509H84.7326ZM72.9084 13.6619H84.3059V27.1006H78.6212V23.9861C80.0347 23.7788 81.1234 22.5633 81.1234 21.0943V21.0665C81.8192 22.0995 82.9389 22.7706 84.1976 22.7706V21.9201C82.5615 21.9201 81.2285 20.4293 81.2285 18.5953C81.2285 16.7612 82.5615 15.2705 84.1976 15.2705V14.42C82.0914 14.42 80.378 16.2942 80.378 18.5953C80.378 18.7994 80.3934 19.0004 80.4182 19.1953C79.88 18.5674 79.0852 18.1684 78.1975 18.1684C76.583 18.1684 75.2717 19.4798 75.2717 21.0943C75.2717 22.5634 76.3604 23.7788 77.7739 23.986V27.1005H72.9119V13.6619L72.9084 13.6619ZM78.1971 23.1694C77.0528 23.1694 76.1218 22.2385 76.1218 21.0941C76.1218 19.9498 77.0528 19.0188 78.1971 19.0188C79.3415 19.0188 80.2724 19.9498 80.2724 21.0941C80.2724 22.2385 79.3415 23.1694 78.1971 23.1694Z" fill="white"/>
62
+ </g>
63
+ <ellipse class="scan-floor-2__spot" cx="113" cy="97" rx="30" ry="13" fill="url(#scan-floor-2-s)"/>
64
+ <g fill="#5B6BFF"><g class="scan-floor-2__d0"><circle cx="37.04" cy="81" r="1.4"/><circle cx="31.66" cy="88" r="1.61"/><circle cx="25.52" cy="96" r="1.85"/><circle cx="40.1" cy="96" r="1.85"/><circle cx="18.6" cy="105" r="2.13"/><circle cx="34.34" cy="105" r="2.13"/><circle cx="11.69" cy="114" r="2.4"/><circle cx="28.57" cy="114" r="2.4"/></g><g class="scan-floor-2__d1"><circle cx="45.22" cy="88" r="1.61"/><circle cx="45.46" cy="114" r="2.4"/></g><g class="scan-floor-2__d2"><circle cx="49.7" cy="81" r="1.4"/></g><g class="scan-floor-2__d3"><circle cx="50.07" cy="105" r="2.13"/></g><g class="scan-floor-2__d4"><circle cx="58.78" cy="88" r="1.61"/><circle cx="54.68" cy="96" r="1.85"/></g><g class="scan-floor-2__d5"><circle cx="62.36" cy="81" r="1.4"/><circle cx="65.8" cy="105" r="2.13"/><circle cx="62.34" cy="114" r="2.4"/></g><g class="scan-floor-2__d6"><circle cx="75.02" cy="81" r="1.4"/><circle cx="72.33" cy="88" r="1.61"/><circle cx="69.26" cy="96" r="1.85"/><circle cx="79.23" cy="114" r="2.4"/></g><g class="scan-floor-2__d7"><circle cx="87.68" cy="81" r="1.4"/><circle cx="85.89" cy="88" r="1.61"/><circle cx="83.84" cy="96" r="1.85"/><circle cx="81.53" cy="105" r="2.13"/></g><g class="scan-floor-2__d8"><circle cx="100.34" cy="81" r="1.4"/><circle cx="99.44" cy="88" r="1.61"/><circle cx="98.42" cy="96" r="1.85"/><circle cx="97.27" cy="105" r="2.13"/><circle cx="96.11" cy="114" r="2.4"/></g><g class="scan-floor-2__d9"><circle cx="113" cy="81" r="1.4"/><circle cx="113" cy="88" r="1.61"/><circle cx="113" cy="96" r="1.85"/><circle cx="113" cy="105" r="2.13"/><circle cx="113" cy="114" r="2.4"/></g><g class="scan-floor-2__d10"><circle cx="125.66" cy="81" r="1.4"/><circle cx="126.56" cy="88" r="1.61"/><circle cx="127.58" cy="96" r="1.85"/><circle cx="128.73" cy="105" r="2.13"/><circle cx="129.89" cy="114" r="2.4"/></g><g class="scan-floor-2__d11"><circle cx="138.32" cy="81" r="1.4"/><circle cx="140.11" cy="88" r="1.61"/><circle cx="142.16" cy="96" r="1.85"/><circle cx="144.47" cy="105" r="2.13"/></g><g class="scan-floor-2__d12"><circle cx="150.98" cy="81" r="1.4"/><circle cx="153.67" cy="88" r="1.61"/><circle cx="156.74" cy="96" r="1.85"/><circle cx="146.77" cy="114" r="2.4"/></g><g class="scan-floor-2__d13"><circle cx="163.64" cy="81" r="1.4"/><circle cx="167.22" cy="88" r="1.61"/><circle cx="160.2" cy="105" r="2.13"/><circle cx="163.66" cy="114" r="2.4"/></g><g class="scan-floor-2__d14"><circle cx="176.3" cy="81" r="1.4"/><circle cx="171.32" cy="96" r="1.85"/><circle cx="175.93" cy="105" r="2.13"/></g><g class="scan-floor-2__d15"><circle cx="180.78" cy="88" r="1.61"/><circle cx="180.54" cy="114" r="2.4"/></g><g class="scan-floor-2__d16"><circle cx="185.9" cy="96" r="1.85"/></g><g class="scan-floor-2__d17"><circle cx="188.96" cy="81" r="1.4"/><circle cx="194.34" cy="88" r="1.61"/><circle cx="200.48" cy="96" r="1.85"/><circle cx="191.66" cy="105" r="2.13"/><circle cx="207.4" cy="105" r="2.13"/><circle cx="197.43" cy="114" r="2.4"/><circle cx="214.31" cy="114" r="2.4"/></g></g>
65
+ <g class="scan-floor-2__hand"><rect x="100.189" y="63.2902" width="30.566" height="60.4042" fill="black"/><path d="M100.801 107.488V106.028C100.424 106.337 99.9504 106.56 99.3897 106.782C99.9117 106.966 100.395 107.198 100.801 107.488Z" fill="white"/><path d="M98.3553 105.844C100.231 105.177 100.801 104.974 100.801 102.007C100.801 100.943 98.4617 99.3193 96.799 98.4977C96.77 98.488 96.7507 98.4687 96.7217 98.4493C96.2093 98.1013 94.7883 97.328 93.6283 97.328C93.4543 97.328 93.2803 97.3473 93.1256 97.386C92.6906 97.4923 92.362 97.763 92.13 98.2077C90.8443 100.644 91.5016 102.326 92.536 103.08L92.5553 103.099C94.2663 104.491 97.205 106.26 98.3553 105.844Z" fill="white"/><path d="M97.5144 86.4143V78.5746C97.0697 78.2846 96.132 77.6756 95.0783 77.1439C92.6617 75.9356 91.8013 76.1869 91.5403 76.3512C90.7573 76.8442 90.2353 77.5982 90.0613 78.4779C89.8777 79.4059 90.1097 80.3823 90.7187 81.2426C91.115 81.8033 92.1977 82.8859 95.0783 84.8483C96.0063 85.4766 96.886 86.0373 97.5144 86.4239V86.4143Z" fill="white"/><path d="M99.0514 98.3624C99.2351 98.4784 99.4187 98.604 99.6024 98.7394C100.066 99.0777 100.472 99.3967 100.801 99.7157V96.8834C100.472 97.386 100.057 97.8307 99.5541 98.1207C99.3994 98.2077 99.2351 98.2947 99.0417 98.3624H99.0514Z" fill="white"/><path d="M99.9697 112.311C100.511 111.615 100.782 110.736 100.791 110.03V109.924C100.791 109.624 100.743 109.363 100.646 109.17C100.095 107.971 97.7463 107.584 96.0257 107.294C95.8033 107.256 95.5907 107.217 95.378 107.188C93.986 106.946 93.5027 107.942 93.4253 108.116C92.9903 109.914 93.0193 111.074 93.522 111.847C94.0053 112.601 95.0397 113.123 96.683 113.433C98.4133 113.761 99.4284 113.007 99.9697 112.311Z" fill="white"/><path d="M97.0504 88.8117H97.0407C96.6347 88.3573 96.1997 88.135 95.6971 88.135C94.8174 88.135 93.9667 88.8213 93.5994 89.2177C93.4447 89.382 92.7004 90.281 92.797 91.6634C92.8937 93.1134 93.8411 94.602 95.6101 96.1004C96.9537 97.241 98.0654 97.56 98.9257 97.0574C100.202 96.3034 100.656 93.9834 100.521 93.3454C100.424 92.862 99.3994 91.209 97.0504 88.802V88.8117Z" fill="white"/><path d="M147.549 129.905C147.472 129.605 147.385 129.325 147.298 129.025C146.824 127.392 146.321 125.71 147.027 122.558C147.849 118.865 146.099 111.528 145.258 108C144.746 105.854 144.514 104.462 144.349 103.447C144.146 102.2 144.03 101.504 143.586 100.547C142.919 99.0874 142.677 94.9694 142.484 90.8804C142.445 90.1167 142.416 89.4594 142.387 89.063C142.261 87.3327 141.575 86.3177 140.27 84.945C138.675 83.263 137.467 77.5307 137.254 76.1966C137.235 76.0903 137.206 75.868 136.771 75.868H136.751C135.775 75.868 134.219 76.9603 133.842 79.029C133.194 82.509 133.89 87.961 134.615 90.4067C135.176 92.2917 134.654 95.5011 134.228 98.0821C134.025 99.3194 133.851 100.392 133.851 100.992V120.886C133.851 121.988 133.532 123.022 132.991 123.892C133.136 124.337 133.503 125.333 134.228 126.299C134.431 126.57 134.373 126.957 134.103 127.169C133.987 127.256 133.861 127.295 133.735 127.295C133.552 127.295 133.358 127.208 133.242 127.044C132.691 126.309 132.324 125.574 132.082 125.004C131.058 125.98 129.675 126.58 128.158 126.58H110.41C111.328 127.788 113.087 129.857 115.156 131.142C118.201 133.037 121.343 135.057 123.489 137.145C125.209 138.827 125.944 141.592 126.186 142.752L148.854 137.706C149.338 135.289 147.974 131.558 147.549 129.895V129.905Z" fill="white"/><path d="M132.614 120.895V86.4723C132.314 83.9493 132.218 81.059 132.614 78.8743V65.5632C132.614 63.1079 130.613 61.1069 128.158 61.1069H103.218C100.762 61.1069 98.7614 63.1079 98.7614 65.5632V88.8213C99.0417 89.121 99.3607 89.4883 99.6894 89.875C100.163 90.4357 100.53 90.9093 100.811 91.3057V65.5632C100.811 64.2292 101.893 63.1465 103.227 63.1465H128.167C129.501 63.1465 130.584 64.2292 130.584 65.5632V120.895C130.584 122.229 129.501 123.312 128.167 123.312H103.218C101.884 123.312 100.801 122.229 100.801 120.895V113.259C100.24 113.906 99.5444 114.351 98.7614 114.583V120.905C98.7614 123.36 100.762 125.361 103.218 125.361H128.158C130.613 125.361 132.614 123.36 132.614 120.905V120.895Z" fill="white"/></g>
66
+ </svg>