/*
 * Card da vitrine da home (carrossel "Conheça as empresas que contratam pela Super"):
 * foto da vitrine + degradê na cor da marca + grafismos de traço que se desenham sozinhos.
 * O desenho vem de src/JobPage/GrafismoVitrine.php. Usado na home (index/index.php) e na prévia do editor da franquia.
 *
 * A animação liga quando o card está no centro do carrossel ([data-pos="0"]) ou com a classe .ligada (prévia).
 * Ciclo de 9 s, como um GIF: os traços se formam, as formas de realce se preenchem, os pontos soltam ondas,
 * os brilhos piscam e uma luz atravessa a foto; depois tudo some e recomeça.
 */
.jpv-capa.com-arte img {
	object-position: 50% 20%;
}

.jpv-arte {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity .45s;
	/* cor da marca descendo do alto (atrás dos traços) e subindo de baixo (sob a faixa escura do texto); o meio fica livre para o rosto */
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--c1, #124b99) 94%, transparent) 0%, color-mix(in srgb, var(--c1, #124b99) 55%, transparent) 16%, transparent 44%),
		linear-gradient(to top, color-mix(in srgb, var(--c1, #124b99) 80%, transparent) 0%, transparent 42%);
}

/* luz que atravessa a foto uma vez por ciclo, logo depois do desenho pronto */
.jpv-arte::after {
	content: "";
	position: absolute;
	inset: -10% -60%;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%);
	transform: translateX(-70%);
	opacity: 0;
}

[data-pos="0"] .jpv-arte,
.jpv-arte.ligada {
	opacity: 1;
}

.jpv-arte svg {
	position: absolute;
	width: 38%;
	height: auto;
	aspect-ratio: 1 / 2;
	overflow: visible;
	transition: none;
}

/* foto em pé com o rosto no alto: o traço da esquerda começa abaixo da bola do logo (canto de cima) e o da direita um pouco acima */
.jpv-arte .arte-esq {
	left: -2%;
	top: 17%;
}

.jpv-arte .arte-dir {
	right: -2%;
	top: 8%;
}

/* sobre a cabeça */
.jpv-arte .arte-topo {
	top: 2.5%;
	left: 50%;
	width: 30%;
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
}

.jpv-arte .arte-brilhos {
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.jpv-arte path {
	fill: none;
	/* cores escolhidas pela IA ou pela franquia (GrafismoVitrine::cores) */
	stroke: var(--arte-traco, #fff);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: none;
}

.jpv-arte path.e {
	stroke: var(--arte-destaque, var(--arte-traco, #fff));
	stroke-width: 2.8;
}

.jpv-arte path.e.cheio {
	fill: var(--arte-destaque, var(--arte-traco, #fff));
	fill-opacity: 0;
}

.jpv-arte path.f {
	stroke-opacity: .6;
	stroke-width: 1.5;
}

.jpv-arte path.p {
	stroke: var(--arte-destaque, var(--arte-traco, #fff));
	stroke-width: 6;
	stroke-dasharray: none;
	stroke-dashoffset: 0;
	opacity: 0;
}

.jpv-arte path.onda {
	stroke: var(--arte-destaque, var(--arte-traco, #fff));
	stroke-width: 1.4;
	stroke-dasharray: none;
	stroke-dashoffset: 0;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.jpv-arte path.brilho {
	fill: var(--arte-destaque, var(--arte-traco, #fff));
	stroke: none;
	stroke-dasharray: none;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.jpv-arte .arte-topo path {
	stroke-width: 3.6;
}

[data-pos="0"] .jpv-arte path,
.jpv-arte.ligada path {
	animation: jpvTraco 9s cubic-bezier(.45, 0, .2, 1) var(--d, 0s) infinite both;
}

[data-pos="0"] .jpv-arte path.e.cheio,
.jpv-arte.ligada path.e.cheio {
	animation-name: jpvTracoCheio;
}

[data-pos="0"] .jpv-arte path.p,
.jpv-arte.ligada path.p {
	animation: jpvPonto 9s ease-out var(--d, 0s) infinite both;
}

[data-pos="0"] .jpv-arte path.onda,
.jpv-arte.ligada path.onda {
	animation: jpvOnda 9s ease-out var(--d, 0s) infinite both;
}

[data-pos="0"] .jpv-arte path.brilho,
.jpv-arte.ligada path.brilho {
	animation: jpvBrilho 9s ease-in-out var(--d, 0s) infinite both;
}

[data-pos="0"] .jpv-arte::after,
.jpv-arte.ligada::after {
	animation: jpvLuz 9s ease-in-out 1.6s infinite both;
}

/* as laterais respiram de leve enquanto o desenho está pronto */
[data-pos="0"] .jpv-arte .arte-esq,
.jpv-arte.ligada .arte-esq {
	animation: jpvFlutua 4.5s ease-in-out infinite alternate;
}

[data-pos="0"] .jpv-arte .arte-dir,
.jpv-arte.ligada .arte-dir {
	animation: jpvFlutua 4.5s ease-in-out -2.2s infinite alternate;
}

/* a foto aproxima devagar, como uma câmera */
[data-pos="0"] .jpv-capa.com-arte img,
.jpv-capa.com-arte.ligada img {
	animation: jpvAproxima 9s ease-in-out infinite alternate;
}

@keyframes jpvTraco {
	0% {
		stroke-dashoffset: 1;
		opacity: 1;
	}

	18% {
		stroke-dashoffset: 0;
	}

	86% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	96%,
	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

@keyframes jpvTracoCheio {
	0% {
		stroke-dashoffset: 1;
		fill-opacity: 0;
		opacity: 1;
	}

	18% {
		stroke-dashoffset: 0;
		fill-opacity: 0;
	}

	26%,
	86% {
		stroke-dashoffset: 0;
		fill-opacity: .3;
		opacity: 1;
	}

	96%,
	100% {
		stroke-dashoffset: 0;
		fill-opacity: .3;
		opacity: 0;
	}
}

@keyframes jpvPonto {
	0%,
	16% {
		opacity: 0;
		stroke-width: 2;
	}

	22% {
		opacity: 1;
		stroke-width: 9;
	}

	28%,
	86% {
		opacity: 1;
		stroke-width: 6;
	}

	96%,
	100% {
		opacity: 0;
	}
}

/* três ondas saindo do ponto */
@keyframes jpvOnda {
	0%,
	20% {
		opacity: 0;
		transform: scale(.4);
	}

	21% {
		opacity: .9;
		transform: scale(.4);
	}

	33% {
		opacity: 0;
		transform: scale(3.2);
	}

	44% {
		opacity: .9;
		transform: scale(.4);
	}

	56% {
		opacity: 0;
		transform: scale(3.2);
	}

	67% {
		opacity: .9;
		transform: scale(.4);
	}

	79%,
	100% {
		opacity: 0;
		transform: scale(3.2);
	}
}

@keyframes jpvBrilho {
	0%,
	8% {
		opacity: 0;
		transform: scale(0) rotate(0deg);
	}

	14% {
		opacity: 1;
		transform: scale(1.25) rotate(45deg);
	}

	20% {
		opacity: .85;
		transform: scale(.8) rotate(90deg);
	}

	40% {
		opacity: .35;
		transform: scale(.55) rotate(90deg);
	}

	48% {
		opacity: 1;
		transform: scale(1.1) rotate(135deg);
	}

	60%,
	80% {
		opacity: .7;
		transform: scale(.75) rotate(180deg);
	}

	90%,
	100% {
		opacity: 0;
		transform: scale(0) rotate(225deg);
	}
}

@keyframes jpvLuz {
	0%,
	20% {
		transform: translateX(-70%);
		opacity: 0;
	}

	21% {
		opacity: 1;
	}

	36% {
		transform: translateX(70%);
		opacity: 1;
	}

	37%,
	100% {
		transform: translateX(70%);
		opacity: 0;
	}
}

@keyframes jpvFlutua {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-5px);
	}
}

@keyframes jpvAproxima {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.07);
	}
}

@media (prefers-reduced-motion: reduce) {

	.jpv-arte path,
	[data-pos="0"] .jpv-arte path,
	.jpv-arte.ligada path {
		animation: none !important;
		stroke-dashoffset: 0;
	}

	.jpv-arte path.p,
	.jpv-arte path.brilho {
		opacity: 1;
	}

	.jpv-arte path.e.cheio {
		fill-opacity: .3;
	}

	.jpv-arte svg,
	.jpv-arte::after,
	.jpv-capa.com-arte img {
		animation: none !important;
	}
}