/* WebDex — motion for the service scenes drawn by js/art.js */
.scene{display:block;width:100%;height:auto;overflow:visible}
.scene text{font-family:var(--body)}
.scene .pp{font-family:var(--head)}
.scene *{transform-box:fill-box;transform-origin:center}
/* scenes only animate while their card/row has been revealed */
.svc:not(.in) .scene *,.svc-art:not(.in) .scene *{animation-play-state:paused}

.a-bob{animation:aBob 6s ease-in-out infinite}
.a-bob2{animation:aBob 7s ease-in-out infinite -2s}
.a-bob3{animation:aBob 8s ease-in-out infinite -4s}
@keyframes aBob{50%{transform:translateY(-8px)}}
.a-spin{animation:aSpin 40s linear infinite}
@keyframes aSpin{to{transform:rotate(360deg)}}

/* social */
.a-feed{animation:aFeed 6s var(--ease) infinite}
@keyframes aFeed{0%,35%{transform:translateY(0)}45%,80%{transform:translateY(-108px)}90%,100%{transform:translateY(-216px)}}
.a-pop{animation:aPop 6s ease-out infinite}
@keyframes aPop{0%{opacity:0;transform:scale(.2)}8%{opacity:1;transform:scale(1.25)}14%{transform:scale(1)}26%{opacity:1;transform:scale(1)}34%,100%{opacity:0;transform:scale(1.35)}}

/* ads */
.a-bar{transform-origin:50% 100%;animation:aBar 4s var(--ease) infinite both}
@keyframes aBar{0%{transform:scaleY(.1)}30%,85%{transform:scaleY(1)}100%{transform:scaleY(.1)}}
.a-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:aDraw 5s ease-in-out infinite}
.a-draw.d2{animation-delay:.6s}
@keyframes aDraw{0%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.a-hit{animation:aHit 4s var(--ease) infinite}
@keyframes aHit{0%{transform:translate(20px,-20px);opacity:0}15%{opacity:1}30%,82%{transform:none;opacity:1}100%{transform:none;opacity:0}}

/* branding */
.a-fade{animation:aFade 5s ease infinite}
@keyframes aFade{0%,40%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
.a-sw{animation:aSw 5s var(--ease) infinite both}
@keyframes aSw{0%{transform:scale(0)}14%,84%{transform:scale(1)}96%,100%{transform:scale(0)}}
.a-orbit-c{transform-box:view-box;transform-origin:200px 124px;animation:aSpin 6s linear infinite}

/* content */
.a-type{transform-origin:0 50%;animation:aType 6s ease-out infinite both}
@keyframes aType{0%{transform:scaleX(0)}10%,80%{transform:scaleX(1);opacity:1}92%,100%{transform:scaleX(1);opacity:0}}
.a-blink{animation:aBlink 1s steps(1) infinite}
@keyframes aBlink{50%{opacity:0}}

/* video */
.a-ring{animation:aRing 2.2s ease-out infinite}
@keyframes aRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.a-head{animation:aHead 5s linear infinite}
@keyframes aHead{to{transform:translateX(286px)}}
.a-wave{animation:aWave 1.2s ease-in-out infinite}
@keyframes aWave{50%{transform:scaleY(.35)}}
.a-tw{animation:aTw 3s ease-in-out infinite}
@keyframes aTw{50%{transform:scale(.55) rotate(45deg);opacity:.6}}

/* web */
.a-asm{animation:aAsm 6s var(--ease) infinite both}
@keyframes aAsm{0%{opacity:0;transform:translateY(16px)}10%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
.a-cursor{transform-origin:0 0;animation:aCur 6s var(--ease) infinite}
@keyframes aCur{0%{transform:translate(150px,80px);opacity:0}12%{opacity:1}40%{transform:none}46%{transform:scale(.85)}52%{transform:none}85%{opacity:1;transform:none}100%{opacity:0;transform:translate(150px,80px)}}
.a-ripple{animation:aRip 6s ease-out infinite}
@keyframes aRip{0%,44%{transform:scale(0);opacity:0}46%{transform:scale(.3);opacity:.8}62%{transform:scale(1.8);opacity:0}100%{opacity:0}}

/* shopify */
.a-toast{animation:aToast 6s var(--ease) infinite}
@keyframes aToast{0%,38%{transform:translateX(220px);opacity:0}48%,86%{transform:none;opacity:1}96%,100%{transform:translateY(10px);opacity:0}}
.a-bump{animation:aBump 6s var(--ease) infinite}
@keyframes aBump{0%,46%{transform:scale(1)}50%{transform:scale(1.45)}55%,100%{transform:scale(1)}}
.a-press{animation:aPress 6s ease infinite}
@keyframes aPress{0%,40%{transform:scale(1)}43%{transform:scale(.9)}46%,100%{transform:scale(1)}}

/* app */
.a-swipe{animation:aSwipe 8s var(--ease) infinite}
@keyframes aSwipe{0%,22%{transform:translateX(0)}30%,52%{transform:translateX(-106px)}60%,82%{transform:translateX(-212px)}90%,100%{transform:translateX(-318px)}}
.a-tap{fill:#8fd0d4;animation:aTap 2.6s ease-out infinite}
@keyframes aTap{0%{transform:scale(.2);opacity:.8}70%,100%{transform:scale(1.8);opacity:0}}

/* seo */
.a-unveil{transform-origin:100% 50%;animation:aUnveil 7s steps(18,end) infinite}
@keyframes aUnveil{0%,6%{transform:scaleX(1)}32%,92%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.a-up{animation:aUp 7s var(--ease) infinite}
@keyframes aUp{0%,35%{transform:translateY(120px)}50%,88%{transform:translateY(0)}100%{transform:translateY(120px)}}
.a-dn{animation:aDn 7s var(--ease) infinite}
@keyframes aDn{0%,35%{transform:none}50%,88%{transform:translateY(60px)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  .a-unveil{display:none}
  .a-up{transform:none}
  .a-dn{transform:translateY(60px)}
}