.webgl-hero{position:relative;width:100%;overflow:hidden}.webgl-hero__canvas{display:block;width:100%;height:100%}.webgl-hero__character-wrap{position:absolute;left:0;bottom:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:hidden}.webgl-hero__character{position:absolute;left:0;bottom:20px;width:320px;max-width:45vw;height:auto;will-change:transform;transform:translate3d(-130%,0,0);transform-origin:center bottom}.webgl-hero__character.is-animating{animation:webglCharacterWalkX 5s ease-out forwards,webglCharacterBob .45s ease-in-out infinite,webglCharacterTilt .9s ease-in-out infinite}@keyframes webglCharacterWalkX{0%{transform:translate3d(-130%,0,0)}70%{transform:translate3d(42vw,0,0)}to{transform:translate3d(42vw,0,0)}}@keyframes webglCharacterBob{0%,to{margin-bottom:0}50%{margin-bottom:10px}}@keyframes webglCharacterTilt{0%,to{rotate:0deg}50%{rotate:-1.5deg}}.webgl-hero__content{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;text-align:center;color:#fff;padding:2rem}.webgl-hero__content h2{margin:0 0 .75rem}@media screen and (max-width:749px){.webgl-hero__character{max-width:62vw}@keyframes webglCharacterWalkX{0%{transform:translate3d(-130%,0,0)}70%{transform:translate3d(18vw,0,0)}to{transform:translate3d(18vw,0,0)}}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/webgl-hero.css.map */