/*
 * Hamo Criative - Targets — adesivos de texto estilo colagem + teia SVG.
 * Técnica do adesivo (referência): -webkit-text-stroke grosso com
 * paint-order: stroke fill (contorno POR TRÁS do preenchimento) + borda
 * fina externa na cor do texto via 4 drop-shadows + brilho no hover via
 * ::before com background-clip: text.
 * Nunca declarar aqui as CSS vars que os controles escrevem no {{WRAPPER}}
 * (lição do shadowing) — apenas consumir com var(--x, fallback).
 */

@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

.hamo-ct__canvas {
	position: relative;
	width: 100%;
	height: 480px;
	overflow: visible;
}

/* Overlay SVG da teia — preenchido pelo JS, atrás dos adesivos. */
.hamo-ct__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

.hamo-ct__lines path {
	fill: none;
	stroke: var(--hamo-ct-line-color, #4d5866);
	stroke-width: var(--hamo-ct-line-w, 4px);
	stroke-linecap: round;
}

.hamo-ct__dot {
	fill: var(--hamo-ct-dot-color, #4d5866);
}

/* ---------------- Adesivo ---------------- */

.hamo-ct__sticker {
	--ct-color: #ffcc33;
	--ct-size: 50px;
	--ct-rot: 0deg;

	position: absolute;
	z-index: 1;
	translate: -50% -50%;
	rotate: var(--ct-rot);

	font-family: 'Cherry Bomb One', system-ui;
	font-size: calc(var(--ct-size) * var(--hamo-ct-scale, 1));
	line-height: 1;
	color: var(--ct-color);
	white-space: nowrap;

	padding: calc(1em * var(--hamo-ct-stroke, 0.5) * 0.5);

	-webkit-text-stroke: calc(1em * var(--hamo-ct-stroke, 0.5)) var(--hamo-ct-stroke-color, #fff);
	paint-order: stroke fill;

	filter:
		drop-shadow(var(--hamo-ct-outline, 1px) 0 var(--ct-color))
		drop-shadow(calc(var(--hamo-ct-outline, 1px) * -1) 0 var(--ct-color))
		drop-shadow(0 var(--hamo-ct-outline, 1px) var(--ct-color))
		drop-shadow(0 calc(var(--hamo-ct-outline, 1px) * -1) var(--ct-color));

	transition: scale 0.3s ease, color 0.3s ease;
}

/* Brilho diagonal revelado no hover (o texto fica transparente e o
   ::before — mesmo glifo com gradiente recortado — aparece). */
.hamo-ct__sticker::before {
	content: attr(data-text);
	position: absolute;
	inset: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	background: linear-gradient(
		40deg,
		var(--ct-color) 30%,
		color-mix(in srgb, var(--ct-color), #fff 60%) 45% 55%,
		var(--ct-color) 70%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 0;
}

.hamo-ct--hover .hamo-ct__sticker:hover {
	scale: 1.07;
	color: transparent;
}

/* Arraste com o cursor (classe aplicada pelo JS quando habilitado).
   touch-action: none permite arrastar no toque sem rolar a página. */
.hamo-ct--drag .hamo-ct__sticker {
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.hamo-ct--drag .hamo-ct__sticker.is-dragging {
	cursor: grabbing;
	z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
	.hamo-ct__sticker {
		transition: none;
	}
}