@property --dur {
	syntax: "<time>";
	inherits: true;
	initial-value: 10s;
}
@property --transX {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
@property --transY {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
@property --rot {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

speech-bubbles {
	display: block;
	width: 100%;
	height: fit-content;

	animation: fade-out 1s 120s forwards;

	svg {
		overflow: visible;
	}

	&:has(#b1 input:checked) {
		#b1 { display: none; }
		#b2 { display: grid; }
	}
	&:has(#b2 input:checked) {
		#b2 { display: none; }
		#b3 { display: grid; }
	}
	&:has(#b3 input:checked) {
		#b3 { display: none; }
		#b4 { display: grid; }
	}
	&:has(#b4 input:checked) {
		#b4 { display: none; }
		#b5 { display: grid; }
	}
	&:has(#b5 input:checked) {
		#b5 { display: none; }
		#b6 { display: grid; }
	}
}
speech-bubble {
	display: none;
	width: max(calc(var(--l1-chars) * 1ch), calc(var(--l2-chars) * 1ch), calc(var(--l3-chars) * 1ch), calc(var(--l4-chars) * 1ch), calc(var(--l5-chars) * 1ch), calc(var(--l6-chars) * 1ch));
	height: fit-content;
	padding: 20px;
	font-family: 'CourierPrime';
	font-size: 1.5rem;
	margin: auto;
	overflow: visible;
	border: solid var(--text);
	border-radius: 15px;
	background: var(--primary);
	grid-template-columns: 1fr;

	p, a {
		margin: auto;
		white-space: nowrap;
		overflow: hidden;
		visibility: hidden;
	}
	input {
		grid-row-start: 1;
		grid-column-start: 1;
		width: initial !important;
		z-index: 10;
		margin: -20px;
		opacity: 0;
	}
	span {
		grid-row-start: 1;
		grid-column-start: 1;
		width: 100% !important;
	}

	--default-speed: .06;

	--l1-chars: 0;
	--l1-speed: var(--default-speed);
	--l2-chars: 0;
	--l2-speed: var(--default-speed);
	--l3-chars: 0;
	--l3-speed: var(--default-speed);
	--l4-chars: 0;
	--l4-speed: var(--default-speed);
	--l5-chars: 0;
	--l5-speed: var(--default-speed);
	--l6-chars: 0;
	--l6-speed: var(--default-speed);

	--l1-dur: calc(var(--l1-speed) * var(--l1-chars) * 1s);
	--l1-delay: 0s;

	--l2-dur: calc(var(--l2-speed) * var(--l2-chars) * 1s);
	--l2-delay: calc(var(--l1-delay) + var(--l1-dur) + .15s);

	--l3-dur: calc(var(--l3-speed) * var(--l3-chars) * 1s);
	--l3-delay: calc(var(--l2-delay) + var(--l2-dur) + .15s);

	--l4-dur: calc(var(--l4-speed) * var(--l4-chars) * 1s);
	--l4-delay: calc(var(--l3-delay) + var(--l3-dur) + .15s);

	--l5-dur: calc(var(--l5-speed) * var(--l5-chars) * 1s);
	--l5-delay: calc(var(--l4-delay) + var(--l4-dur) + .15s);

	--l6-dur: calc(var(--l6-speed) * var(--l6-chars) * 1s);
	--l6-delay: calc(var(--l5-delay) + var(--l5-dur) + .15s);

	:nth-child(1), :nth-child(1) * {
		width: calc(var(--l1-chars) * 1ch);
		animation: type var(--l1-dur) var(--l1-delay) steps(var(--l1-chars), end) forwards;
	}
	:nth-child(2), :nth-child(2) * {
		width: calc(var(--l2-chars) * 1ch);
		animation: type var(--l2-dur) var(--l2-delay) steps(var(--l2-chars), end) forwards;
	}
	:nth-child(3), :nth-child(3) * {
		width: calc(var(--l3-chars) * 1ch);
		animation: type var(--l3-dur) var(--l3-delay) steps(var(--l3-chars), end) forwards;
	}
	:nth-child(4), :nth-child(4) * {
		width: calc(var(--l4-chars) * 1ch);
		animation: type var(--l4-dur) var(--l4-delay) steps(var(--l4-chars), end) forwards;
	}
	:nth-child(5), :nth-child(5) * {
		width: calc(var(--l5-chars) * 1ch);
		animation: type var(--l5-dur) var(--l5-delay) steps(var(--l5-chars), end) forwards;
	}
	:nth-child(6), :nth-child(6) * {
		width: calc(var(--l6-chars) * 1ch);
		animation: type var(--l6-dur) var(--l6-delay) steps(var(--l6-chars), end) forwards;
	}

	&#b1 {
		margin-left: 40px;
		display: grid;
		--l1-chars: 3;
		--l1-speed: .3;
	}
	&#b2 {
		--l1-chars: 5;
		--l2-chars: 14;
	}
	&#b3 {
		--l1-chars: 17;
		--l2-chars: 18;
		--l3-chars: 22;
		margin-left: -55px;
	}
	&#b4 {
		--l1-chars: 14;
		--l2-chars: 14;
	}
	&#b5 {
		--l1-chars: 19;
		--l2-chars: 17;
		margin-left: -30px;
	}
	&#b6 {
		--l1-chars: 22;
		--l2-chars: 21;
		--l3-chars: 17;
		margin-left: -60px;
	}
	&#safari {
		--l1-chars: 27;
		--l2-chars: 26;
		--l3-chars: 31;
		--l4-chars: 39;
		--l4-delay: calc(var(--l3-delay) + var(--l3-dur) + .5s);
		margin-left: -200px;
	}
}
@keyframes type {
	0% {
		width: 0;
		visibility: visible;
	}
	100% {
		visibility: visible;
	}
}
@keyframes fade-out {
	99%, 100% {
		opacity: 0;
		display: none;
	}
}
@supports not (d: path("")) {
	speech-bubble {
		display: none !important;
		&#safari { display: grid !important; }
	}
}
@media (hover: none) {
	resizer-container { display: none !important; }
}

resizer-container {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
	scale: -1 1;

	animation: 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite float;

	styled-handle {
		position: absolute;
		width: 30px;
		height: 30px;
		right: -200%;
		bottom: -200%;

		svg {
			overflow: visible;
			margin: 2px;
		}
	}

	resizer-div {
		position: relative;
		transform-origin: top left;
		scale: 3 3;
		z-index: 10;
		overflow: hidden;
		resize: both;
		width: calc((10vw + 250px) / 3);
		max-width: 33.3333vw;
		height: calc((55vh + 200px) / 3);
		max-height: 33.3333vh;
		display: flex;
		background: red;
		opacity: 0;
		clip-path: polygon(100% 100%, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%);
	}

	* {
		pointer-events: initial;
	}
	cat-container, cat-svg, svg {
		pointer-events: none;
	}
}

cat-container {
	position: absolute;
	bottom: calc(-200% + 35px);
	right: calc(-200% - 12px);
	scale: -1 1;
	overflow: visible;
	height: 250px;
	width: 250px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

cat-svg {
	margin: 0;
	display: block;
	height: 100%;
	width: 100%;
	overflow: visible;

	svg {
		fill: var(--primary);
		overflow: visible;

		#head { stroke: none; }

		[headpart] {
			transform: translate(var(--transX), var(--transY)) rotate(var(--rot));
			transform-origin: 40% 45%;
		}
	}
	text {
		font: 15px "CourierPrime";
		stroke: none;
		fill: var(--text);
		writing-mode: tb;
		--delay: 0s;
		animation: 8s var(--delay) infinite z;
		fill-opacity: 0;

		&#t2 { --delay: 3s; }
		transition: opacity 2s 3s;
		pointer-events: none;
	}
	#zPath { visibility: hidden; }

	&.pettingInteraction {
		svg {
			[headpart] {
				transition: d .5s .2s, --transX .5s .2s, --transY .5s .2s, --rot 1.5s .2s;
			}
			#leftEye, #rightEye, #mouth {
				transition: d .5s 5s, --transX .5s .2s, --transY .5s .2s, --rot 1.5s .2s;
			}
		}
		&:has(svg path:not(#cloud-fg, #cloud-bg):hover) {
			#head, #headStroke, #leftEye, #rightEye, .whisker, #mouth, #leftEar, #rightEar, #body {
				transition: d .5s .2s, --transX .5s .2s, --transY .5s .2s, --rot 1.5s .2s;
			}
			#mouth { d: path("M36,27 L38,29 L40,27 L42,29 L44,27"); }
			#leftEye { d: path("M32,22 L34,19 L36,22"); }
			#rightEye { d: path("M44,22 L46,19 L48,22"); }
			text {
				transition: opacity .5s 0s;
				opacity: 0 !important;
			}
		}
		&:has([headpart]:hover) {
			#head, #headStroke, #leftEye, #rightEye, .whisker, #mouth, #leftEar, #rightEar {
				transition: d .5s .2s, --transX .5s .2s, --transY .5s .2s, --rot .6s .2s;
				--rot: 3deg;
			}
		}
		#leftEar:hover { d: path("M35,12 L26,3 L26,15"); }
		#rightEar:hover { d: path("M54,15 L54,3 L45,12"); }
	}
	&.sitting {
		animation: 0s 120s forwards hide;
		svg {
			transition: --dur 0s 3s;
			--dur: 3s;

			#tail {
				animation: var(--dur) linear infinite wag;
			}
		}

		path:not(#tail, #cloud-bg, #cloud-fg) {
			animation: .3s infinite petting;
		}
		#headTrigger {
			fill: red;
			opacity: 0;
			visibility: hidden;
			animation: 3s infinite trigger;
			&:hover { fill: green; }
		}
		&:has(#headTrigger:hover) svg {
			transition: --dur 0s 0s;
			--dur: 1.5s;
		}
	}
	&.lyingDown-transition {
		height: 0;
		visibility: hidden;
		animation: 0s 120s forwards appearCat, 0s 121.5s forwards hide;

		[headpart] { animation: 1.5s ease-in-out 120s forwards lie-down-head, .3s infinite petting; }
		#body { animation: 1.5s ease-in-out 120s forwards lie-down-body, .3s infinite petting; }
		#leftPaw { animation: 1.5s linear 120s forwards lie-down-lfoot, .3s infinite petting; }
		#rightPaw { animation: 1.5s linear 120s forwards lie-down-rfoot, .3s infinite petting; }
		#tail { animation: 1.5s 120s forwards lie-down-tail, .3s infinite petting; }
	}
	&.lyingDown {
		height: 0;
		visibility: hidden;
		animation: 0s 121.5s forwards appearCat;

		path:not(#tail, #cloud-bg, #cloud-fg, #zPath) {
			animation: .3s infinite petting;
		}
		svg [headpart] {
			--rot: -5deg;
			--transX: -20px;
			--transY: 53px;
			transition: d .5s .2s, --transX .5s .2s, --transY 1.5s .2s, --rot 1.5s .2s;
		}
		svg #leftEye, svg #rightEye, svg #mouth { transition: d .5s 2s, --transX .5s .2s, --transY 1.5s .2s, --rot 1.5s .2s; }
		&:has(svg path:hover) {
			#head, #headStroke, #leftEye, #rightEye, .whisker, #mouth, #leftEar, #rightEar, #body {
				transition: d .5s .2s, --transX .5s .2s, --transY 1.5s .2s, --rot 1.5s .2s;
			}
		}
		&:has([headpart]:hover) {
			#head, #headStroke, #leftEye, #rightEye, .whisker, #mouth, #leftEar, #rightEar {
				transition: d .5s .2s, --transX .5s .2s, --transY 1.5s .2s, --rot 1.5s .2s;
				--rot: -3deg;
				--transY: 50px;
			}
		}
	}
}
@keyframes z {
	0%, 15% {
		font-size: 10px;
		fill-opacity: 0;
	}
	25%, 40% {
		fill-opacity: 1;
	}
	to {
		font-size: 30px;
		fill-opacity: 0;
	}
}
@keyframes lie-down-head {
	0% {}
	100% {
		--rot: -5deg;
		--transX: -20px;
		--transY: 53px;
	}
}
@keyframes lie-down-body {
	100% { d: path("M11,80 L10,88 L12,100 L80,100 L78,80 L65,65 L30,67"); }
}
@keyframes lie-down-lfoot{
	0% {
		animation-timing-function: ease-in;
		d: path("M25,50 L31,94 L30,95 L30,101 L38,101 L38,70");
	}
	40% { d: path("M20.5,64 L31,94 L30,95 L30,101 L38,101 L34,81"); }
	70% { d: path("M12.5,81 L18,88 L15,90 L15,96 L24,94 L26,86"); }
	90% { d: path("M10,87 L11,94 L10,95 L10,101 L18,101 L20,95"); }
	100% {
		animation-timing-function: ease-out;
		d: path("M10,89 L11,94 L10,95 L10,101 L18,101 L20,95");
	}
}
@keyframes lie-down-rfoot {
	0% {
		animation-timing-function: ease-in;
		d: path("M45,70 L44,94 L43,95 L43,101 L50,101 L55,70 L55,65");
	}
	20% { d: path("M40,72 L33,88 L31,90 L31,96 L38,94 L50,72 L52,66"); }
	40% { d: path("M35,80 L25,94 L23,95 L23,101 L30,101 L45,80 L47,73"); }
	70% { d: path("M27,87 L25,94 L23,95 L23,101 L30,101 L38,88 L40,81"); }
	90%, 100% {
		animation-timing-function: ease-out;
		d: path("M25,92 L25,94 L23,95 L23,101 L30,101 L35,92 L36,88");
	}
}
@keyframes lie-down-tail {
	0% { d: path("M75,100 L80,100 L100,60 L95,33 L80,12 L75,15 L90,35 L95,60 Z"); }
	100% { d: path("M75,100 L80,100 L20,90 L4,95 L1,103 L6,104 L9,99 L20,95 Z"); }
}
@keyframes wag {
	0% { d: path("M75,100 L80,100 L100,60 L95,33 L80,12 L75,15 L90,35 L95,60 Z"); }
	16% { d: path("M75,100 L80,100 L110,75 L125,55 L125,30 L120,30 L120,52 L106,71 Z"); }
	33% { d: path("M75,100 L80,100 L75,61 L90,42 L110,34 L108,30 L87,38 L70,60 Z"); }
	47% { d: path("M75,100 L80,100 L60,60 L65,40 L80,20 L75,17 L60,38 L55,60 Z"); }
	66% { d: path("M75,100 L80,100 L50,71 L35,52 L35,30 L30,30 L30,55 L46,75 Z"); }
	84% { d: path("M75,100 L80,100 L85,60 L70,38 L50,30 L47,34 L68,42 L80,61 Z"); }
	100% { d: path("M75,100 L80,100 L100,60 L95,33 L80,12 L75,15 L90,35 L95,60 Z"); }
}
@keyframes trigger {
	99% { visibility: hidden; }
	100% { visibility: visible; }
}
@keyframes petting {
	/* petpet cursor */
	0%, 49% { cursor: url("../images/petpet1.png") 25 25, grab; }
	50%, 100% { cursor: url("../images/petpet2.png") 25 25, grabbing;  }
}
@keyframes hide {
	to {
		visibility: hidden;
		height: 0;
	}
}
@keyframes appearCat {
	to {
		visibility: visible;
		height: 100%;
	}
}
@keyframes float {
	50% { translate: 0 20px; }
}