/* WTS v3 animated illustrations. Generated from site-v3/anim/. Do not edit by hand. */
.wt .wt-anim--brand-build { --cycle: 14s; }
.wt .wt-anim--brand-build [class] { transform-box: fill-box; transform-origin: 50% 50%; }
.wt .wt-anim--brand-build .s-prog, .wt .wt-anim--brand-build .s-panel, .wt .wt-anim--brand-build .s-hl { transform-origin: 0 50%; }
.wt .wt-anim--brand-build .s-cart, .wt .wt-anim--brand-build .s-drop { transform-origin: 50% 100%; }
.wt .wt-anim--brand-build .s-toast { transform-origin: 50% 0; }
.wt .wt-anim--brand-build .s-press { transform-origin: 0 0; }
.wt .wt-anim--brand-build .s-prog, .wt .wt-anim--brand-build .s-ms, .wt .wt-anim--brand-build .s-lift, .wt .wt-anim--brand-build .s-spark1, .wt .wt-anim--brand-build .s-spark2, .wt .wt-anim--brand-build .s-spark3, .wt .wt-anim--brand-build .s-fs, .wt .wt-anim--brand-build .s-ripple, .wt .wt-anim--brand-build .s-speed { opacity: 0; }
.wt .wt-anim--brand-build .s-prog { animation: brand-build-prog var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-lift { animation: brand-build-lift var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-mx { animation: brand-build-mx var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-my { animation: brand-build-my var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-ms { animation: brand-build-ms var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-logo { animation: brand-build-logo var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-spark3 { animation: brand-build-spark3 var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-name { animation: brand-build-name var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-cart { animation: brand-build-cart var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-panel { animation: brand-build-panel var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-cut1 { animation: brand-build-cut1 var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-cut2 { animation: brand-build-cut2 var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-hl { animation: brand-build-hl var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-cta { animation: brand-build-cta var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-card1 { animation: brand-build-card1 var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-card2 { animation: brand-build-card2 var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-card3 { animation: brand-build-card3 var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-spark1 { animation: brand-build-spark1 var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-spark2 { animation: brand-build-spark2 var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-cur { animation: brand-build-cur var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-cury { animation: brand-build-cury var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-press { animation: brand-build-press var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-ripple { animation: brand-build-ripple var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-added { animation: brand-build-added var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-fx { animation: brand-build-fx var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-fy { animation: brand-build-fy var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-fs { animation: brand-build-fs var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-badge { animation: brand-build-badge var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-toast { animation: brand-build-toast var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-ship { animation: brand-build-ship var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-bshadow { animation: brand-build-bshadow var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-drop { animation: brand-build-drop var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-sticker { animation: brand-build-sticker var(--cycle) linear infinite both; }
.wt .wt-anim--brand-build .s-speed { animation: brand-build-speed var(--cycle) linear infinite both; }
@keyframes brand-build-lift {
0%,3.6%{opacity:0;transform:scale(.8);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
3.7%{opacity:.9;transform:scale(.8)}
8%{opacity:0;transform:scale(1.9)}
100%{opacity:0;transform:scale(.8)} }
@keyframes brand-build-mx {
0%,5.4%{transform:translateX(0);animation-timing-function:cubic-bezier(.3,.6,.5,1)}
9%{transform:translateX(40px);animation-timing-function:cubic-bezier(.5,0,.5,1)}
12.2%,12.6%{transform:translateX(28px)}
13.4%,100%{transform:translateX(0)} }
@keyframes brand-build-my {
0%,5.4%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.3,1)}
12.2%,12.6%{transform:translateY(-342px)}
13.4%,100%{transform:translateY(0)} }
@keyframes brand-build-ms {
0%,4.9%{opacity:0;transform:scale(1)}
5%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
6.6%{opacity:1;transform:scale(1.2);animation-timing-function:ease-in-out}
12.2%{opacity:1;transform:scale(.935)}
12.4%,100%{opacity:0;transform:scale(1)} }
@keyframes brand-build-logo {
0%,12.2%{opacity:0;transform:scale(1)}
12.3%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
13.3%{transform:scale(1.16);animation-timing-function:cubic-bezier(.4,0,.4,1)}
14.6%,95%{opacity:1;transform:scale(1)}
97.5%,100%{opacity:0;transform:scale(1)} }
@keyframes brand-build-spark3 {
0%,12.2%{opacity:0;transform:scale(0) rotate(0);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
14.2%{opacity:1;transform:scale(1) rotate(45deg);animation-timing-function:cubic-bezier(.6,0,.8,.2)}
17%,100%{opacity:0;transform:scale(0) rotate(90deg)} }
@keyframes brand-build-prog {
0%,4%{opacity:1;transform:scaleX(0);animation-timing-function:cubic-bezier(.45,0,.25,1)}
40%{opacity:1;transform:scaleX(1)}
44%{opacity:0;transform:scaleX(1)}
97%{opacity:0;transform:scaleX(0)}
100%{opacity:1;transform:scaleX(0)} }
@keyframes brand-build-name {
0%,12.6%{opacity:0;transform:translateX(-14px);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
17%,95%{opacity:1;transform:translateX(0)}
97.5%{opacity:0;transform:translateX(0)}
100%{opacity:0;transform:translateX(-14px)} }
@keyframes brand-build-cart {
0%,15%{opacity:0;transform:rotate(0)}
18%{opacity:1}
61.6%{transform:rotate(0);animation-timing-function:ease-in-out}
62.8%{transform:rotate(-10deg);animation-timing-function:ease-in-out}
64%{transform:rotate(7deg);animation-timing-function:ease-in-out}
65.2%{transform:rotate(-3deg);animation-timing-function:ease-in-out}
66.4%,95%{opacity:1;transform:rotate(0)}
97.5%,100%{opacity:0;transform:rotate(0)} }
@keyframes brand-build-panel {
0%,16.9%{opacity:0;transform:scaleX(0)}
17%{opacity:1;transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
22.5%,94%{opacity:1;transform:scaleX(1)}
96.5%{opacity:0;transform:scaleX(1)}
100%{opacity:0;transform:scaleX(0)} }
@keyframes brand-build-cut1 {
0%,21%{opacity:0;transform:translateY(-26px);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
22.5%{opacity:1}
26%,94%{opacity:1;transform:translateY(0)}
96.5%{opacity:0;transform:translateY(0)}
100%{opacity:0;transform:translateY(-26px)} }
@keyframes brand-build-cut2 {
0%,23.5%{opacity:0;transform:translateY(-26px);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
25%{opacity:1}
28.5%,94%{opacity:1;transform:translateY(0)}
96.5%{opacity:0;transform:translateY(0)}
100%{opacity:0;transform:translateY(-26px)} }
@keyframes brand-build-hl {
0%,23.9%{opacity:0;transform:scaleX(0)}
24%{opacity:1;transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
29%,94%{opacity:1;transform:scaleX(1)}
96.5%{opacity:0;transform:scaleX(1)}
100%{opacity:0;transform:scaleX(0)} }
@keyframes brand-build-cta {
0%,27.5%{opacity:0;transform:scale(.5);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
31%,94%{opacity:1;transform:scale(1)}
96.5%{opacity:0;transform:scale(1)}
100%{opacity:0;transform:scale(.5)} }
@keyframes brand-build-card1 {
0%,30%{opacity:0;transform:scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
31.5%{opacity:1}
34%,93%{opacity:1;transform:scale(1)}
95.5%{opacity:0;transform:scale(1)}
100%{opacity:0;transform:scale(.9)} }
@keyframes brand-build-card2 {
0%,33%{opacity:0;transform:scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
34.5%{opacity:1}
37%,93%{opacity:1;transform:scale(1)}
95.5%{opacity:0;transform:scale(1)}
100%{opacity:0;transform:scale(.9)} }
@keyframes brand-build-card3 {
0%,36%{opacity:0;transform:scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
37.5%{opacity:1}
40%,93%{opacity:1;transform:scale(1)}
95.5%{opacity:0;transform:scale(1)}
100%{opacity:0;transform:scale(.9)} }
@keyframes brand-build-spark1 {
0%,40.5%{opacity:0;transform:scale(0) rotate(0);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
43.5%{opacity:1;transform:scale(1) rotate(45deg);animation-timing-function:cubic-bezier(.6,0,.8,.2)}
47.5%,100%{opacity:0;transform:scale(0) rotate(90deg)} }
@keyframes brand-build-spark2 {
0%,42%{opacity:0;transform:scale(0) rotate(0);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
45%{opacity:1;transform:scale(1) rotate(45deg);animation-timing-function:cubic-bezier(.6,0,.8,.2)}
49%,100%{opacity:0;transform:scale(0) rotate(90deg)} }
@keyframes brand-build-cur {
0%,46%{opacity:0;transform:translateX(-160px);animation-timing-function:cubic-bezier(.65,0,.35,1)}
47.5%{opacity:1}
52.5%,93%{opacity:1;transform:translateX(0)}
95.5%{opacity:0;transform:translateX(6px)}
100%{opacity:0;transform:translateX(-160px)} }
@keyframes brand-build-cury {
0%,46%{transform:translateY(120px);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
52.5%{transform:translateY(0);animation-timing-function:ease-in-out}
59%{transform:translateY(0);animation-timing-function:ease-in-out}
72%{transform:translateY(8px);animation-timing-function:ease-in-out}
86%,93%{transform:translateY(4px)}
95.5%{transform:translateY(12px)}
100%{transform:translateY(120px)} }
@keyframes brand-build-press {
0%,53%{transform:scale(1);animation-timing-function:cubic-bezier(.4,0,.6,1)}
53.9%{transform:scale(.84);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
55.5%,100%{transform:scale(1)} }
@keyframes brand-build-ripple {
0%,53.7%{opacity:0;transform:scale(.6)}
53.8%{opacity:.9;transform:scale(.6);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
58.5%,100%{opacity:0;transform:scale(2.3)} }
@keyframes brand-build-added {
0%,54%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
57%,93%{opacity:1;transform:scale(1)}
95.5%{opacity:0;transform:scale(1)}
100%{opacity:0;transform:scale(.3)} }
@keyframes brand-build-fx {
0%,55.4%{transform:translateX(0);animation-timing-function:cubic-bezier(.45,0,.7,1)}
62%,64%{transform:translateX(164px)}
65%,100%{transform:translateX(0)} }
@keyframes brand-build-fy {
0%,55.4%{transform:translateY(0);animation-timing-function:cubic-bezier(.25,.7,.45,1)}
62%,64%{transform:translateY(-285px)}
65%,100%{transform:translateY(0)} }
@keyframes brand-build-fs {
0%,55%{opacity:0;transform:scale(.7);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
56.4%{opacity:1;transform:scale(1.08);animation-timing-function:ease-in}
61.4%{opacity:1;transform:scale(.55)}
62.2%,100%{opacity:0;transform:scale(.4)} }
@keyframes brand-build-badge {
0%,61.8%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
62.6%{opacity:1}
65.2%,95%{opacity:1;transform:scale(1)}
97.5%{opacity:0;transform:scale(.4)}
100%{opacity:0;transform:scale(0)} }
@keyframes brand-build-toast {
0%,65.5%{opacity:0;transform:translateY(-16px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
70%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:ease-in-out}
79%{transform:translateY(-3px) scale(1);animation-timing-function:ease-in-out}
88%,93%{opacity:1;transform:translateY(0) scale(1)}
96%{opacity:0;transform:translateY(-12px) scale(1)}
100%{opacity:0;transform:translateY(-16px) scale(.96)} }
@keyframes brand-build-drop {
0%,71%{opacity:0;transform:translateY(-196px) scale(.62);animation-timing-function:cubic-bezier(.5,0,.9,.5)}
72.2%{opacity:1}
76%{transform:translateY(0) scale(1, 1);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
77.2%{transform:translateY(0) scale(1.08, .88);animation-timing-function:cubic-bezier(.3,0,.3,1)}
78.6%{transform:translateY(0) scale(.98, 1.04);animation-timing-function:cubic-bezier(.3,0,.3,1)}
80%,94%{opacity:1;transform:translateY(0) scale(1, 1)}
94.2%{opacity:0;transform:translateY(0) scale(1, 1)}
100%{opacity:0;transform:translateY(-196px) scale(.62)} }
@keyframes brand-build-bshadow {
0%,71%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.5,0,.9,.5)}
76%{opacity:.14;transform:scale(1)}
77.2%{transform:scale(1.08, 1)}
79%,94%{opacity:.14;transform:scale(1)}
94.2%,100%{opacity:0;transform:scale(.3)} }
@keyframes brand-build-sticker {
0%,78.8%{opacity:0;transform:scale(1.7);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
79.6%{opacity:1}
82%,94%{opacity:1;transform:scale(1)}
94.2%{opacity:0;transform:scale(1)}
100%{opacity:0;transform:scale(1.7)} }
@keyframes brand-build-ship {
0%,88.5%{transform:translateX(0);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
90%{transform:translateX(-9px);animation-timing-function:cubic-bezier(.55,0,.85,.35)}
94%,95%{transform:translateX(250px)}
96%,100%{transform:translateX(0)} }
@keyframes brand-build-speed {
0%,90.2%{opacity:0}
91.2%{opacity:1}
93.6%,100%{opacity:0} }