.hex-roll{--hex-size:80px;--hex-speed:3.6s;--hex-ground-pad:60px;width:calc(var(--hex-size) + var(--hex-ground-pad) * 2);height:calc(var(--hex-size) * .866 + 80px);color:currentColor;justify-content:center;align-items:flex-end;padding-bottom:40px;display:flex;position:relative}.hex-roll__ground{bottom:36px;left:var(--hex-ground-pad);right:var(--hex-ground-pad);opacity:.3;background:currentColor;height:1px;position:absolute}.hex-roll__ground:before,.hex-roll__ground:after{content:"";opacity:.5;background:currentColor;width:1px;height:7px;position:absolute;top:-3px}.hex-roll__ground:before{left:0}.hex-roll__ground:after{right:0}.hex-roll__body{width:var(--hex-size);height:calc(var(--hex-size) * .866);animation:hex-roll-tip var(--hex-speed) cubic-bezier(.55, .05, .45, 1) infinite;transform-origin:50%}.hex-roll__body svg{width:100%;height:100%;display:block}@keyframes hex-roll-tip{0%,4%{transform:translateY(0)rotate(0)}10%{transform:translateY(-10px)rotate(30deg)}16%,20%{transform:translateY(0)rotate(60deg)}26%{transform:translateY(-10px)rotate(90deg)}32%,36%{transform:translateY(0)rotate(120deg)}42%{transform:translateY(-10px)rotate(150deg)}48%,52%{transform:translateY(0)rotate(180deg)}58%{transform:translateY(-10px)rotate(210deg)}64%,68%{transform:translateY(0)rotate(240deg)}74%{transform:translateY(-10px)rotate(270deg)}80%,84%{transform:translateY(0)rotate(300deg)}90%{transform:translateY(-10px)rotate(330deg)}96%,to{transform:translateY(0)rotate(360deg)}}.hex-pulse{--hex-size:74px;--hex-speed:1.6s;width:var(--hex-size);height:calc(var(--hex-size) * .866);position:relative}.hex-pulse svg{width:100%;height:100%;position:absolute;inset:0}.hex-pulse svg:first-child{animation:hex-pulse-out var(--hex-speed) ease-out infinite;animation-delay:0s}.hex-pulse svg:nth-child(2){animation:hex-pulse-out var(--hex-speed) ease-out infinite;animation-delay:calc(var(--hex-speed) * -.33)}.hex-pulse svg:nth-child(3){animation:hex-pulse-out var(--hex-speed) ease-out infinite;animation-delay:calc(var(--hex-speed) * -.66)}@keyframes hex-pulse-out{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}.hex-wave{--hex-size:26px;--hex-speed:1.2s;--hex-stagger:.12s;align-items:center;gap:6px;display:inline-flex}.hex-wave>div{width:var(--hex-size);height:calc(var(--hex-size) * .866);animation:hex-wave-bob var(--hex-speed) ease-in-out infinite}.hex-wave>div svg{width:100%;height:100%;display:block}.hex-wave>div:first-child{animation-delay:calc(var(--hex-stagger) * 0)}.hex-wave>div:nth-child(2){animation-delay:calc(var(--hex-stagger) * 1)}.hex-wave>div:nth-child(3){animation-delay:calc(var(--hex-stagger) * 2)}.hex-wave>div:nth-child(4){animation-delay:calc(var(--hex-stagger) * 3)}.hex-wave>div:nth-child(5){animation-delay:calc(var(--hex-stagger) * 4)}@keyframes hex-wave-bob{0%,to{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-10px)}}.hex-orbit{--hex-size:50px;--orbit-d:220px;--hex-speed:3.6s;width:var(--orbit-d);height:var(--orbit-d);position:relative}.hex-orbit__ring{opacity:.25;border:.5px solid;border-radius:50%;position:absolute;inset:16px}.hex-orbit__arm{width:1px;height:1px;animation:hex-orbit-spin var(--hex-speed) linear infinite;transform-origin:0 0;position:absolute;top:50%;left:50%}.hex-orbit__hex{top:calc(var(--orbit-d) / -2 + 24px);left:calc(var(--hex-size) / -2);width:var(--hex-size);height:calc(var(--hex-size) * .866);animation:hex-orbit-tip calc(var(--hex-speed) / 6) cubic-bezier(.55,.05,.45,1) infinite;position:absolute}.hex-orbit__hex svg{width:100%;height:100%;display:block}@keyframes hex-orbit-spin{to{transform:rotate(360deg)}}@keyframes hex-orbit-tip{0%,to{transform:rotate(0)}50%{transform:rotate(60deg)}}@media (prefers-reduced-motion:reduce){.hex-roll__body,.hex-pulse svg,.hex-wave>div,.hex-orbit__arm,.hex-orbit__hex{animation:none!important}.hex-pulse svg:not(:last-child){opacity:0}.hex-wave>div{opacity:1}}