.cat {padding-bottom: 36px;
	&:hover {
		#righteyelid {visibility: hidden;}
	}

	[hidden] {display: none;}

	.sleep-symbol {margin-left: 10%; font-weight: 600; margin-bottom: -40px;
		span {position: relative; display: inline-block; opacity: 1; transform: scale(1); animation: sleep 4s ease-in-out infinite;}
		span:nth-child(1) {animation-delay: 0s;}
		span:nth-child(2) {animation-delay: 1s; margin-left: -10px;}
		span:nth-child(3) {animation-delay: 2s; margin-left: -10px;}
	}

	.thecat {z-index: 2; margin-left: 10%; margin-bottom: -62px; position: relative; pointer-events: none;}
}

#tail {visibility: visible;}
#longtail {visibility: hidden;}

/* activate cat when mouse approaches! */
.mouse-detector {padding: 20px 30px 30px 30px;
  &:hover {
    #lefteyelid {visibility: hidden;}
    .sleep-symbol {visibility: hidden;}
  }
}

.cat {
}

.thecat {#eyesdown {visibility: hidden;}}

.cat:has(.side-select:hover) {#eyesdown {visibility: visible;}}

.cat:has(option:hover) {
  #righteyelid, #lefteyelid, .sleep-symbol {visibility: hidden;}
  #eyesdown {visibility: visible;}
}

@keyframes sleep {
  0% {opacity: 1; transform: translateY(0) scale(1);}
  50% {opacity: 0.5; transform: translate(-5px, -35px) scale(1.2);}
  100% {opacity: 0; transform: translateY(-60px) scale(1.5);}
}