.hole-art{position:absolute;inset:58px 0 66px;display:grid;place-items:center;z-index:1}.hole-art span{display:block;width:142px;height:70px;border:7px solid var(--black);border-radius:50%;background:#302544;box-shadow:inset 0 13px 0 #8f75c9,inset 0 -18px 0 #08070c,0 10px 0 #6f58aa;transform:rotate(-5deg)}
.hole-art .cat-head{position:absolute;left:50%;bottom:48px;width:72px;height:62px;background:var(--lilac-light);border:5px solid var(--black);border-radius:48% 48% 42% 42%;transform:translateX(-50%);z-index:2}.hole-art .cat-head:before,.hole-art .cat-head:after{content:'';position:absolute;top:-25px;width:31px;height:31px;background:var(--lilac-light);border:5px solid var(--black);z-index:-1}.hole-art .cat-head:before{left:-3px;transform:rotate(35deg);border-right:0;border-bottom:0}.hole-art .cat-head:after{right:-3px;transform:rotate(55deg);border-left:0;border-bottom:0}.hole-art .cat-head i,.hole-art .cat-head b{position:absolute;top:23px;width:10px;height:12px;background:var(--black);border-radius:50%}.hole-art .cat-head i{left:18px}.hole-art .cat-head b{right:18px}
.hole-art .cat-head{width:76px;height:62px;border-radius:48% 48% 46% 46%;background:var(--lilac-light);border:4px solid var(--black);bottom:48px}.hole-art .cat-head:before,.hole-art .cat-head:after{top:-18px;width:30px;height:30px;border:0;background:var(--lilac-light);clip-path:polygon(0 100%,18% 0,100% 100%);z-index:-1}.hole-art .cat-head:before{left:1px;transform:rotate(-12deg)}.hole-art .cat-head:after{right:1px;transform:scaleX(-1) rotate(-12deg)}.hole-art .cat-head i,.hole-art .cat-head b{top:23px;width:9px;height:12px;background:var(--black);border-radius:50%}.hole-art .cat-head i{left:20px}.hole-art .cat-head b{right:20px}.hole-art .cat-head i:after{content:"";position:absolute;left:24px;top:20px;width:8px;height:6px;background:#8f75c9;border-radius:50% 50% 60% 60%;box-shadow:-23px 9px 0 -2px var(--black),23px 9px 0 -2px var(--black)}
.hole-art .hole{transform:translateY(8px) rotate(-5deg)}
.hole-art .hole{transform:translateY(16px) rotate(-5deg)}
.hole-art .hole{transform:translateY(24px) rotate(-5deg)}
.hole-art .cat-head:before,.hole-art .cat-head:after{filter:drop-shadow(2px 0 var(--black)) drop-shadow(-2px 0 var(--black)) drop-shadow(0 2px var(--black))}
.hole-art .cat-head{width:108px;height:84px;bottom:42px;border:5px solid #5b3428;border-radius:52% 52% 48% 48%;background:#d99051}.hole-art .cat-head:before,.hole-art .cat-head:after{top:-28px;width:43px;height:43px;border:0;background:#d99051;clip-path:polygon(12% 100%,35% 0,100% 100%);filter:drop-shadow(3px 0 #5b3428) drop-shadow(-2px 0 #5b3428) drop-shadow(0 3px #5b3428)}.hole-art .cat-head:before{left:4px;transform:rotate(-10deg)}.hole-art .cat-head:after{right:4px;transform:scaleX(-1) rotate(-10deg)}.hole-art .cat-head i,.hole-art .cat-head b{top:29px;width:13px;height:13px;background:#21191a;border-radius:50%}.hole-art .cat-head i{left:26px}.hole-art .cat-head b{right:26px}.hole-art .cat-head i:after{content:"";position:absolute;left:37px;top:17px;width:15px;height:11px;background:#e76e79;border-radius:50%;box-shadow:-70px 18px 0 -4px #5b3428,70px 18px 0 -4px #5b3428,-78px 31px 0 -5px #5b3428,78px 31px 0 -5px #5b3428}.hole-art .cat-head b:after{content:"";position:absolute;left:-39px;top:31px;width:20px;height:3px;background:#5b3428;border-radius:50%;transform:rotate(8deg)}
.hole-art .cat-head{width:72px;height:56px;bottom:48px;border:4px solid var(--black);border-radius:52% 52% 48% 48%;background:var(--lilac)}.hole-art .cat-head:before,.hole-art .cat-head:after{top:-19px;width:29px;height:29px;background:var(--lilac);filter:drop-shadow(2px 0 var(--black)) drop-shadow(-2px 0 var(--black)) drop-shadow(0 2px var(--black))}.hole-art .cat-head:before{left:2px}.hole-art .cat-head:after{right:2px}.hole-art .cat-head i,.hole-art .cat-head b{top:20px;width:9px;height:9px;background:var(--black)}.hole-art .cat-head i{left:17px}.hole-art .cat-head b{right:17px}.hole-art .cat-head i:after{left:24px;top:13px;width:10px;height:8px;background:var(--lilac-dark);box-shadow:-49px 14px 0 -3px var(--black),49px 14px 0 -3px var(--black),-56px 24px 0 -4px var(--black),56px 24px 0 -4px var(--black)}.hole-art .cat-head b:after{left:-25px;top:24px;width:14px;height:2px;background:var(--black)}
.new-card[data-project="Whack-A-Cat"] .hole-art:before{content:"";position:absolute;left:50%;bottom:34px;width:62px;height:38px;border:4px solid var(--black);border-radius:50% 50% 45% 45%;background:var(--lilac-light);transform:translateX(-50%) scale(.5);opacity:0;z-index:3}.new-card[data-project="Whack-A-Cat"]:hover .cat-head{animation:cat-dip-blob 1.5s ease-in-out infinite}.new-card[data-project="Whack-A-Cat"]:hover .hole-art:before{animation:blob-pop 1.5s ease-in-out infinite}@keyframes cat-dip-blob{0%,20%{transform:translateX(-50%) translateY(0);opacity:1}42%,68%{transform:translateX(-50%) translateY(52px) scale(.72);opacity:0}85%,100%{transform:translateX(-50%) translateY(0);opacity:1}}@keyframes blob-pop{0%,25%{transform:translateX(-50%) scale(.5);opacity:0}45%,67%{transform:translateX(-50%) scale(1.2);opacity:1}85%,100%{transform:translateX(-50%) scale(.5);opacity:0}}
@media(max-width:760px){.new-card[data-project="Whack-A-Cat"] .cat-head{animation:cat-dip-blob 1.5s ease-in-out infinite}.new-card[data-project="Whack-A-Cat"] .hole-art:before{animation:blob-pop 1.5s ease-in-out infinite}}
