:root {
	--black: #624a29;
	--white: #fff;
	--primary-color: #ff9c6a;
	--primary-color-dark: #ee7331;
	--primary-color-tint: #fdb490;
	--secondary-color: #fff6a4;
	--secondary-color-tint: #fffcdf;
	--secondary-color-dark: #f5d79d;
	--accent-color: #ff6a6a;

	--background: var(--primary-color-tint);
	--circle-sizing: 18rem;
	--circle-rotate: 0deg;
}

* { box-sizing: border-box; }
body {
	display: grid;
	place-items: center;
	height: 100vh;
	background-color: var(--background);
	font-size: 16px;
	line-height: 1;
	overflow-x: hidden;
}

.tiger {
	position: relative;
	height: var(--circle-sizing);
	width: var(--circle-sizing);
	transform-style: preserve-3d;
	transform: rotateY(var(--circle-rotate));
	// perspective: 1000px;
	transition: 0.5s ease-in-out;
	cursor: pointer;

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

	&-eye {
		@include border-radius(50% 60%, 50% 40%);
		@include position-x(3rem);
		
		z-index: 5;
		top: 5.5rem;
		height: 1.125rem;
		width: 0.875rem;
		transform-origin: center 70%;
		background-color: var(--black);
		animation: blinky 7s infinite;
	}

	&-eyebrow {
		@include position-x(2rem);

		--flip: 1;
		z-index: 2;
		top: 3.75rem;
		height: 1.25rem;
		width: 1.5rem;
		transform: rotate(calc(20deg * var(--flip)));
		border-radius: 100%;
		background-color: var(--secondary-color);

		&-left {
			--flip: -1;
		}
	}

	&-nose {
		--sizing: 1rem;
		z-index: 4;
		top: 6rem;
		left: calc(50% - (var(--sizing) / 2));
		height: var(--sizing);
		width: var(--sizing);
		transform: rotate(45deg);
		border-top-left-radius: 100%;
		border-top-right-radius: 30%;
		border-bottom-left-radius: 30%;
		border-bottom-right-radius: 0.125rem;
		background-color: var(--accent-color);
	}

	&-snout {
		--offset: -0.125rem;
		--flipper: 1;
		z-index: 2;
		top: 6.5rem;
		left: 50%;
		height: 2.25rem;
		width: 2rem;

		&::before,
		&::after {
			content: '';
			top: 0;
			height: 100%;
			width: 100%;
			border-radius: 100%;
			background-color: var(--secondary-color);
			transform: rotate(calc(50deg * var(--flipper)));
		}

		&::before {
			right: calc(100% + var(--offset));
		}

		&::after {
			--flipper: -1;
			left: var(--offset);
		}
	}

	&-blush {
		@include position-x(1.5rem);

		z-index: 2;
		top: 6rem;
		height: 1.75rem;
		width: 2.25rem;
		border-radius: 100%;
		background-color: var(--accent-color);
		opacity: 0.5;
	}

	&-face-fluff {
		@include position-x(1.25rem);

		--flip: 1;
		--before-pos: -0.75rem;
		z-index: 1;
		bottom: 0rem;
		height: 3rem;
		width: 1.75rem;
		transform: rotate(calc(70deg * var(--flip)));
		transform-origin: center top;
		border-bottom-left-radius: 50% 100%;
		border-bottom-right-radius: 50% 100%;
		background-color: var(--primary-color);

		&::before {
			content: '';
			bottom: 0.25rem;
			left: var(--left);
			right: var(--right);
			height: 2rem;
			width: 1.5rem;
			transform: rotate(calc(-10deg * var(--flip)));
			border-radius: inherit;
			background-color: inherit;
		}

		&-right {
			--flip: -1;
			--right: var(--before-pos);
		}

		&-left {
			--left: var(--before-pos);
		}
	}

	&-stripes-top {
		top: 0;
		height: 4rem;
		width: 1rem;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
		background-color: var(--black);

		&,
		&::before,
		&::after {
			left: 50%;
			transform: translateX(-50%);
			background-color: var(--black);	
		}

		&::before,
		&::after {
			content: '';
			height: 0.75rem;
			border-radius: 50%;
		}

		&::before {
			top: 0.75rem;
			width: 3rem;
		}

		&::after {
			top: 2rem;
			width: 2.5rem;
		}
	}

	&-stripes-side {
		@include position-x(-0.5rem);
		--flip: 1;
		top: 5.5rem;

		&::before,
		&::after {
			content: '';
			width: 0.75rem;
			transform-origin: center top;
			border-bottom-left-radius: 50% 100%;
			border-bottom-right-radius: 50% 100%;
			background-color: var(--black);
		}

		&::before {
			height: 1.25rem;
			transform: rotate(calc(85deg * var(--flip)));
		}

		&::after {
			top: 1rem;
			height: 1rem;
			transform: rotate(calc(90deg * var(--flip)));
		}

		&-left { 
			--flip: -1;
		}

		&-right {
			&::before,
			&::after {
				right: 0;
			}
		}
	}

	&-face {
		@include border-radius(50% 65%, 50% 35%);
		
		z-index: 5;
		inset: 0;
		background-color: var(--primary-color);

		&-mask {
			background-color: transparent;
			overflow: hidden;
		}
	}

	&-ear {
		@include position-x(-0.5rem);

		--flip: 1;
		--inner-position: -2rem;
		z-index: 1;
		top: 0.75rem;
		height: 3rem;
		width: 3.5rem;
		transform: rotate(calc(50deg * var(--flip)));
		border-radius: 50% / 40%;
		background-color: var(--primary-color);
		overflow: hidden;

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

		&::before {
			inset: 1rem;
			border-radius: 50%;
			background-color: var(--accent-color);
		}

		&::after {
			top: -1rem;
			left: var(--inner-left);
			right: var(--inner-right);
			height: 2rem;
			width: 4rem;
			transform: rotate(calc(-10deg * var(--flip)));
			border-radius: 100%;
			background-color: var(--black);
		}

		&-left {
			--flip: -1;
			--inner-right: var(--inner-position);
		}

		&-right {
			--inner-left: var(--inner-position);
			animation: earTwitch 3s infinite;
		}
	}

	&-head {
		z-index: 2;
		bottom: 1.5rem;
		left: 50%;
		height: 11rem;
		width: 13rem;
		transform: translateX(-50%) translateY(var(--head-translate-y, 0));
		transform-origin: center bottom;
		transition: 0.4s ease-out;

		&::before {
			content: '';
			left: 50%;
			bottom: -1rem;
			height: 3rem;
			width: 4rem;
			transform: translateX(-50%);
			border-radius: 100%;
			background-color: var(--secondary-color-dark);
		}
	}

	&-paw {
		@include position-x(1.5rem);

		--flip: 1;
		z-index: 6;
		bottom: 0;
		height: 3rem;
		width: 4rem;
		transform: rotate(calc(20deg * var(--flip)));
		background-color: var(--secondary-color);
		border-radius: 2rem;

		&::before,
		&::after {
			content: '';
			left: 50%;
			transform: translateX(-50%);
		}

		&::before {
			z-index: 1;
			bottom: -0.25rem;
			height: 80%;
			width: 2rem;
			border-radius: 1rem;
			background-color: var(--secondary-color);
		}

		&::after {
			bottom: 0;
			width: 2.5rem;
			height: 50%;
			border-radius: 1.5rem;
			background-color: var(--secondary-color-dark);
		}

		&-right {
			--flip: -1;
		}
	}

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

		inset: 0;
		background-color: var(--primary-color);

		&::before {
			content: '';
			left: 50%;
			height: 100%;
			width: 65%;
			transform: translateX(-50%);
			border-radius: inherit;
			background-color: var(--secondary-color);
		}
	}

	&-body {
		bottom: -2rem;
		left: 50%;
		width: 10rem;
		height: 8rem;
		transform: translateX(-50%);
	}

	&-front {
		background-color: var(--secondary-color-tint);
		transform: translateZ(0.25rem);
		backface-visibility: hidden;

		&,
		&-mask {
			inset: 0;
			border-radius: 100%;
		}

		&-mask {
			overflow: hidden;
			transform: translateZ(0); // safari - overflow + border-radius 💀
		}
	}

	&-cross {
		--flip: 1;
		top: 4.5rem;
		left: 50%;
		height: 1.5rem;
		width: 1.5rem;
		transform: translateX(-50%);

		&::before,
		&::after {
			content: '';
			left: 50%;
			height: 100%;
			width: 0.5rem;
			border-radius: 50%;
			background-color: var(--primary-color-dark);
			transform: translateX(-50%) rotate(calc(45deg * var(--flip)))
		}

		&::before {
			--flip: -1;
		}
	}

	&-tail {
		inset: 0;
		transform-origin: 50% 95%;
		transform: rotate(30deg);
		border-radius: inherit;
		background-color: var(--primary-color);
		overflow: hidden;
		
		&::before {
			content: '';
			height: 1.5rem;
			width: 150%;
			left: -50%;
			border-radius: 100%;
			background-color: var(--black)
		}

		&-stripes {
			top: 2.5rem;
			left: -0.25rem;
			width: 2rem;
			
			&::before,
			&::after {
				content: '';
				height: 1rem;
				width: 100%;
				border-top-right-radius: 100% 50%;
				border-bottom-right-radius: 100% 50%;
				background-color: var(--black);
			}

			&::after {
				top: 1.5rem;
				left: -0.5rem;
			}
		}

		&,
		&-wrap::before {
			animation: tailWiggle 2s ease-in infinite;
		}

		&-wrap {
			top: -3.5rem;
			left: 50%;
			height: 7.5rem;
			width: 3rem;
			transform: translateX(-50%);
			border-radius: 40% 60% 50% 50% / 20% 30% 70% 80%;

			&::before {
				content: '';
				z-index: -1;
				left: 0rem;
				bottom: 0.25rem;
				height: 58%;
				width: 3rem;
				transform-origin: center bottom;
				transform: rotate(50deg);
				border-radius: inherit;
				background-color: var(--primary-color-dark);
				animation-name: tailWiggleShadow;
			}
		}
	}

	&-rear-stripes {
		@include position-x(-1rem);

		--flip: 1;
		top: 4.5rem;
		height: 2.5rem;

		&::before,
		&::after {
			content: '';
			height: 100%;
			width: 1rem;
			transform-origin: center top;
			border-bottom-left-radius: 50% 100%;
			border-bottom-right-radius: 50% 100%;
			background-color: var(--black);
		}

		&::before {
			transform: rotate(calc(80deg * var(--flip)));
		}

		&::after {
			top: 2rem;
			transform: rotate(calc(95deg * var(--flip)));
		}

		&-left {
			--flip: -1;
		}

		&-right {
			&::before,
			&::after {
				right: 0;
			}
		}
	}

	&-rear {
		@include border-radius(50% 55%, 50% 45%);

		inset: 0;
		background-color: var(--primary-color);
		overflow: hidden;

		&::before {
			content: '';
			bottom: -2rem;
			left: 50%;
			height: 60%;
			width: 70%;
			transform: translateX(-50%);
			border-radius: inherit;
			background-color: var(--secondary-color);
		}
	}

	&-body-back {
		bottom: -1rem;
		left: 50%;
		height: 11rem;
		width: 13.5rem;
		transform: translateX(-50%);
	}

	&-toe-beans {
		bottom: 0.25rem;
		left: 50%;
		transform: translateX(-50%);

		&,
		&::before,
		&::after {
			height: 0.625rem;
			width: 0.5rem;
			border-radius: 100%;
			background-color: var(--accent-color);
		}

		&::before,
		&::after {
			content: '';
			bottom: 0.25rem;
		}

		&::before {
			left: -0.75rem;
		}

		&::after {
			right: -0.75rem;
		}

		&-main {
			bottom: 1.25rem;
			left: 50%;
			height: 1.5rem;
			width: 1.75rem;
			transform: translateX(-50%);
			border-radius: 100%;
			background-color: var(--accent-color);
		}
	}

	&-paw-back {
		@include position-x(2.5rem);
		@include border-radius(50% 70%, 50% 30%);

		--flip: 1;
		bottom: -0.25rem;
		height: 4rem;
		width: 3rem;
		background-color: var(--secondary-color);
		transform-origin: 50% 10%;
		transform: rotate(calc(30deg * var(--flip)));
		animation: pawRotate 5s ease-in-out infinite;

		&::before {
			content: '';
			left: 50%;
			bottom: -0.25rem;
			height: 2rem;
			width: 2rem;
			transform: translateX(-50%);
			border-radius: 100%;
			background-color: inherit;
		}

		&-left {
			--flip: -1;
		}
	}

	&-back {
		position: absolute;
		inset: 0;
		transform: rotateY(180deg);
		border-radius: 100%;
		background-color: var(--secondary-color-tint);
		backface-visibility: hidden;

		&,
		&-mask {
			inset: 0;
			border-radius: 100%;
		}

		&-mask {
			overflow: hidden;
			transform: translateZ(0); // safari - overflow + border-radius 💀
		}
	}

	&-decor {
		&,
		&::before,
		&::after {
			position: absolute;
			height: 2rem;
			border-radius: 2rem;
			background-color: var(--secondary-color);
		}
		
		&-1 {
			top: 3rem;
			left: 0rem;
			width: 20rem;
			border-bottom-right-radius: 0;

			&::before {
				content: '';
				top: 2rem;
				right: -5rem;
				width: 11rem;
				border-top-left-radius: 0;
			}
		}

		&-2 {
			top: 9rem;
			left: -9rem;
			width: 14rem;
			border-bottom-right-radius: 0;

			&::before {
				content: '';
				top: -4rem;
				left: 2rem;
				width: 6rem;
			}

			&::after {
				content: '';
				top: 2rem;
				left: 5rem;
				width: 26rem;
				border-top-left-radius: 0;
			}
		}

		&-3 {
			top: 17rem;
			right: -4rem;
			width: 6rem;
		}

		&-wrap {
			position: absolute;
			z-index: -1;
			left: 50%;
			height: var(--circle-sizing);
			width: var(--circle-sizing);
			transform: translateX(-50%);
			opacity: 0.2;
		}
	}

	&-control {
		position: absolute;
		opacity: 0;

		&:checked {
			+ .tiger {
				--circle-rotate: 180deg;
			}
		}
	}

	&:hover { 
		.tiger-head {
			--head-translate-y: 2rem;
		}
	}

	&-wrap {
		display: grid;
		animation: squiggleVision 0.3s infinite alternate;
	}
}

.svg-filter-hide {
	position: absolute; 
	opacity: 0; 
	pointer-events: none;
}

@keyframes tailWiggle {
	50% {
		transform: rotate(40deg);
	}
}

@keyframes tailWiggleShadow {
	50% {
		transform: rotate(52deg) scaleY(0.95);
	}
}

@keyframes pawRotate {
	50% {
		transform: rotate(calc(10deg * var(--flip)))
	}
}

@keyframes earTwitch {
	0%, 70%, 85% {
		transform: rotate(calc(50deg * var(--flip))) 
	}
	80%, 90% {
		transform: rotate(calc(60deg * var(--flip))) scaleX(0.9);
	}
}

@keyframes squiggleVision {
	0%, 100% {
		filter: url('#filterSquiggle1');
	}
	25% {
		filter: url('#filterSquiggle2');
	}
	50% {
		filter: url('#filterSquiggle3');
	}
	75% {
		filter: url('#filterSquiggle4');
	}
}