<input id="rage" type="checkbox" aria-label="Rage" class="rage-control">		
<label for="rage" class="retsuko">
	<div class="retsuko-head">
		<div class="retsuko-face">
			<div class="retsuko-eye-wrap retsuko-eye-left">
				<div class="retsuko-eye"></div>
			</div>
			<div class="retsuko-eye-wrap retsuko-eye-right">
				<div class="retsuko-eye"></div>
			</div>
			<div class="retsuko-eye-rage retsuko-eye-rage-left">
				<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-1"></div>
				<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-2"></div>
				<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-3"></div>
			</div>
			<div class="retsuko-eye-rage retsuko-eye-rage-right">
				<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-1"></div>
				<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-2"></div>
				<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-3"></div>
			</div>
			<div class="retsuko-eyebrow retsuko-eyebrow-left"></div>
			<div class="retsuko-eyebrow retsuko-eyebrow-right"></div>
			<div class="retsuko-snout">
				<div class="retsuko-snout-fur-wrap">
					<div class="retsuko-snout-fur"></div>
					<div class="retsuko-face-fur retsuko-face-fur-left"></div>
					<div class="retsuko-face-fur retsuko-face-fur-right"></div>
					<div class="retsuko-face-fur-white retsuko-face-fur-white-left">
						<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-1"></div>
						<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-2"></div>
						<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-3"></div>
					</div>
					<div class="retsuko-face-fur-white retsuko-face-fur-white-right">
						<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-1"></div>
						<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-2"></div>
						<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-3"></div>
					</div>
				</div>
				<div class="retsuko-nose"></div>
				<div class="retsuko-mouth"></div>
				<div class="retsuko-mouth-rage">
					<div class="retsuko-mouth-rage-makeup retsuko-mouth-rage-makeup-top"></div>
					<div class="retsuko-mouth-rage-makeup retsuko-mouth-rage-makeup-bottom"></div>
					<div class="retsuko-mouth-rage-inner">
						<div class="retsuko-mouth-rage-teeth retsuko-mouth-rage-teeth-top">
							<div class="retsuko-mouth-rage-teeth-tooth retsuko-mouth-rage-teeth-tooth-1"></div>
							<div class="retsuko-mouth-rage-teeth-tooth retsuko-mouth-rage-teeth-tooth-2"></div>
							<div class="retsuko-mouth-rage-teeth-tooth retsuko-mouth-rage-teeth-tooth-3"></div>
							<div class="retsuko-mouth-rage-teeth-tooth retsuko-mouth-rage-teeth-tooth-4"></div>
						</div>
						<div class="retsuko-mouth-rage-teeth retsuko-mouth-rage-teeth-bottom">
							<div class="retsuko-mouth-rage-teeth-tooth"></div>
							<div class="retsuko-mouth-rage-teeth-tooth"></div>
							<div class="retsuko-mouth-rage-teeth-tooth"></div>
							<div class="retsuko-mouth-rage-teeth-tooth"></div>
						</div>
					</div>
					<div class="retsuko-mouth-rage-tongue"></div>
				</div>
			</div>
			<div class="retsuko-blush retsuko-blush-left"></div>
			<div class="retsuko-blush retsuko-blush-right"></div>
			<div class="retsuko-rage" lang="ja">
				烈
			</div>
		</div>
		<div class="retsuko-ear retsuko-ear-left">
			<div class="retsuko-ear-fur retsuko-ear-fur-1"></div>
			<div class="retsuko-ear-fur retsuko-ear-fur-2"></div>
		</div>
		<div class="retsuko-ear retsuko-ear-right">
			<div class="retsuko-ear-fur retsuko-ear-fur-1"></div>
			<div class="retsuko-ear-fur retsuko-ear-fur-2"></div>
		</div>
	</div>
	<div class="retsuko-body">
		<div class="retsuko-torso">
			<div class="retsuko-shirt"></div>
			<div class="retsuko-shirt-cut">
				<div class="retsuko-shirt-cut-fur"></div>
				<div class="retsuko-shirt-collar retsuko-shirt-collar-left"></div>
				<div class="retsuko-shirt-collar retsuko-shirt-collar-right"></div>
			</div>
			<div class="retsuko-arm retsuko-arm-left">
				<div class="retsuko-arm-lower"></div>
				<div class="retsuko-arm-paw"></div>
			</div>
			<div class="retsuko-arm retsuko-arm-right">
				<div class="retsuko-arm-lower"></div>
				<div class="retsuko-arm-paw"></div>
			</div>
		</div>
		<div class="retsuko-body-lower">
			<div class="retsuko-skirt"></div>
			<div class="retsuko-leg retsuko-leg-left">
				<div class="retsuko-leg-shoe"></div>
			</div>
			<div class="retsuko-leg retsuko-leg-right">
				<div class="retsuko-leg-shoe"></div>
			</div>
			<div class="retsuko-tail"></div>
		</div>
	</div>
	<div class="retsuko-body retsuko-arm-clone">
		<div class="retsuko-arm retsuko-arm-left">
			<div class="retsuko-arm-lower">
				<div class="retsuko-arm-paw retsuko-arm-paw-rage"></div>
				<div class="retsuko-arm-paw-rage-finger-wrap">
					<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-1"></div>
					<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-2"></div>
					<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-3"></div>
				</div>
			</div>
		</div>
		<div class="retsuko-arm retsuko-arm-right">
			<div class="retsuko-arm-lower">
				<div class="retsuko-arm-paw retsuko-arm-paw-rage"></div>
				<div class="retsuko-arm-paw-rage-finger-wrap">
					<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-1"></div>
					<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-2"></div>
					<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-3"></div>
				</div>
			</div>
		</div>
	</div>
</label>
<div class="rage-background"></div>
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@700&display=swap');

:root {
	--black: #634f38;
	--white: #fff;
	--primary-color: #f5bc60;
	--primary-color-dark: hsl(37, 88%, 50%);
	--primary-color-tint: hsl(37, 88%, 80%);
	--secondary-color: #d4a672;
	--accent-color: #3774b6;

	--blush-color: #ff99b8;
	--mouth-color: #c42127;
	--tongue-color: #e0464b;
	--shadow-color: rgba(73, 104, 136, 0.3);
	--rage-color: #bf1739;
	--background: linear-gradient(hsl(8, 100%, 90%) 0%, hsl(342, 100%, 90%) 100%);
	--stroke-width: 0.1875rem;
	--stroke-width-2: 0.25rem;
}

* { box-sizing: border-box; }
body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: var(--background);
	font-family: 'Shippori Mincho B1', serif;
	font-size: 16px;
	line-height: 1;
}

.retsuko {
	position: relative;
	z-index: 666;
	cursor: pointer;

	*,
	*::before,
	*::after {
		position: absolute;
	}

	&-rage {
		top: 3rem;
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--black);
		opacity: var(--rage-opacity, 0);
		transition: var(--rage-transition, opacity 0.2s);
	}

	&-eye {
		@include border-radius(50% 60%, 50% 40%);
		@include absolute-fill();

		transform: rotate(calc(var(--eye-rotate, 15deg) * var(--eye-rotate-flip, 1))) scaleY(var(--eye-scale, 1));
		background-color: var(--black);
		visibility: var(--eye-visibility, visible);
		transition: var(--eye-transition, transform 0.25s ease-in-out);

		&::before {
			content: '';
			top: -0.5rem;
			height: 1rem;
			width: 1.5rem;
			border-radius: 100%;
			border-bottom: 0.5rem solid var(--black);
		}

		&-left {
			left: var(--eye-position-x);

			.retsuko-eye::before {
				left: var(--eye-lash-position-x);
			}
		}

		&-right {
			--eye-rotate-flip: -1;
			right: var(--eye-position-x);

			.retsuko-eye::before {
				right: var(--eye-lash-position-x);
			}
		}

		&,
		&-wrap {
			transform-origin: center 70%;
		}

		&-wrap {
			--eye-position-x: 2.75rem;
			--eye-lash-position-x: -0.25rem;
			z-index: 5;
			top: 5.5rem;
			height: 1.875rem;
			width: 1.625rem;
			animation: var(--eye-animation);
		}
	}

	&-eye-rage {
		--eye-position-x: 2.375rem;
		z-index: 5;
		top: calc(5.5rem + var(--eye-rage-top-offset, 0px));
		height: 2.125rem;
		width: 2.125rem;
		transform: scaleY(var(--eye-rage-scale, 0));
		transition: var(--eye-rage-transition);

		&::before {
			content: '';
			top: 0;
			height: calc(100% - var(--stroke-width-2) * 2);
			width: calc(100% - var(--stroke-width-2) * 2);
			transform: rotate(var(--eye-rage-rotate));
			border: var(--stroke-width-2) solid var(--black);
			background-color: var(--white);
		}

		&-makeup {
			z-index: -1;
			height: 1.375rem;
			width: 1.375rem;
			
			&::before {
				content: '';
				height: 100%;
				width: 100%;
				transform-origin: var(--eye-makeup-transform-origin);
				transform: rotate(var(--eye-makeup-rotate));
				border-top-left-radius: var(--eye-makeup-top-left-radius);
				border-top-right-radius: var(--eye-makeup-top-right-radius);
				border-bottom-left-radius: var(--eye-makeup-bottom-left-radius);
				border-bottom-right-radius: var(--eye-makeup-bottom-right-radius);
				background-color: var(--black);
			}

			&-1 {
				--eye-makeup-position-x: -1.25rem;
				--eye-makeup-rotate: calc(80deg * var(--eye-makeup-rotate-flip, 1));
				top: -0.5rem;
			}

			&-2 {
				--eye-makeup-position-x: -0.375rem;
				--eye-makeup-rotate: calc(-10deg * var(--eye-makeup-rotate-flip, 1));
				top: 0.25rem;
			}

			&-3 {
				--eye-makeup-position-x: -0.75rem;
				--eye-makeup-rotate: calc(-130deg * var(--eye-makeup-rotate-flip, 1));
				top: -0.75rem;
			}
		}

		&-left {
			--eye-rage-rotate: -25deg;
			--eye-makeup-transform-origin: right bottom;
			--eye-makeup-top-right-radius: 100% 80%;
			--eye-makeup-bottom-right-radius: 20%;
			--eye-makeup-bottom-left-radius: 80% 100%;
			left: var(--eye-position-x);

			&::before {
				left: 0;
				border-top-left-radius: 50%;
				border-top-right-radius: 45% 100%;
				border-bottom-left-radius: 100% 45%;
			}

			.retsuko-eye-rage-makeup {
				left: var(--eye-makeup-position-x);
			}
		}

		&-right {
			--eye-rage-rotate: 25deg;
			--eye-makeup-transform-origin: left bottom;
			--eye-makeup-top-left-radius: 100% 80%;
			--eye-makeup-bottom-left-radius: 20%;
			--eye-makeup-bottom-right-radius: 80% 100%;
			--eye-makeup-rotate-flip: -1;
			right: var(--eye-position-x);

			&::before {
				right: 0;
				border-top-right-radius: 50%;
				border-top-left-radius: 45% 100%;
				border-bottom-right-radius: 100% 45%;
			}

			.retsuko-eye-rage-makeup {
				right: var(--eye-makeup-position-x);
			}
		}
	}

	&-eyebrow {
		--eyebrow-flip: 1;
		--eyebrow-position-x: 3.25rem;
		--eyebrow-rage-position-x: 0;
		top: 4rem;
		height: 1rem;
		width: 1.125rem;
		border-radius: 100%;
		transform: var(--eyebrow-transform);
		background-color: var(--white);
		transition: var(--eyebrow-transition, transform 0.25s ease-in-out);

		&::before {
			content: '';
			left: var(--eyebrow-rage-left);
			right: var(--eyebrow-rage-right);
			height: 1rem;
			width: 1rem;
			transform: rotate(calc(80deg * var(--eyebrow-flip))) scaleX(var(--eyebrow-rage-scale, 0));
			border-bottom-left-radius: var(--eyebrow-rage-bottom-left-radius, 0);
			border-bottom-right-radius: var(--eyebrow-rage-bottom-right-radius, 0);
			border-top-left-radius: 100%;
			border-top-right-radius: 100%;
			background-color: var(--white);
			transition: var(--eyebrow-rage-transition, transform 0.25s ease-in-out);
		}

		&-left {
			--eyebrow-rage-left: var(--eyebrow-rage-position-x);
			--eyebrow-rage-bottom-right-radius: 100%;
			left: var(--eyebrow-position-x);
		}
		
		&-right {
			--eyebrow-flip: -1;
			--eyebrow-rage-right: var(--eyebrow-rage-position-x);
			--eyebrow-rage-bottom-left-radius: 100%;
			right: var(--eyebrow-position-x);
		}
	}

	&-blush {
		top: 6.75rem;
		height: 1.25rem;
		width: 1.625rem;
		border-radius: 100%;
		background-color: var(--blush-color);
		opacity: var(--blush-opacity, 0.5);
		transition: var(--blush-transition, opacity 0.5s ease-in-out);

		&-left {
			left: 1.625rem;
		}

		&-right {
			right: 1.625rem;
		}
	}

	&-mouth {
		z-index: 4;
		bottom: 1rem;
		left: 50%;
		height: 0.3125rem;
		width: 1.5rem;
		transform: translateX(-50%);
		overflow: hidden;

		&::before {
			content: '';
			bottom: 0;
			left: 0;
			height: 200%;
			width: calc(100% - (var(--stroke-width) * 2));
			transform-origin: center bottom;
			transform: var(--mouth-transform, none);
			border-radius: var(--mouth-border-radius, 100%);
			border: var(--stroke-width) solid var(--black);
			background-color: var(--mouth-background-color, transparent);
			transition: var(--mouth-transition, transform 0.25s ease-in-out);
		}
	}

	&-mouth-rage {
		z-index: 4;
		bottom: 0.25rem;
		left: 50%;
		height: 2.75rem;
		width: 2.625rem;
		transform-origin: center 60%;
		transform: translateX(-50%) scale(var(--mouth-rage-scale, 0));
		transition: var(--mouth-rage-transition, transform 0.15s ease-in-out);
		animation: var(--mouth-rage-animation);

		&-teeth {
			display: flex;
			justify-content: space-between;
			width: 100%;

			&-tooth {
				position: relative;
				border-style: solid;
			}

			&-top {
				top: 0;

				.retsuko-mouth-rage-teeth-tooth {
					border-width: 0.5rem 0.25rem 0 0.25rem;
					border-color: var(--white) transparent transparent transparent;

					&-2,
					&-3 {
						border-width: 0.5rem 0.1875rem 0 0.1875rem;
					}
				}
			}

			&-bottom {
				bottom: 0;

				.retsuko-mouth-rage-teeth-tooth {
					border-width: 0 0.25rem 0.375rem 0.25rem;
					border-color: transparent transparent var(--white) transparent;
				}
			}
		}

		&-inner {
			@include absolute-fill();

			border: 0.3125rem solid var(--black);
			border-top-width: 0.5rem;
			background-color: var(--mouth-color);
			transform: perspective(1rem) rotateX(5deg);
		}

		&-makeup {
			--makeup-tip-border-radius: 0.0625rem;
			z-index: -1;
			left: 50%;
			transform: translateX(-50%);

			&::before,
			&::after {
				content: '';
				height: 1rem;
				width: 1rem;
				background-color: var(--black);
			}

			&-top {
				top: -0.5rem;
				width: 90%;
				height: 0.75rem;

				&::before,
				&::after {
					top: 0.5rem;
				}

				&::before {
					left: -0.125rem;
					transform: rotate(-5deg);
					border-top-left-radius: var(--makeup-tip-border-radius);
					border-top-right-radius: 100%;
					border-bottom-left-radius: 100%;
				}

				&::after {
					right: -0.125rem;
					transform: rotate(5deg);
					border-top-right-radius: var(--makeup-tip-border-radius);
					border-top-left-radius: 100%;
					border-bottom-right-radius: 100%;
				}
			}

			&-bottom {
				bottom: -0.875rem;
				width: 110%;
				height: 0.75rem;

				&::before,
				&::after {
					bottom: 0.5rem;
				}

				&::before {
					left: -0.125rem;
					transform: rotate(15deg);
					border-bottom-left-radius: var(--makeup-tip-border-radius);
					border-bottom-right-radius: 100%;
					border-top-left-radius: 100%;
				}

				&::after {
					right: -0.125rem;
					transform: rotate(-15deg);
					border-bottom-right-radius: var(--makeup-tip-border-radius);
					border-bottom-left-radius: 100%;
					border-top-right-radius: 100%;
				}
			}
		}

		&-tongue {
			@include border-radius(50% 20%, 50% 80%);

			right: 0;
			top: calc(100% - 1.125rem);
			height: 1.875rem;
			width: 1.5rem;
			transform-origin: center 20%;
			transform: rotate(-20deg) scaleY(var(--tongue-scale, 0));
			background-color: var(--tongue-color);
			transition: var(--tongue-transition, transform 0.25s ease-in-out);

			&::before {
				content: '';
				top: 0;
				left: 50%;
				height: 60%;
				width: var(--stroke-width);
				transform: translateX(-50%);
				border-bottom-right-radius: var(--stroke-width);
				border-bottom-left-radius: var(--stroke-width);
				background-color: var(--mouth-color);
			}
		}
	}

	&-nose {
		z-index: 4;
		top: 1.25rem;
		left: 50%;
		height: 0.9375rem;
		width: 0.9375rem;
		transform: translate(-50%, var(--nose-translate-y, 0)) scaleY(0.65);
		transition: var(--nose-transition, transform 0.25s ease-in-out);

		&::before {
			@include absolute-fill(true);

			border-top-left-radius: 100%;
			border-top-right-radius: 0.5rem;
			border-bottom-left-radius: 0.5rem;
			border-bottom-right-radius: 0.25rem;
			transform: rotate(45deg);
			background-color: var(--black);
		}
	}

	&-face-fur {
		--face-fur-position-x: -1.375rem;
		--face-fur-border-radius: 60% 70%;
		z-index: 2;
		bottom: 0.1875rem;
		height: 2.5rem;
		width: 3rem;
		transform-origin: center bottom;
		transform: rotate(var(--face-fur-rotate)) scaleY(var(--face-fur-scale, 1));
		background-color: var(--secondary-color);
		transition: var(--face-fur-transition, transform 0.25s ease-in-out);

		&-left {
			--face-fur-rotate: 5deg;
			left: var(--face-fur-position-x);
			border-bottom-left-radius: var(--face-fur-border-radius);
		}

		&-right {
			--face-fur-rotate: -5deg;
			right: var(--face-fur-position-x);
			border-bottom-right-radius: var(--face-fur-border-radius);
		}

		&-white {
			--face-fur-white-position-x: -2.5rem;
			--face-fur-white-border-top-radius: 30% 70%;
			--face-fur-white-border-bottom-radius: 70% 70%;
			bottom: 0.75rem;
			height: 2.875rem;
			width: 2.125rem;
			transform-origin: center bottom;
			transform: rotate(var(--face-fur-white-rotate));
			background-color: var(--white);

			&-detail {
				height: 1.25rem;
				width: 1.25rem;
				border-radius: var(--face-fur-detail-border-radius);
				background-color: var(--white);

				&-1 {
					top: 0;
					left: var(--face-fur-detail-1-left, auto);
					right: var(--face-fur-detail-1-right, auto);
					transform: rotate(var(--face-fur-detail-1-rotate));
				}

				&-2 {
					top: 1rem;
					left: var(--face-fur-detail-2-left, auto);
					right: var(--face-fur-detail-2-right, auto);
					transform: rotate(var(--face-fur-detail-2-rotate));
				}

				&-3 {
					top: 1.625rem;
					left: var(--face-fur-detail-3-left, auto);
					right: var(--face-fur-detail-3-right, auto);
					transform: rotate(var(--face-fur-detail-3-rotate));
				}
			}

			&-left {
				--face-fur-white-rotate: 15deg;
				--face-fur-detail-border-radius: 90% 0 90% 0;
				--face-fur-detail-1-left: -0.5rem;
				--face-fur-detail-1-rotate: -15deg;
				--face-fur-detail-2-left: -0.325rem;
				--face-fur-detail-2-rotate: -30deg;
				--face-fur-detail-3-left: 0.125rem;
				--face-fur-detail-3-rotate: -72deg;
				left: var(--face-fur-white-position-x);
				border-top-left-radius: var(--face-fur-white-border-top-radius);
				border-bottom-left-radius: var(--face-fur-white-border-bottom-radius);
			}

			&-right {
				--face-fur-white-rotate: -15deg;
				--face-fur-detail-border-radius: 0 90% 0 90%;
				--face-fur-detail-1-right: -0.5rem;
				--face-fur-detail-1-rotate: 15deg;
				--face-fur-detail-2-right: -0.325rem;
				--face-fur-detail-2-rotate: 30deg;
				--face-fur-detail-3-right: 0.125rem;
				--face-fur-detail-3-rotate: 72deg;
				right: var(--face-fur-white-position-x);
				border-top-right-radius: var(--face-fur-white-border-top-radius);
				border-bottom-right-radius: var(--face-fur-white-border-bottom-radius);
			}
		}
	}

	&-snout {
		bottom: 0.5rem;
		left: 50%;
		height: 4rem;
		width: 4.5rem;
		transform: translateX(-50%);

		&-fur {
			@include border-radius(50% 65%, 50% 35%);

			z-index: 3;
			background-color: var(--white);

			&,
			&-wrap {
				@include absolute-fill;

				transform-origin: center bottom;
				transform: var(--snout-fur-transform, none);
				transition: var(--snout-fur-transition, transform 0.25s ease-in-out);
			}
		}
	}

	&-face {
		@include absolute-fill;
		@include border-radius(50% 75%, 50% 25%);

		z-index: 3;
		background-color: var(--primary-color);
	}

	&-ear {
		--ear-position-x: -2rem;
		z-index: 1;
		top: 1.5rem;
		height: 6rem;
		width: 6rem;
		background-color: var(--white);
		border-radius: var(--ear-border-radius);
		transform-origin: var(--ear-transform-origin);
		transform: rotate(var(--ear-rotate));

		&::before {
			content: '';
			top: 1.5rem;
			left: var(--ear-inner-left, auto);
			right: var(--ear-inner-right, auto);
			height: 3rem;
			width: 3rem;
			transform: rotate(var(--ear-inner-rotate));
			border-radius:  var(--ear-inner-border-radius);
			background-color: var(--secondary-color);
		}

		&::after {
			content: '';
			bottom: 0.5rem;
			left: var(--ear-shadow-left, auto);
			right: var(--ear-shadow-right, auto);
			height: 4rem;
			width: 3rem;
			border-radius: 100%;
			background-color: var(--shadow-color);
			opacity: 0.5;
		}

		&-fur {
			height: 1.25rem;
			width: 1.25rem;
			transform: skewX(var(--ear-fur-skew)) rotate(var(--ear-fur-rotate, 0deg));
			background-color: var(--white);

			&-1 {
				bottom: 0.625rem;
				left: var(--ear-fur-1-left, auto);
				right: var(--ear-fur-1-right, auto);
			}

			&-2 {
				--ear-fur-rotate: var(--ear-fur-2-rotate);
				bottom: 0rem;
				left: var(--ear-fur-2-left, auto);
				right: var(--ear-fur-2-right, auto);
			}
		}

		&-left {
			--ear-border-radius: 0.5rem 0 0 100%;
			--ear-transform-origin: right center;
			--ear-rotate: 30deg;
			--ear-shadow-right: 0.625rem;
			--ear-inner-left: 1.5rem;
			--ear-inner-rotate: -5deg;
			--ear-inner-border-radius:  0.25rem 90% 0 90%;
			--ear-fur-skew: -30deg;
			--ear-fur-1-left: 1.875rem;
			--ear-fur-2-left: 2.325rem;
			--ear-fur-2-rotate: -30deg;
			left: var(--ear-position-x);
		}

		&-right {
			--ear-border-radius: 0 0.5rem 100% 0;
			--ear-transform-origin: left center;
			--ear-rotate: -30deg;
			--ear-shadow-left: 0.625rem;
			--ear-inner-right: 1.5rem;
			--ear-inner-rotate: 5deg;
			--ear-inner-border-radius:  90% 0.25rem 90% 0;
			--ear-fur-skew: 30deg;
			--ear-fur-1-right: 1.875rem;
			--ear-fur-2-right: 2.325rem;
			--ear-fur-2-rotate: 30deg;
			right: var(--ear-position-x);
		}
	}

	&-head {
		position: relative;
		z-index: 10;
		height: 10rem;
		width: 12.5rem;
		transform-origin: center bottom;
		animation: var(--head-animation);
	}

	&-shirt {
		@include absolute-fill;

		z-index: 5;
		background-color: var(--accent-color);
		// transform: perspective(1rem) rotateX(3deg);
		transform: perspective(2rem) rotateX(6deg) translateZ(1px); // safari💀

		&::before,
		&::after {
			--shirt-bottom-position-x: 0.1875rem;
			content: '';
			bottom: -0.325rem;
			height: 1.9375rem;
			width: 1.9375rem;
			transform: rotate(var(--shirt-bottom-rotate));
			background-color: var(--accent-color);
		}

		&::before {
			--shirt-bottom-rotate: 15deg;
			left: var(--shirt-bottom-position-x);
		}

		&::after {
			--shirt-bottom-rotate: -15deg;
			right: var(--shirt-bottom-position-x);
		}

		&-cut {
			z-index: 6;
			left: 50%;
			-webkit-transform: translateZ(2px); // safari💀

			&-fur {
				z-index: 2;
				border-style: solid;
				border-width: 2rem 1.25rem 0 1.25rem;
				border-color: var(--secondary-color) transparent transparent transparent;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		&-collar {
			z-index: 1;

			&::before,
			&::after {
				content: '';
				background-color: var(--white);
			}

			&::before {
				top: 0.5rem;
				left: var(--collar-1-left, auto);
				right: var(--collar-1-right, auto);
				height: 1rem;
				width: 1rem;
				transform: rotate(var(--collar-1-rotate));
			}

			&::after {
				top: 1.25rem;
				left: var(--collar-2-left, auto);
				right: var(--collar-2-right, auto);
				height: 0.625rem;
				width: 0.625rem;
				transform: rotate(var(--collar-2-rotate));
			}

			&-left {
				--collar-1-rotate: 20deg;
				--collar-2-rotate: 18deg;
				--collar-1-left: -1rem;
				--collar-2-left: -0.5rem;
			}

			&-right {
				--collar-1-rotate: -20deg;
				--collar-2-rotate: -18deg;
				--collar-1-right: -1rem;
				--collar-2-right: -0.5rem;
			}
		}
	}

	&-arm {
		--arm-rotate-flip: 1;
		--arm-position-x: -0.25rem;
		--arm-height-lower: 1rem;
		z-index: 1;
		top: 0.25rem;
		height: 2rem;
		width: 0.5rem;
		transform-origin: 0.25rem center;
		transform: rotate(calc(var(--arm-rotate, 50deg) * var(--arm-rotate-flip)));
		background-color: var(--white);
		transition: var(--arm-transition, transform 0.25s 1.5s ease-in-out);
		animation: var(--arm-animation);

		&-lower {
			z-index: 2;
			top: calc(100% - 0.25rem);
			width: 100%;
			height: var(--arm-height-lower);
			transform-origin: center 0.25rem;
			transform: rotate(calc(var(--arm-lower-rotate) * var(--arm-rotate-flip)));
			background-color: inherit;
			transition: var(--arm-lower-transition, transform 0.25s ease-in-out)
		}

		&-paw {
			z-index: 1;
			left: calc(50% - 0.375rem);
			top: calc(100% + var(--arm-height-lower) - 0.375rem);
			height: 1rem;
			width: 0.75rem;
			transform: rotate(calc(10deg * var(--arm-rotate-flip))) scale(var(--arm-paw-scale, 1));
			transform-origin: center 0.125rem;
			background-color: var(--secondary-color);
			border-radius: var(--arm-paw-border-radius, 100%);
			transition: var(--arm-paw-transition, 0s 0.25s);
		}

		&-left {
			--finger-rotate-flip: -1;
			--arm-paw-finger-1-right: var(--arm-paw-finger-1-position-x);
			--arm-paw-finger-2-right: var(--arm-paw-finger-2-position-x);
			--arm-paw-finger-3-right: var(--arm-paw-finger-3-position-x);
			--arm-paw-finger-wrap-right: 0;
			left: var(--arm-position-x);
		}

		&-right {
			--arm-rotate-flip: -1;
			--arm-paw-finger-1-left: var(--arm-paw-finger-1-position-x);
			--arm-paw-finger-2-left: var(--arm-paw-finger-2-position-x);
			--arm-paw-finger-3-left: var(--arm-paw-finger-3-position-x);
			--arm-paw-finger-wrap-left: 0;
			right: var(--arm-position-x);
		}
	}

	&-arm-paw-rage {
		visibility: var(--arm-paw-rage-visibility, hidden);
		transition: var(--arm-paw-rage-transition, transform 0.25s ease-in-out, visibility 0s 0.27s);

		&,
		&-finger-wrap {
			top: calc(100% - var(--arm-paw-rage-top-offset, 0.125rem));
			transform: rotate(calc(var(--arm-paw-rage-rotate, 10deg) * var(--arm-rotate-flip))) translateX(calc(var(--arm-paw-rage-translate) * var(--arm-rotate-flip))) scale(var(--arm-paw-rage-scale, 1));
		}

		&-finger {
			height: 1.5rem;
			width: 0.75rem;
			transform-origin: center top;
			transform: scaleY(var(--arm-paw-finger-scale, 0)) rotate(calc(var(--arm-paw-finger-rotate) * var(--finger-rotate-flip)));
			transition: var(--arm-paw-finger-transition, transform 0s ease-in-out);

			&::before,
			&::after {
				content: '';
			}

			&::before {
				@include absolute-fill();
				
				border-bottom-left-radius: 50% 50%;
				border-bottom-right-radius: 50% 50%;
				background-color: var(--secondary-color);
			}

			&::after {
				z-index: -1;
				top: calc(100% - 0.125rem);
				left: calc(50% - 0.125rem);
				height: 0.5rem;
				width: 0.1875rem;
				border-bottom-left-radius: 50% 70%;
				border-bottom-right-radius: 50% 70%;
				background-color: var(--black);
			}

			&-1 {
				--arm-paw-finger-rotate: 55deg;
				top: 0.4375rem;
				height: 1rem;
				left: var(--arm-paw-finger-1-left, auto);
				right: var(--arm-paw-finger-1-right, auto);
			}

			&-2 {
				--arm-paw-finger-rotate: 5deg;
				top: 0.75rem;
				left: var(--arm-paw-finger-2-left, auto);
				right: var(--arm-paw-finger-2-right, auto);
			}

			&-3 {
				--arm-paw-finger-rotate: -10deg;
				top: 0.75rem;
				left: var(--arm-paw-finger-3-left, auto);
				right: var(--arm-paw-finger-3-right, auto);
			}

			&-wrap {
				--arm-paw-rage-scale: 1;
				z-index: -1;
				left: var(--arm-paw-finger-wrap-left, auto);
				right: var(--arm-paw-finger-wrap-right, auto);
				height: 1rem;
				width: 1rem;
			}
		}
	}

	&-torso {
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 3rem;
		perspective: 1000px;
	}

	&-tail {
		top: 2rem;
		left: calc(100% - 1rem);
		height: 3rem;
		width: 3rem;
		transform-origin: left top;
		transform: rotate(var(--tail-rotate, -30deg));
		border-top-right-radius: 85%;
		border-bottom-left-radius: 85%;
		border-bottom-right-radius: 15%;
		background-color: var(--primary-color);
		// background: linear-gradient(135deg, var(--primary-color) 30%, var(--secondary-color) 30%, var(--secondary-color) 40%, var(--primary-color) 40%, var(--primary-color) 55%, var(--secondary-color) 55%, var(--secondary-color) 65%, var(--primary-color) 65%, var(--primary-color) 80%, var(--secondary-color) 80%);
		background-image: radial-gradient(circle 4rem at 0 0.3125rem, var(--primary-color) 30%, var(--secondary-color) 30%, var(--secondary-color) 40%, var(--primary-color) 40%, var(--primary-color) 55%, var(--secondary-color) 55%, var(--secondary-color) 65%, var(--primary-color) 65%, var(--primary-color) 80%, var(--secondary-color) 80%);
		background-repeat: no-repeat;
		transition: var(--tail-transition, transform 0.25s ease-in-out);
		animation: var(--tail-animation);
	}

	&-leg {
		--leg-position-x: 0.75rem;
		z-index: 1;
		top: calc(100% - 0.25rem);
		height: 1.5rem;
		width: 1rem;
		border-top-right-radius: 0.25rem;
		border-top-left-radius: 0.25rem;
		background-color: var(--secondary-color);
		
		&-shoe {
			height: 100%;
			width: 100%;
			transform: rotateY(var(--leg-rotate-y));
			transition: var(--leg-transition, transform 0.1s ease-out);

			&::before,
			&::after {
				content: '';
				transform-origin: var(--leg-foot-transform-origin);
				transform: rotate(var(--leg-foot-rotate));
				border-radius: 100%;
			}
	
			&::before {
				top: calc(100% - 0.5rem);
				left: var(--leg-foot-left, auto);
				right: var(--leg-foot-right, auto);
				height: 0.625rem;
				width: 1.325rem;
				background-color: var(--black);
			}
	
			&::after {
				bottom: 0.125rem;
				left: 0;
				width: 100%;
				height: 0.4375rem;
				background-color: var(--secondary-color);
			}
		}


		&-left {
			--leg-foot-left: -0.0625rem;
			--leg-foot-rotate: 20deg;
			--leg-foot-transform-origin: left center;
			left: var(--leg-position-x);
			animation: var(--leg-animation);
		}

		&-right {
			--leg-rotate-flip: -1;
			--leg-foot-right: -0.0625rem;
			--leg-foot-rotate: -20deg;
			--leg-foot-transform-origin: right center;
			right: var(--leg-position-x);
		}
	}

	&-skirt {
		@include absolute-fill;

		z-index: 2;
		background-color: var(--accent-color);
		// transform: perspective(1rem) rotateX(-2deg);
		transform: perspective(2rem) rotateX(-4deg) scaleX(0.95) translateZ(2px); // safari💀

		&::before,
		&::after {
			content: '';
		}

		&::before {
			top: -0.5rem;
			left: 50%;
			width: 95%;
			height: 2rem;
			transform: translateX(-50%);
			border-radius: 100%;
			background-color: var(--shadow-color);
			mix-blend-mode: multiply;
		}

		&::after {
			bottom: -0.25rem;
			border-style: solid;
			border-width: 0.25rem 2rem 0 2rem;
			border-color: var(--accent-color) transparent transparent transparent;

		}
	}

	&-body-lower {
		z-index: 1;
		bottom: 0;
		height: 3rem;
		width: 100%;
		perspective: 1000px;
	}

	&-body {
		position: relative;
		margin-top: -1rem;
		left: 50%;
		transform: translateX(-50%);
		width: 4rem;
		height: 5.5rem;
		// perspective: 1000px;
	}

	&-arm-clone {
		--finger-rotate-flip: 1;
		--arm-paw-finger-1-position-x: -0.3125rem;
		--arm-paw-finger-2-position-x: -0.375rem;
		--arm-paw-finger-3-position-x: 1.0625rem;
		z-index: 11;
		position: absolute;
		top: 10rem;

		.retsuko-arm {
			background-color: transparent;
		}
	}
}

.rage-control {
	position: absolute;
	opacity: 0;

	&:checked {
		+ .retsuko {
			--rage-delay: 0.4s;
			--rage-delay-2: 0.6s;
			--rage-delay-3: 0.8s;
			--rage-delay-4: 1.2s;

			--rage-opacity: 1;
			--rage-transition: opacity 0.4s var(--rage-delay-2);

			--eye-scale: 0.3;
			--eye-rotate: 25deg;
			--eye-visibility: hidden;
			--eye-transition: transform 0.2s 0.3s ease-in-out, visibility 0s 0.5s;

			// start eye rotated to match original eye rotation
			--eye-rage-top-offset: -1.25rem;
			--eye-rage-scale: 1;
			--eye-rage-transition: transform 0.2s var(--rage-delay) ease-in-out, top 0.2s var(--rage-delay-2) ease-in-out;

			--eyebrow-transition: transform 0.9s 0.2s ease-out;
			--eyebrow-rage-scale: 1;
			--eyebrow-rage-transition: transform 0.2s 0.4s ease-in-out;
			
			--blush-opacity: 0;
			--blush-transition: opacity 1s;

			--mouth-transform: scale(0.3);
			--mouth-border-radius: 50% / 70% 70% 30% 30%;
			--mouth-background-color: var(--black);
			--mouth-transition: transform 0.05s ease-in-out;

			--mouth-rage-scale: 1;
			--mouth-rage-transition: transform 0.2s var(--rage-delay-2) ease-in-out;
			--mouth-rage-animation: mouthShake 0.1s var(--rage-delay-4) infinite;

			--tongue-scale: 1;
			--tongue-transition: transform 0.4s var(--rage-delay-3) ease-in-out;

			--nose-translate-y: -1.25rem;
			--nose-transition: transform 0.2s var(--rage-delay-2) ease-in-out;

			--face-fur-scale: 1.3;
			--face-fur-transition: transform 0.2s var(--rage-delay-2) ease-in-out;
			--snout-fur-transform: scaleY(1.1);
			--snout-fur-transition: transform 0.2s var(--rage-delay-2) ease-in-out;

			--tail-rotate: -60deg;
			--tail-transition: transform 0.4s ease-in-out;

			// --arm-rotate: 15deg;
			--arm-animation: armRotateDown 0.3s ease-in-out forwards;
			--arm-transition: transform 0.3s ease-in-out;
			--arm-lower-rotate: 100deg;
			--arm-lower-transition: transform 0.5s var(--rage-delay-3) ease-in-out;
			--arm-paw-scale: 0;
			--arm-paw-border-radius: 45%;
			--arm-paw-transition: 0s var(--rage-delay-3);
			--arm-paw-rage-top-offset: 0.375rem;
			--arm-paw-rage-scale: 3, 1.9;
			--arm-paw-rage-rotate: 60deg;
			--arm-paw-rage-translate: 0.5rem;
			--arm-paw-rage-visibility: visible;
			--arm-paw-rage-transition: visibility 0s var(--rage-delay-3), transform 0.5s var(--rage-delay-3) ease-in-out, border-radius 0.6s var(--rage-delay-3) ease-in-out, top 0.2s var(--rage-delay-3);
			--arm-paw-finger-scale: 1;
			--arm-paw-finger-transition: transform 0.2s 1.1s ease-in-out;

			--leg-rotate-y: -180deg;
			--leg-transition: transform 0.1s var(--rage-delay-2) ease-out;

			.retsuko-eyebrow {
				--eyebrow-transform: translate(calc(0.875rem * var(--eyebrow-flip)), -0.375rem) rotate(calc(20deg * var(--eyebrow-flip)));
			}
		}
		~ .rage-background {
			--rage-opacity: 1;
			--rage-size: 140%;
			--rage-transition: opacity 0.3s 0.6s, background-size 0.7s 0.6s ease-in-out;
		}
	}

	&:not(:checked) {
		+ .retsuko {
			--dance-animation: 0.8s 2s infinite;
			--eye-animation: blinky 7s 2s infinite;

			--head-animation: headRotate var(--dance-animation);

			--arm-rotate: 50deg;
			--arm-animation: armRotate var(--dance-animation);

			--leg-animation: legRotate var(--dance-animation);

			--tail-animation: tailRotate var(--dance-animation);
		}
	}
}

.rage-background {
	position: fixed;
	z-index: 1;
	height: 100%;
	width: 100%;
	background-image: radial-gradient(circle, var(--rage-color) 0%, var(--black) 70%);
	background-size: var(--rage-size, 100%);
	background-position: center;
	background-repeat: no-repeat;
;	opacity: var(--rage-opacity, 0);
	mix-blend-mode: multiply;
	transition: var(--rage-transition, 0.25s);
}

@keyframes mouthShake {
	0%, 100% {
		--mouth-rage-scale: 1;
	}
	50% { 
		--mouth-rage-scale: 1, 1.1;
	}
}

@keyframes armRotate {
	50% {
		transform: rotate(calc(90deg * var(--arm-rotate-flip)))
	}
}

@keyframes headRotate {
	50% {
		transform: rotate(-5deg)
	}
}

@keyframes tailRotate {
	50% {
		transform: rotate(-60deg)
	}
}

@keyframes legRotate {
	50% {
		transform: rotate(calc(80deg * var(--leg-rotate-flip, 1))) translate(-0.25rem, 0.125rem)
	}
}

@keyframes armRotateDown {
	100% {
		transform: rotate(calc(15deg * var(--arm-rotate-flip)))
	}
}
View Compiled

External CSS

  1. https://codepen.io/tiffachoo/pen/4cf23c36235004454fe67fabc974887f

External JavaScript

This Pen doesn't use any external JavaScript resources.