/* Neko - chat companion */
/* Future-proofed version inspired by refact0r (508863359777505290) */


[class^="channelTextArea"]::before {
	--wakeup-duration: 2.65s;
	--sleep-duration: calc(var(--wakeup-duration));
	--typing-duration: calc(var(--wakeup-duration) / 5);
	--typing-animation: scratchdown;
	content: "";
	width: 32px;
	height: 32px;
	bottom: calc(100% - 3px);
	right: 10px;
	position: absolute;
	image-rendering: pixelated;
	background-image: url("https://raw.githubusercontent.com/adryd325/oneko.js/14bab15a755d0e35cd4ae19c931d96d306f99f42/oneko.gif");
	animation: sleep var(--sleep-duration) infinite;
}

[class^="channelTextArea"]:hover::before {
	animation: var(--wakeup-duration) 1 forwards wakeup;
}

[class^="channelTextArea"]:not(:hover)::before {
	animation: var(--sleep-duration) 1 forwards gotosleep,
		var(--sleep-duration) var(--wakeup-duration) infinite sleep;
}

[class^="channelTextArea"]:has([class*="editor"]:focus)::before {
	animation: var(--wakeup-duration) 1 forwards wakeup,
		var(--typing-duration) var(--wakeup-duration) infinite var(--typing-animation);
}

@keyframes sleep {

	0%,
	50% {
		background-position: -64px 0;
	}

	50.00001%,
	100% {
		background-position: -64px -32px;
	}
}

@keyframes wakeup {

	0%,
	5% {
		background-position: -160px 0;
	}

	5.00001%,
	10% {
		background-position: -192px 0;
	}

	10.00001%,
	15% {
		background-position: -160px 0;
	}

	15.00001%,
	20% {
		background-position: -192px 0;
	}

	20.00001%,
	35% {
		background-position: -224px 0;
	}

	35.00001%,
	60% {
		background-position: -96px -64px;
	}

	60.00001%,
	100% {
		background-position: -96px -96px;
	}
}

@keyframes gotosleep {

	0%,
	80% {
		background-position: -96px -64px;
	}

	80.00001%,
	100% {
		background-position: -64px 0;
	}
}

@keyframes scratchdown {

	0%,
	50% {
		background-position: -224px -30px;
		bottom: calc(100% - 13px);
	}

	50.00001%,
	100% {
		background-position: -192px -62px;
		bottom: calc(100% - 13px);
	}
}