.tcc-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.tcc-stage {
	position: relative;
	width: 1320px;
	max-width: 100%;
	aspect-ratio: 16 / 11;
	margin: 0 auto;
	overflow: visible;
	clip-path: inset(-100vmax -100vmax 0 -100vmax);
	--tcc-bubble-size: 300px;
	--tcc-radius: 43%;
	--tcc-orbit-spread: 1.35;
}

.tcc-person {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 45%;
	height: auto;
	z-index: 2;
	pointer-events: none;
	user-select: none;
}

.tcc-orbit {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.tcc-bubble {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--tcc-bubble-size, 180px);
	height: var(--tcc-bubble-size, 180px);
	transform: translate(-50%, -50%) translate(var(--tcc-x, 0px), var(--tcc-y, 0px));
	will-change: transform;
	pointer-events: none; /* only the link should be clickable */
}

.tcc-bubble-anchor {
	width: 100%;
	height: 100%;
	pointer-events: auto;
}

.tcc-bubble-inner {
	width: 100%;
	height: 100%;
}

.tcc-bubble-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: transform .35s ease;
}

.tcc-bubble-link:hover {
	transform: scale(1.08);
}

.tcc-bubble-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 8px 20px rgba(0,0,0,.12));
}

@media (max-width: 600px) {
	.tcc-stage { --tcc-bubble-size: 110px; }
}