.section-porcupine-animation{--frame-w: 100px;--frame-h: 100px;--cycle: .3s;--duration-mobile: 3.75s;--duration-desktop: 7.5s;--iterations-walk-mobile: 12.5;--iterations-walk-desktop: 25;--cookie-banner-offset: 0px;--sprite-foot-gap: 15px;position:fixed;left:calc(0px - var(--frame-w));bottom:max(.5%,calc(var(--cookie-banner-offset) - var(--sprite-foot-gap)));width:var(--frame-w);height:var(--frame-h);z-index:var(--z-porcupine-animation);animation:walk-across-and-settle var(--duration-mobile) linear forwards;transition:bottom .3s ease}.sprite{display:block;width:var(--frame-w);height:var(--frame-h);background-image:url(porcupine-spritesheet-new.png);background-repeat:no-repeat;background-size:400% 400%;animation:walk var(--cycle) step-end var(--iterations-walk-mobile) forwards}.section-porcupine-animation:hover .sprite,.section-porcupine-animation:focus-within .sprite{animation-play-state:paused}.section-porcupine-animation:hover,.section-porcupine-animation:focus-within{animation-play-state:paused}@keyframes walk{0%{background-position:0% 0%}6.25%{background-position:33.333% 0%}12.5%{background-position:66.667% 0%}18.75%{background-position:100% 0%}25%{background-position:0% 33.333%}31.25%{background-position:33.333% 33.333%}37.5%{background-position:66.667% 33.333%}43.75%{background-position:100% 33.333%}50%{background-position:0% 66.667%}56.25%{background-position:33.333% 66.667%}62.5%{background-position:66.667% 66.667%}68.75%{background-position:100% 66.667%}75%{background-position:0% 100%}81.25%{background-position:33.333% 100%}87.5%{background-position:66.667% 100%}93.75%{background-position:100% 100%}}@keyframes walk-across-and-settle{0%{left:calc(0px - var(--frame-w))}80%{left:100vw}80.01%{left:calc(0px - var(--frame-w))}to{left:10px}}@media screen and (min-width:750px){.section-porcupine-animation{animation:walk-across-and-settle var(--duration-desktop) linear forwards}.sprite{animation:walk var(--cycle) step-end var(--iterations-walk-desktop) forwards}}@media(prefers-reduced-motion:reduce){.section-porcupine-animation,.section-porcupine-animation .sprite{animation:none}.section-porcupine-animation{left:10px;transition:none}.section-porcupine-animation .sprite{background-position:0% 0%}}
/*# sourceMappingURL=/cdn/shop/t/1028/assets/section-porcupine-animation.css.map */