Bootleg animal ears for Mastodon by Freeplay

	// 🦊 BEFORE CLICKING INSTALL:
	// ---------------------------
	// Add your home instance to the "Custom included sites"
	// textbox in the left panel following this format:
	// *://domain.tld/*

	
	
/* ==UserStyle==
@name           Bootleg animal ears for Mastodon
@version        1.0.3
@description    Adds animal ears to pfp's based on keywords
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.floof.company/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues

@var color innerColor "Inner color" gray
@var color outerColor "Outer color" #e4b077
@var range earsRadius "Ears radius" [25, 0, 100, 5, "%"]
@var text words "Keywords" "mew meo woem ny cat fox mi waf arf yip kon wef wer erf mrr mur pur paw fluf fur gr"
==/UserStyle== */

@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io"), domain("catcatnya.com"), domain("mstdn.constellatory.net") {
	:root {
		--ear-color-inner innerColor
		--ear-color-outer outerColor
	}
	.status__info > span,
	.status__display-name,
 	.detailed-status__display-name {
		// make sure the ears aren't clipped
		margin-top -10px
		padding-top 10px
		margin-inline-start -10px
		padding-inline-start 10px
	}
		
	selector(attribute, class) {
		arf = ""
		for word in words {
			arf += "," + class + "[" + attribute + "*='" + word + "'i]"
		}
		return substr(arf, 1)
	}
	{selector(aria-label, ())} {
		.account__avatar, /{selector("data-avatar-of", ".account__avatar")} {
			position relative
			overflow visible
			isolation isolate
			cursor grab !important
			img {
				border-radius inherit
			}
			&::before, &::after {
				content ""
				position absolute
				top -5%
				width 30%
				height @width
				background var(--ear-color-inner)
				border-radius earsRadius 75% 90%
				border 3px solid var(--ear-color-outer)
				z-index -1
				transform rotate(37.5deg) skew(20deg)
				animation earInLeft .5s backwards cubic-bezier(.5,.7,0,1.2)
			}
			&::after {
				animation-name earInRight
				transform scaleX(-1) rotate(37.5deg) skew(20deg)
				right 0
			}
			&:hover {
				&::before {
					animation earWiggleLeft 1s infinite
				}
				&::after {
					animation earWiggleRight 1s infinite
				}
			}
		}
	}
	@keyframes earInLeft {
		from {
			transform rotate(8deg) skew(20deg) translateY(40%) scaleY(.5)
		}
	}
	@keyframes earInRight {
		from {
			transform scaleX(-1) rotate(8deg) skew(20deg) translateY(40%) scaleY(.5)
		}
	}
	@keyframes earWiggleLeft {
		0% {
		  transform rotate(37.6deg) skew(20deg)
		}
		25% {
		  transform rotate(10deg) skew(20deg)
		}
		50% {
		  transform rotate(20deg) skew(20deg)
		}
		75% {
		  transform rotate(0) skew(20deg)
		}
		100% {
		  transform rotate(37.6deg) skew(20deg)
		}
	}
	@keyframes earWiggleRight {
		0% {
		  transform scaleX(-1) rotate(37.6deg) skew(20deg)
		}
		25% {
		  transform scaleX(-1) rotate(10deg) skew(20deg)
		}
		50% {
		  transform scaleX(-1) rotate(20deg) skew(20deg)
		}
		75% {
		  transform scaleX(-1) rotate(0) skew(20deg)
		}
		100% {
		  transform scaleX(-1) rotate(37.6deg) skew(20deg)
		}
	}

}