/*
 * Resgata Tema – enfeites de fundo (corações, patas, nuvens e círculos) das faixas e dos
 * cartões. Aqui ficam as formas e a base; a composição de cada peça (quais formas, onde e
 * de que tamanho) fica no arquivo CSS do bloco dela, nas variáveis
 * `--resgata-tema-decor-fill` (formas cheias, bem claras) e `--resgata-tema-decor-line`
 * (formas em traço). As formas são máscaras: a cor vem de `--resgata-tema-decor-tone`, então
 * acompanha a paleta escolhida no Editor do Site. São só enfeite: ficam atrás do conteúdo e
 * fora da leitura de tela. Camada sem composição fica vazia (`--resgata-tema-shape-none`).
 */
:root {
	--resgata-tema-shape-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-12 12 12)' d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");
	--resgata-tema-shape-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30' fill='black'%3E%3Cpath transform='rotate(12 12 12)' d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");
	--resgata-tema-shape-paw-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 30 30' fill='black'%3E%3Cg transform='rotate(-16 12 12)'%3E%3Ccircle cx='11' cy='4' r='2.4'/%3E%3Ccircle cx='18' cy='8' r='2.4'/%3E%3Ccircle cx='20' cy='16' r='2.4'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/g%3E%3C/svg%3E");
	--resgata-tema-shape-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 4.5 21 15' fill='black'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
	--resgata-tema-shape-circle: radial-gradient(circle closest-side, #000 calc(100% - 1px), transparent);
	--resgata-tema-shape-none: linear-gradient(transparent, transparent);
	--resgata-tema-shape-ring: radial-gradient(circle closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px) calc(100% - 1px), transparent);
}

:is(
	.is-style-resgata-hero,
	.is-style-resgata-band,
	.is-style-resgata-band-hug,
	.resgata-donate,
	.resgata-impact,
	.resgata-sponsorship__plan,
	.resgata-animal__help
) {
	--resgata-tema-decor-tone: var(--wp--preset--color--accent-3);
	isolation: isolate;
	position: relative;
}

:is(
	.is-style-resgata-hero,
	.is-style-resgata-band,
	.is-style-resgata-band-hug,
	.resgata-donate,
	.resgata-impact,
	.resgata-sponsorship__plan,
	.resgata-animal__help
)::before,
:is(
	.is-style-resgata-hero,
	.is-style-resgata-band,
	.is-style-resgata-band-hug,
	.resgata-donate,
	.resgata-impact,
	.resgata-sponsorship__plan,
	.resgata-animal__help
)::after {
	border-radius: inherit;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

:is(
	.is-style-resgata-hero,
	.is-style-resgata-band,
	.is-style-resgata-band-hug,
	.resgata-donate,
	.resgata-impact,
	.resgata-sponsorship__plan,
	.resgata-animal__help
)::before {
	background: color-mix(in srgb, var(--resgata-tema-decor-tone) 10%, transparent);
	mask: var(--resgata-tema-decor-fill, var(--resgata-tema-shape-none));
}

:is(
	.is-style-resgata-hero,
	.is-style-resgata-band,
	.is-style-resgata-band-hug,
	.resgata-donate,
	.resgata-impact,
	.resgata-sponsorship__plan,
	.resgata-animal__help
)::after {
	background: color-mix(in srgb, var(--resgata-tema-decor-tone) 36%, transparent);
	mask: var(--resgata-tema-decor-line, var(--resgata-tema-shape-none));
}