.la-hop{--size:120px;--depth:22px;--layers:11;--front:#67aedb;--side:#4a90c0;--side-deep:#2f6e9b;--shadow:#1e5986;--jump-x:55px;--jump-y:45px;--loop:3000ms;position:relative;width:calc(var(--size) + var(--jump-x) + 24px);height:calc(var(--size) + var(--jump-y) + 40px);pointer-events:none;user-select:none}.la-hop__travel{position:absolute;left:12px;bottom:16px;width:var(--size);height:var(--size);perspective:calc(var(--size) * 6);perspective-origin:50% 40%;animation:la-travel var(--loop) linear infinite}.la-hop__shadow{position:absolute;left:6%;right:6%;bottom:-12px;height:16px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--shadow) 42%,transparent),color-mix(in srgb,var(--shadow) 14%,transparent) 60%,transparent);transform-origin:50% 50%;animation:la-shadow var(--loop) linear infinite}.la-hop__hop{position:absolute;inset:0;animation:la-hop-y var(--loop) linear infinite}.la-hop__tilt{transform-origin:50% 60%;animation:la-tilt var(--loop) linear infinite}.la-hop__squash,.la-hop__tilt{position:absolute;inset:0;transform-style:preserve-3d}.la-hop__squash{transform-origin:50% 100%;animation:la-squash var(--loop) linear infinite}.la-hop__block{position:absolute;inset:0;transform-style:preserve-3d}.la-hop__layer{position:absolute;inset:0;border-radius:25%;background:var(--side);transform:translateZ(calc(-1 * var(--depth) * var(--i) / var(--layers)));backface-visibility:visible}.la-hop__layer:nth-child(n+7){background:var(--side-deep)}.la-hop__layer:last-of-type{background:var(--side-deep);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.la-hop__face{position:absolute;inset:0;transform:translateZ(.5px)}.la-hop__face svg{display:block;width:100%;height:100%;overflow:visible}.la-hop__face .plate{fill:var(--front)}.la-hop__face .mark{fill:#fff}.la-hop__face .lid{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round}.la-hop__face .sheen{fill:url(#la-sheen)}@keyframes la-travel{0%,15%{transform:translateX(0);animation-timing-function:cubic-bezier(.4,0,.6,1)}40%,70%{transform:translateX(var(--jump-x));animation-timing-function:cubic-bezier(.4,0,.6,1)}95%,to{transform:translateX(0)}}@keyframes la-hop-y{0%,15%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.8,.4,1)}27%{transform:translateY(calc(-1 * var(--jump-y)));animation-timing-function:cubic-bezier(.6,0,.9,.6)}40%{transform:translateY(0);animation-timing-function:ease-out}45%{transform:translateY(-7px);animation-timing-function:ease-in}50%,72%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.8,.4,1)}83%{transform:translateY(calc(-.85 * var(--jump-y)));animation-timing-function:cubic-bezier(.6,0,.9,.6)}95%{transform:translateY(0);animation-timing-function:ease-out}97.5%{transform:translateY(-4px);animation-timing-function:ease-in}to{transform:translateY(0)}}@keyframes la-tilt{0%,13%{transform:rotate(0) rotateY(0);animation-timing-function:ease-out}27%{transform:rotate(15deg) rotateY(-26deg);animation-timing-function:ease-in-out}40%{transform:rotate(5deg) rotateY(-6deg);animation-timing-function:ease-out}50%{transform:rotate(-2deg) rotateY(0);animation-timing-function:ease-in-out}56%,68%{transform:rotate(0) rotateY(8deg);animation-timing-function:ease-in-out}74%{transform:rotate(0) rotateY(0);animation-timing-function:ease-out}83%{transform:rotate(-14deg) rotateY(24deg);animation-timing-function:ease-in-out}95%{transform:rotate(-4deg) rotateY(4deg);animation-timing-function:ease-out}to{transform:rotate(0) rotateY(0)}}@keyframes la-squash{0%{transform:scale(1);animation-timing-function:ease-in-out}8%{transform:scale(1.08,.92);animation-timing-function:ease-in}15%{transform:scale(.95,1.07);animation-timing-function:ease-out}27%,36%{transform:scale(1);animation-timing-function:ease-in}40%{transform:scale(1.1,.9);animation-timing-function:ease-out}45%{transform:scale(.97,1.04);animation-timing-function:ease-in-out}50%,70%{transform:scale(1);animation-timing-function:ease-in}74%{transform:scale(.96,1.05);animation-timing-function:ease-out}83%,91%{transform:scale(1);animation-timing-function:ease-in}95%{transform:scale(1.07,.93);animation-timing-function:ease-out}98%{transform:scale(.99,1.01)}to{transform:scale(1)}}@keyframes la-shadow{0%,15%{transform:scale(1);opacity:.9}27%{transform:scale(1.35);opacity:.35}40%{transform:scale(.92);opacity:1}45%{transform:scale(1.02);opacity:.8}50%,72%{transform:scale(1);opacity:.9}83%{transform:scale(1.3);opacity:.4}95%{transform:scale(.94);opacity:1}to{transform:scale(1);opacity:.9}}.la-hop__face .brow-r,.la-hop__face .eye-r,.la-hop__face .lid,.la-hop__face .mouth{transform-box:fill-box}.la-hop__face .eye-r{transform-origin:50% 50%;animation:la-eye var(--loop) step-end infinite}.la-hop__face .lid{transform-origin:50% 50%;opacity:0;animation:la-lid var(--loop) step-end infinite,la-lid-shape var(--loop) ease-out infinite}.la-hop__face .brow-r{transform-origin:50% 100%;animation:la-brow var(--loop) ease-in-out infinite}.la-hop__face .mouth{transform-origin:50% 50%;animation:la-mouth var(--loop) ease-in-out infinite}@keyframes la-eye{0%,55%{opacity:1}55.01%,61%{opacity:0}61.01%,to{opacity:1}}@keyframes la-lid{0%,55%{opacity:0}55.01%,61%{opacity:1}61.01%,to{opacity:0}}@keyframes la-lid-shape{0%,55%{transform:scaleY(.6)}57%,61%{transform:scaleY(1)}61.01%,to{transform:scaleY(.6)}}@keyframes la-brow{0%,52%,66%,to{transform:translateY(0) rotate(0)}56%,61%{transform:translateY(-5px) rotate(-10deg)}}@keyframes la-mouth{0%,53%,68%,to{transform:scale(1)}58%{transform:scale(1.06,1.1) translateY(1px)}}@media (min-width:768px){.la-hop{--size:150px;--depth:28px;--jump-x:70px;--jump-y:56px}}.la-hop.is-paused *{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){.la-hop *{animation:none!important}.la-hop__face .lid{opacity:0}}