:root {
	--pet-size: 136px;
	--pet-x: 0px;
	--pet-y: 0px;
	--pet-draw-w: calc(var(--pet-size) * 130 / 192);
	--pet-draw-h: calc(var(--pet-size) * 133 / 192);
	--pet-air-right: calc(var(--pet-size) * 31 / 192);
	--pet-air-bottom: calc(var(--pet-size) * 12 / 192);
	--chat-edge: 40px;
	--chat-edge-bottom: 64px;
	--chat-pet-gap: 12px;
	--pet-chat-scale: 0.72;
	--chat-window-bottom: calc(
		var(--chat-edge-bottom) + var(--pet-draw-h) * var(--pet-chat-scale) +
			var(--chat-pet-gap)
	);
}
@media (min-width: 768px) and (max-width: 1279px) {
	:root {
		--pet-size: 170px;
		--pet-chat-scale: 0.74;
		--chat-pet-gap: 16px;
	}
}
@media (max-width: 767px) {
	:root {
		--pet-size: 104px;
		--chat-edge: 24px;
		--chat-edge-bottom: 32px;
	}
}
.pet {
	--pet-dock-x: 0px;
	--pet-dock-y: 0px;
	--pet-scale: 1;
	position: fixed;
	right: calc(var(--chat-edge) - var(--pet-air-right));
	bottom: calc(var(--chat-edge-bottom) - var(--pet-air-bottom));
	z-index: var(--z-chat);
	width: var(--pet-size);
	aspect-ratio: 192 / 208;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transform: translate3d(
			calc(var(--pet-x) + var(--pet-dock-x)),
			calc(var(--pet-y) + var(--pet-dock-y)),
			0
		)
		scale(var(--pet-scale));
	transform-origin: calc(100% - var(--pet-air-right))
		calc(100% - var(--pet-air-bottom));
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		opacity 250ms var(--chat-ease),
		visibility 250ms var(--chat-ease),
		transform 110ms 140ms var(--chat-ease);
}
.pet--chatting {
	transition:
		opacity 250ms var(--chat-ease),
		visibility 250ms var(--chat-ease),
		transform 140ms 0ms var(--chat-ease);
}
.pet--loose,
.pet--charging {
	transition: none;
}
.pet__sprite {
	position: absolute;
	inset: 0;
	background: url("/assets/media/brand/mr-orange-pet.webp") 0 0 / 800% 800%
		no-repeat;
	transform-origin: 50% 90%;
	transition: transform 150ms cubic-bezier(0.34, 1.8, 0.64, 1);
	pointer-events: none;
}
.pet:hover .pet__sprite,
.pet:focus-visible .pet__sprite,
.pet:has(~ .chat-resume:hover) .pet__sprite {
	transform: scale(1.12) translateY(-4px);
}
.pet--over-footer:not(.pet--loose, .pet--chatting) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.pet--chatting {
	--pet-scale: var(--pet-chat-scale);
}
.pet.pet--charging .pet__sprite {
	transform: scale(1.16);
	transition-duration: 500ms;
}
.pet::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 52%;
	width: 72%;
	aspect-ratio: 1;
	border: 3px solid var(--color-orange);
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.6);
	pointer-events: none;
}
.pet--charging::before {
	animation: pet-pulse 0.6s ease-out infinite;
}
.pet--loose::before {
	animation: pet-pulse 1.4s ease-out infinite;
}
@keyframes pet-pulse {
	from {
		opacity: 0.9;
		transform: translate(-50%, -50%) scale(0.7);
	}
	to {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1.45);
	}
}
.pet--loose {
	cursor: grabbing;
}
.pet.pet--loose .pet__sprite {
	transform: none;
	filter: drop-shadow(
		0 10px 10px color-mix(in srgb, var(--color-black) 25%, transparent)
	);
}
.pet--chatting {
	z-index: calc(var(--z-modal) + 1);
}
.chat-window {
	right: var(--chat-edge);
	bottom: var(--chat-window-bottom);
	transform-origin: 100% 100%;
	transition:
		opacity 140ms 0ms var(--chat-ease),
		transform 140ms 0ms var(--chat-ease),
		display 140ms 0ms allow-discrete;
}
.chat-window:not([hidden]) {
	transition:
		opacity 140ms 0ms var(--chat-ease),
		transform 140ms 0ms var(--chat-ease),
		height 140ms 0ms var(--chat-ease),
		width 140ms 0ms var(--chat-ease),
		display 140ms 0ms allow-discrete;
}
.chat-window.is-opening {
	transition:
		opacity 110ms 140ms var(--chat-ease),
		transform 110ms 140ms var(--chat-ease),
		display 110ms 140ms allow-discrete;
}
.chat-window[hidden] {
	display: none;
	opacity: 0;
	transform: translateY(24px);
}
@starting-style {
	.chat-window:not([hidden]) {
		opacity: 0;
		transform: translateY(24px);
	}
}
@media (max-width: 767px) {
	body:has(.chat-window:not([hidden])) .pet {
		pointer-events: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pet,
	.pet__sprite,
	.chat-window,
	.chat-window:not([hidden]) {
		transition: none;
	}
	.pet:hover .pet__sprite,
	.pet:focus-visible .pet__sprite,
	.pet:has(~ .chat-resume:hover) .pet__sprite {
		transform: none;
	}
}