/* Crest animation. Two styles: class="sting" (classic draw) or class="impact" (ball impact) on the <svg>. */

.sting *{transform-box:fill-box}
.crest-anim{width:100%;height:100%;display:block;overflow:visible}
.sting #Outer-ring circle{stroke-dasharray:792;stroke-dashoffset:792;animation:draw 1.1s cubic-bezier(.6,0,.2,1) .15s both}
.sting #Inner-ring circle{stroke-dasharray:516;stroke-dashoffset:516;animation:draw .9s cubic-bezier(.6,0,.2,1) .45s both}
.sting #F-left{animation:fl .7s cubic-bezier(.2,.8,.2,1) .9s both}
.sting #F-right{animation:fr .7s cubic-bezier(.2,.8,.2,1) .9s both}
.sting #Ampersand{transform-origin:center;animation:amp .8s cubic-bezier(.3,1.5,.5,1) 1.3s both}
.sting #Fairway-line path{stroke-dasharray:140;stroke-dashoffset:140;animation:draw .8s ease-out 1.75s both}
.sting #Ball circle{animation:ball .9s cubic-bezier(.2,.7,.25,1) 1.75s both}
.sting #Flag-pole{transform-origin:50% 100%;animation:pole .45s cubic-bezier(.2,.8,.2,1) 2.35s both}
.sting #Pennant{transform-origin:0% 50%;animation:pennant .9s cubic-bezier(.3,1.6,.5,1) 2.65s both}
.sting #Dots circle{transform-origin:center;animation:pop .5s cubic-bezier(.3,1.8,.5,1) 2.9s both}
.sting #Arc-text-top{animation:fade .9s ease-out 2.2s both}
.sting #Arc-text-bottom{animation:fade .9s ease-out 2.45s both}
.sting #Wordmark{animation:rise .9s cubic-bezier(.2,.8,.2,1) 3.05s both}
.sting #Slogan{animation:rise .9s cubic-bezier(.2,.8,.2,1) 3.35s both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fl{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes fr{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes amp{from{opacity:0;transform:scale(.3) rotate(-35deg)}to{opacity:1;transform:none}}
@keyframes ball{0%{opacity:0;transform:translateX(-118px)}15%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pole{from{transform:scaleY(0)}to{transform:none}}
@keyframes pennant{0%{transform:scaleX(0)}55%{transform:scaleX(1.15) skewY(-6deg)}75%{transform:scaleX(.95) skewY(3deg)}100%{transform:none}}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.sting *{animation-duration:.01s!important;animation-delay:0s!important}}

.sting #Impact-fx{display:none}
svg.impact{animation:shake .38s linear .63s both}
.impact *{transform-box:fill-box}
.impact #Flash{transform-origin:center;animation:flash .5s ease-out .63s both}
.impact #Shock circle{transform-origin:center;animation:shock 1s cubic-bezier(.1,.7,.3,1) .63s both}
.impact #Shock circle:nth-child(2){animation-delay:.75s}
.impact #Shock circle:nth-child(3){animation-delay:.87s}
.impact #Sparks circle{animation:spark .75s cubic-bezier(.1,.8,.3,1) .63s both}
.impact #Ball circle{transform-origin:center;animation:balli 1.8s linear 0s both}
.impact #Outer-ring circle{transform-origin:center;animation:ringpop .8s cubic-bezier(.2,.9,.3,1) .66s both}
.impact #Inner-ring circle{transform-origin:center;animation:ringpop .8s cubic-bezier(.2,.9,.3,1) .74s both}
.impact #F-left{transform-origin:center;animation:fli .55s cubic-bezier(.2,1.4,.4,1) .8s both}
.impact #F-right{transform-origin:center;animation:fri .55s cubic-bezier(.2,1.4,.4,1) .8s both}
.impact #Ampersand{transform-origin:center;animation:amp .7s cubic-bezier(.3,1.5,.5,1) 1s both}
.impact #Fairway-line path{stroke-dasharray:140;stroke-dashoffset:140;animation:draw .7s ease-out 1.15s both}
.impact #Arc-text-top{animation:fade .8s ease-out 1.5s both}
.impact #Arc-text-bottom{animation:fade .8s ease-out 1.7s both}
.impact #Flag-pole{transform-origin:50% 100%;animation:pole .4s cubic-bezier(.2,.8,.2,1) 1.9s both}
.impact #Pennant{transform-origin:0% 50%;animation:pennant .9s cubic-bezier(.3,1.6,.5,1) 2.15s both}
.impact #Dots circle{transform-origin:center;animation:pop .5s cubic-bezier(.3,1.8,.5,1) 2.4s both}
.impact #Wordmark{animation:rise .9s cubic-bezier(.2,.8,.2,1) 2.6s both}
.impact #Slogan{animation:rise .9s cubic-bezier(.2,.8,.2,1) 2.9s both}
@keyframes shake{0%,100%{transform:none}15%{transform:translate(-9px,6px)}35%{transform:translate(7px,-5px)}55%{transform:translate(-4px,3px)}75%{transform:translate(2px,-2px)}}
@keyframes flash{0%{opacity:0;transform:scale(.1)}4%{opacity:.4}100%{opacity:0;transform:scale(1.6)}}
@keyframes shock{0%{opacity:0;transform:scale(.04)}4%{opacity:.95}100%{opacity:0;transform:scale(1.3)}}
@keyframes spark{0%{opacity:0;transform:none}6%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes balli{0%{opacity:0;transform:translate(80px,-240px) scale(8);animation-timing-function:cubic-bezier(.55,0,1,.6)}8%{opacity:1}35%{transform:translate(-65px,-36px) scale(1.9,1.1);animation-timing-function:ease-out}41%{transform:translate(-65px,-36px) scale(1.2,.7)}48%{transform:translate(-65px,-36px) scale(1);animation-timing-function:cubic-bezier(.2,.6,.4,1)}66%{transform:translate(-34px,-72px);animation-timing-function:cubic-bezier(.6,0,.9,.5)}82%{transform:translate(-6px,0) scale(1.15,.85);animation-timing-function:ease-out}91%{transform:translate(-2px,-9px)}100%{opacity:1;transform:none}}
@keyframes ringpop{0%{opacity:0;transform:scale(.15)}60%{opacity:1;transform:scale(1.07)}80%{transform:scale(.985)}100%{opacity:1;transform:none}}
@keyframes fli{from{opacity:0;transform:translateX(34px) scale(.5)}to{opacity:1;transform:none}}
@keyframes fri{from{opacity:0;transform:translateX(-34px) scale(.5)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.impact,.impact *{animation-duration:.01s!important;animation-delay:0s!important}}