/* Cursor Character: stacked frames, only opacity/transform ever change
   (compositor-only, no layout), so switching frames is cheap and smooth. */
.xtool-cc {
	position: relative;
	display: block;
	width: 280px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-left: auto;
	margin-right: auto;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	text-decoration: none;
}
a.xtool-cc,
.xtool-cc.has-click { cursor: pointer; }

.xtool-cc__lean {
	position: absolute;
	inset: 0;
	display: block;
	transform: translate3d(0, 0, 0);
	transform-origin: 50% 92%;
	will-change: transform;
}
.xtool-cc--breathe .xtool-cc__lean {
	animation: xtool-cc-breathe 3.8s ease-in-out infinite;
}
.xtool-cc.is-bounce .xtool-cc__lean {
	animation: xtool-cc-bounce .42s cubic-bezier(.3, 1.6, .5, 1);
}

.xtool-cc__frame {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--xcc-fade, 120ms) cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
	-webkit-user-drag: none;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.xtool-cc__frame { z-index: 1; }
.xtool-cc__frame.is-on { opacity: 1; }
/* The incoming frame sits on top and fades in over the old one, which
   stays fully visible underneath until the fade finishes. */
.xtool-cc__frame.is-top { z-index: 2; }
.xtool-cc--swap .xtool-cc__frame,
.xtool-cc__frame.is-snap { transition: none !important; }
.xtool-cc__frame.is-flip { transform: scaleX(-1); }

.xtool-cc__marker {
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: #ff2d55;
	box-shadow: 0 0 0 3px rgba(255, 45, 85, .25);
	pointer-events: none;
	z-index: 2;
}

@keyframes xtool-cc-breathe {
	0%, 100% { scale: 1 1; }
	50% { scale: 1.008 1.018; }
}

@keyframes xtool-cc-bounce {
	0% { scale: 1; }
	35% { scale: .93; }
	100% { scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.xtool-cc__frame { transition: none; }
	.xtool-cc.is-bounce .xtool-cc__lean,
	.xtool-cc--breathe .xtool-cc__lean { animation: none; }
}