#koishi {
	cursor: pointer;
}

#koishi::before,
#koishi::after {
	transition: transform 0.66s, filter 5s;
}

#koishi:hover::before,
#koishi:hover::after {
	animation: hat-wiggle 0.4s ease-in-out 10, hat-wiggle-hard 0.4s ease-in-out infinite 2s,
		hat-float 3s infinite alternate ease-in-out;
	transform: translate(-8%, -45%) rotate(0);
}

@keyframes hat-wiggle {
	0% {
		rotate: -1deg;
	}
	50% {
		rotate: 1deg;
	}
	100% {
		rotate: -1deg;
	}
}
@keyframes hat-wiggle-hard {
	0% {
		rotate: -3deg;
	}
	50% {
		rotate: 3deg;
	}
	100% {
		rotate: -3deg;
	}
}
@keyframes hat-float {
	0% {
		translate: 0;
	}
	33% {
		translate: 0 -1px;
	}
	66% {
		translate: 0 1px;
	}
	100% {
		translate: 0 -1px;
	}
}

#koishi.active::before,
#koishi.active::after {
	animation: hat-poof 0.33s ease-out forwards;
}

@keyframes hat-poof {
	0% {
		translate: 0 0;
	}
	33% {
		translate: 0 -5px;
	}
	66% {
		translate: 0 2px;
	}
}

#koishi.fly:before {
	animation: hat-hz 3s ease-in-out forwards, hat-vt 3s ease-in forwards, glow 3s forwards,
		hat-move-slow 2s ease-in-out, hat-z-index-before 0.5s linear forwards;
	animation-delay: 2s, 2s, 0s, 0s, 0s;
}
#koishi.fly:after {
	animation: hat-hz 3s ease-in-out forwards, hat-vt 3s ease-in forwards, glow 3s forwards,
		hat-move-slow 2s ease-in-out, hat-z-index-after 0.5s linear forwards;
	animation-delay: 2s, 2s, 0s, 0s, 0s;
}

@keyframes hat-z-index-before {
	0% {
		z-index: -1;
	}
	99% {
		z-index: -1;
	}
	100% {
		z-index: 999;
	}
}
@keyframes hat-z-index-after {
	0% {
		z-index: 1;
	}
	99% {
		z-index: 1;
	}
	100% {
		z-index: 999;
	}
}

@keyframes hat-move-slow {
	0% {
		transform: translate(-20%, -45%) rotate(0) scale(1);
	}
	25% {
		transform: translate(-45%, -50%) rotate(-2.5deg) scale(1.25);
	}
	100% {
		transform: translate(-200%, 100%) rotate(-10deg) scale(2);
	}
}
@keyframes hat-hz {
	0% {
		translate: 0 0;
	}
	33% {
		translate: -20vw;
		scale: 1 0.8;
	}
	100% {
		translate: 110vw;
		scale: 1 1.2;
	}
}
@keyframes hat-vt {
	0% {
		transform: translate(-200%, 100%) rotate(-10deg) scale(2);
	}
	100% {
		transform: translateY(110vh) rotate(25deg) scale(15);
	}
}
@keyframes glow {
	from {
		filter: drop-shadow(0);
	}
	to {
		filter: drop-shadow(0 0 0.1rem var(--secondary));
	}
}

#koishi.away:before,
#koishi.away:after {
	opacity: 0;
	transform: translate(110vw, 110vh) rotate(25deg) scale(15);
	filter: drop-shadow(0 0 1rem var(--secondary));
}

#koishi.back::before,
#koishi.back::after {
	z-index: 999;
}

body:has(#koishi.fly) #vingette {
	opacity: 0.33;
}

body:has(#koishi.away) #vingette {
	opacity: 0.5;
	animation: throb 4s infinite, wobble 3s infinite alternate ease-in-out;
}

@keyframes wobble {
	from {
		scale: 1;
	}
	to {
		scale: 1.05;
	}
}

@keyframes throb {
	0%,
	75% {
		color: #003300;
		opacity: 0.5;
	}
	87.5% {
		color: crimson;
		opacity: 0.75;
	}
	100% {
		color: #003300;
		opacity: 0.5;
	}
}

#koisher video,
#koisher img {
	filter: none;
	transition: filter 5s cubic-bezier(0.89, 0.01, 0.93, 0.47);
}
#koisher.eerie video {
	filter: contrast(10) hue-rotate(180deg) invert() blur(1px);
}