.lav-host { display: inline-block; position: relative; line-height: 0; vertical-align: middle; aspect-ratio: 1 / 1; --lx: 0; --ly: 0; }
:where(.lav-host:not([style*="width"])) { width: 96px; }
.lav { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform-origin: 50% 88%; animation: lav-float 6.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.lav-host[data-float="0"] .lav { animation: none; }
.lav-hop { transform-box: view-box; }
.lav-ana .lav-hop { transform-origin: 120px 214px; }
.lav-alt .lav-hop { transform-origin: 120px 190px; }
.lav-eye, .lav-look, .lav-foot, .lav-top, .lav-gap, .lav-mouth, .lav-smile, .lav-blush, .lav-dots circle, .lav-sparks path { transform-box: fill-box; }
.lav-eye { transform-origin: center; transition: transform 70ms ease-out; }
.lav-look { transition: transform .22s cubic-bezier(.2, .7, .1, 1); transform: translate(calc(var(--lx) * 1px), calc(var(--ly) * 1px)); }
.lav-foot { transform-origin: center; }
.lav-gap { transform-origin: 50% 100%; transform: scaleY(0); }
.lav-mouth { transform-origin: 50% 30%; transform: scaleY(0); }
.lav-smile, .lav-blush, .lav-dots, .lav-sparks { opacity: 0; transition: opacity .25s ease-out; }
.lav-blush { transform-origin: center; }
.lav[data-blink="1"] .lav-eye { transform: scaleY(.08); }
.lav[data-hop="1"] .lav-hop { animation: lav-hop .68s cubic-bezier(.3, 1.5, .5, 1) 1; }
.lav[data-foot="1"] .lav-foot { animation: lav-foot .46s ease-in-out 3; }
.lav[data-state="talk"] .lav-hop { animation: lav-talk-bob 1.15s ease-in-out infinite; }
.lav-ana[data-state="talk"] .lav-mouth { animation: lav-mouth 1.1s linear infinite; }
.lav-alt[data-state="talk"] .lav-top { animation: lav-chew 1.1s linear infinite; }
.lav-alt[data-state="talk"] .lav-gap { animation: lav-chew-gap 1.1s linear infinite; }
.lav[data-state="think"] .lav-dots { opacity: 1; }
.lav[data-state="think"] .lav-dots circle { animation: lav-dot 1.6s ease-in-out infinite; transform-origin: center; }
.lav[data-state="think"] .lav-dots circle:nth-child(2) { animation-delay: .25s; } .lav[data-state="think"] .lav-dots circle:nth-child(3) { animation-delay: .5s; }
.lav[data-state="think"] .lav-hop { transform: rotate(-3deg); }
.lav[data-state="happy"] .lav-eye { transform: scaleY(.55); }
.lav[data-state="happy"][data-blink="1"] .lav-eye { transform: scaleY(.08); }
.lav-ana[data-state="happy"] .lav-smile { opacity: 1; } .lav-ana[data-state="happy"] .lav-blush { opacity: .5; }
.lav-alt[data-state="happy"] .lav-gap { transform: scaleY(.3); } .lav-alt[data-state="happy"] .lav-top { transform: translate(-1.5px, -2.6px); }
.lav[data-state="happy"] .lav-sparks { opacity: 1; }
.lav[data-state="happy"] .lav-sparks path { transform-origin: center; transform: scale(.7); }
.lav[data-state="happy"][data-hop="1"] .lav-hop { animation: lav-cheer 1s cubic-bezier(.3, 1.5, .5, 1) 1; }
.lav[data-state="happy"][data-hop="1"] .lav-sparks path { animation: lav-spark 1s ease-in-out 1; }
.lav[data-state="happy"][data-hop="1"] .lav-sparks path:nth-child(2) { animation-delay: .12s; } .lav[data-state="happy"][data-hop="1"] .lav-sparks path:nth-child(3) { animation-delay: .24s; }
@keyframes lav-float { 0%, 100% { transform: translateY(0) rotate(-.6deg) scale(1, 1); } 50% { transform: translateY(-2.6%) rotate(.6deg) scale(1.024, .976); } }
@keyframes lav-hop { 0% { transform: none; } 30% { transform: translateY(-9%) scale(.97, 1.04); } 62% { transform: translateY(0) scale(1.04, .95); } 100% { transform: none; } }
@keyframes lav-foot { 0%, 100% { transform: none; } 50% { transform: rotate(9deg); } }
@keyframes lav-talk-bob { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-1.6deg) translateY(-1.5%); } 75% { transform: rotate(1.6deg) translateY(-1.5%); } }
@keyframes lav-mouth { 0%, 100% { transform: scale(.7, .05); } 12% { transform: scale(.95, .9); } 24% { transform: scale(.75, .28); } 38% { transform: scale(1, 1); } 50% { transform: scale(.7, .12); } 63% { transform: scale(.9, .72); } 78% { transform: scale(.78, .25); } 90% { transform: scale(.95, .85); } }
@keyframes lav-chew { 0%, 100% { transform: none; } 12% { transform: translate(-3.2px, -5.4px); } 24% { transform: translate(-.8px, -1.4px); } 38% { transform: translate(-3.5px, -6px); } 50% { transform: none; } 63% { transform: translate(-2.6px, -4.6px); } 78% { transform: translate(-.6px, -1px); } 90% { transform: translate(-3.2px, -5.6px); } }
@keyframes lav-chew-gap { 0%, 100% { transform: scaleY(0); } 12% { transform: scaleY(.62); } 24% { transform: scaleY(.14); } 38% { transform: scaleY(.7); } 50% { transform: scaleY(0); } 63% { transform: scaleY(.52); } 78% { transform: scaleY(.12); } 90% { transform: scaleY(.66); } }
@keyframes lav-dot { 0%, 100% { transform: translateY(0) scale(.85); opacity: .35; } 50% { transform: translateY(-3px) scale(1); opacity: 1; } }
@keyframes lav-spark { 0%, 100% { transform: scale(.7) rotate(0); } 45% { transform: scale(1.35) rotate(25deg); } }
@keyframes lav-cheer { 0% { transform: none; } 18% { transform: translateY(5%) scale(1.05, .93); } 45% { transform: translateY(-14%) scale(.96, 1.06); } 70% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } }
.lav-off, .lav-off * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .lav, .lav * { animation: none !important; transition: none !important; } }