.animated-face-wrapper{cursor:pointer;justify-content:center;align-items:center;padding:4px;transition:all .3s;display:flex;position:relative}.animated-face-wrapper:hover{padding:0}.animated-face-wrapper:active{transform:scale(.95)}.animated-face-backdrop{z-index:0;background-color:#dedfe0;border-radius:3.2rem;transition:all .3s;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%)translateY(-55%)}.animated-face-wrapper:hover .animated-face-backdrop{transform:translate(-50%)translateY(-50%)}.animated-face-wrapper[data-size=small] .animated-face-backdrop{width:5rem;height:4.5rem}.animated-face-wrapper[data-size=small]:hover .animated-face-backdrop{height:5rem}.animated-face-wrapper[data-size=medium] .animated-face-backdrop{width:9rem;height:8.25rem}.animated-face-wrapper[data-size=medium]:hover .animated-face-backdrop{height:9rem}.animated-face-wrapper[data-size=large] .animated-face-backdrop{width:12rem;height:11rem}.animated-face-wrapper[data-size=large]:hover .animated-face-backdrop{height:12rem}.animated-face-container{z-index:1;transform-style:preserve-3d;position:relative}.animated-face-card{width:100%;height:100%;transform-style:preserve-3d;will-change:transform;border-radius:3rem;justify-content:center;align-items:center;transition:all .6s;display:flex;transform:translateZ(50px)}.animated-face-card:hover{box-shadow:0 10px 40px #00003c40,inset 0 0 10px #ffffff80}.background-blur-balls{z-index:-10;background-color:#fffc;border-radius:3rem;width:100%;height:100%;transition:all .3s;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%)translateY(-50%)}.balls{animation:10s linear infinite rotate-background-balls;position:absolute;top:50%;left:50%;transform:translate(-50%)translateY(-50%)}.animated-face-wrapper:hover .balls{animation-play-state:paused}.background-blur-balls .ball{border-radius:50%;position:absolute}.background-blur-balls .ball.violet{background-color:#9147ff;top:0;left:50%;transform:translate(-50%)}.background-blur-balls .ball.green{background-color:#34d399;bottom:0;left:50%;transform:translate(-50%)}.background-blur-balls .ball.rosa{background-color:#ec4899;top:50%;left:0;transform:translateY(-50%)}.background-blur-balls .ball.cyan{background-color:#05e0f5;top:50%;right:0;transform:translateY(-50%)}.content-card{border-radius:3rem;transition:all .3s;display:flex;overflow:hidden}.background-blur-card{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);width:100%;height:100%;position:relative}.eyes{justify-content:center;align-items:center;transition:all .3s;display:flex;position:absolute;bottom:50%;left:50%;transform:translate(-50%)}.eyes.normal .eye{background-color:#fff;transition:all .3s;animation:10s linear infinite animate-eyes}.eyes.happy{color:#fff;gap:0;display:none}.animated-face-wrapper:hover .eyes.normal .eye{display:none}.animated-face-wrapper:hover .eyes.happy{display:flex}.animated-face-wrapper[data-size=tiny] .animated-face-backdrop{display:none}.animated-face-wrapper[data-size=tiny]:hover .animated-face-backdrop{height:2.75rem}.animated-face-wrapper[data-size=tiny] .animated-face-container,.animated-face-wrapper[data-size=tiny] .content-card{width:2.25rem;height:2.25rem}.animated-face-wrapper[data-size=tiny] .animated-face-card,.animated-face-wrapper[data-size=tiny] .background-blur-balls,.animated-face-wrapper[data-size=tiny] .content-card{border-radius:.625rem}.animated-face-wrapper[data-size=tiny] .background-blur-balls .ball{filter:blur(6px);width:1.125rem;height:1.125rem}.animated-face-wrapper[data-size=tiny] .eyes{gap:.35rem;height:10px}.animated-face-wrapper[data-size=tiny] .eyes.normal .eye{border-radius:3px;width:5px;height:10px;animation:10s linear infinite animate-eyes-tiny}.animated-face-wrapper[data-size=tiny] .eyes.happy svg{width:12px}@keyframes animate-eyes-tiny{46%{height:10px}48%{height:4px}50%{height:10px}96%{height:10px}98%{height:4px}to{height:10px}}.animated-face-wrapper[data-size=small] .animated-face-container,.animated-face-wrapper[data-size=small] .content-card{width:4rem;height:4rem}.animated-face-wrapper[data-size=small] .animated-face-card,.animated-face-wrapper[data-size=small] .background-blur-balls,.animated-face-wrapper[data-size=small] .content-card{border-radius:1rem}.animated-face-wrapper[data-size=small] .background-blur-balls .ball{filter:blur(10px);width:2rem;height:2rem}.animated-face-wrapper[data-size=small] .eyes{gap:.65rem;height:17px}.animated-face-wrapper[data-size=small] .eyes.normal .eye{border-radius:5px;width:9px;height:17px}.animated-face-wrapper[data-size=small] .eyes.happy svg{width:20px}.animated-face-wrapper[data-size=medium] .animated-face-container,.animated-face-wrapper[data-size=medium] .content-card{width:9rem;height:9rem}.animated-face-wrapper[data-size=medium] .animated-face-card,.animated-face-wrapper[data-size=medium] .background-blur-balls,.animated-face-wrapper[data-size=medium] .content-card{border-radius:2.25rem}.animated-face-wrapper[data-size=medium] .background-blur-balls .ball{filter:blur(22px);width:4.5rem;height:4.5rem}.animated-face-wrapper[data-size=medium] .eyes{gap:1.5rem;height:39px}.animated-face-wrapper[data-size=medium] .eyes.normal .eye{border-radius:12px;width:20px;height:39px}.animated-face-wrapper[data-size=medium] .eyes.happy svg{width:45px}.animated-face-wrapper[data-size=large] .animated-face-container,.animated-face-wrapper[data-size=large] .content-card{width:12rem;height:12rem}.animated-face-wrapper[data-size=large] .animated-face-card,.animated-face-wrapper[data-size=large] .background-blur-balls,.animated-face-wrapper[data-size=large] .content-card{border-radius:3rem}.animated-face-wrapper[data-size=large] .background-blur-balls .ball{filter:blur(30px);width:6rem;height:6rem}.animated-face-wrapper[data-size=large] .eyes{gap:2rem;height:52px}.animated-face-wrapper[data-size=large] .eyes.normal .eye{border-radius:16px;width:26px;height:52px}.animated-face-wrapper[data-size=large] .eyes.happy svg{width:60px}@keyframes rotate-background-balls{0%{transform:translate(-50%)translateY(-50%)rotate(360deg)}to{transform:translate(-50%)translateY(-50%)rotate(0)}}@keyframes animate-eyes{46%{height:52px}48%{height:20px}50%{height:52px}96%{height:52px}98%{height:20px}to{height:52px}}.animated-face-wrapper[data-size=small] .eyes.normal .eye{animation:10s linear infinite animate-eyes-small}@keyframes animate-eyes-small{46%{height:17px}48%{height:7px}50%{height:17px}96%{height:17px}98%{height:7px}to{height:17px}}.animated-face-wrapper[data-size=medium] .eyes.normal .eye{animation:10s linear infinite animate-eyes-medium}@keyframes animate-eyes-medium{46%{height:39px}48%{height:15px}50%{height:39px}96%{height:39px}98%{height:15px}to{height:39px}}