#cat {
	--cat-width: 4em;
	--walk-time: 2s;
	/* Tune these offsets to change the resting and offscreen positions. */
	--cat-rest: 2rem;
	--cat-offscreen: calc(-100% - 1rem);
	position: absolute;
	left: 0;
	bottom: 1.4em;
	width: var(--cat-width);
	
	&[data-state="walking-in"] {
		animation: cat-walk-in var(--walk-time) linear forwards;
	}
	&[data-state="walking-out"] {
		animation: cat-walk-in var(--walk-time) linear reverse forwards;
	}	

	&[data-state*="walking"] img.rest {
		display: none;
	}

	&[data-state="rest"] {
		transform: translateX(var(--cat-rest));

		& img.gif {
			display: none;
		}
	}
	
	&:not([data-state]), &[data-state="offscreen"] {
		display: none;
	}
	
	cursor: pointer;
	z-index: -1;

	img {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* Positioning modifiers: each class controls one edge independently. */
#cat.top {
	top: 0;
	bottom: auto;
}

#cat.right {
	--cat-rest: -2rem;
	--cat-offscreen: calc(100% + 1rem);
	right: 0;
	left: auto;
}

flip {
	transform: scaleX(-1);
	top: 0;
}

#cat.fades {
	opacity: 0.03;
	transition: opacity 0.6s ease;
	transition-delay: 0.6s;
	
	&[data-state*="walking"] {
		opacity: 1;
	}
	
	&:hover {
		opacity: 1;
		transition: opacity 0s ease;
	}
}

/* Walk from offscreen left to the resting position. */
@keyframes cat-walk-in {
	from {
		transform: translateX(var(--cat-offscreen));
	}

	to {
		transform: translateX(var(--cat-rest));
	}
}

/* @keyframes cat-walk-out {
	from {
		transform: translateX(2rem);
	}

	to {
		transform: translateX(calc(-100% - 1rem));
	}
} */

#cat.right img {
	transform: scaleX(-1);
}