/* Coere — Popup da home */

html.coere-popup-aberto { overflow: hidden; }

.coere-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 24px 16px;
}
.coere-popup[hidden] { display: none; }

.coere-popup__fundo {
	position: absolute;
	inset: 0;
	background: rgba(10, 16, 13, 0.62);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	backdrop-filter: blur(10px) saturate(120%);
	opacity: 0;
	transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.coere-popup__caixa {
	position: relative;
	width: min(560px, 100%, calc(100dvh - 140px));
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	opacity: 0;
	transform: translateY(28px) scale(0.965);
	filter: blur(6px);
	transition:
		opacity 560ms cubic-bezier(0.22, 1, 0.36, 1) 60ms,
		transform 760ms cubic-bezier(0.16, 1, 0.3, 1) 60ms,
		filter 560ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}

.coere-popup__caixa:focus { outline: none; }

.coere-popup.is-open .coere-popup__fundo { opacity: 1; }
.coere-popup.is-open .coere-popup__caixa { opacity: 1; transform: none; filter: none; }

.coere-popup.is-closing .coere-popup__fundo { opacity: 0; transition-duration: 360ms; }
.coere-popup.is-closing .coere-popup__caixa {
	opacity: 0;
	transform: translateY(12px) scale(0.985);
	transition: opacity 320ms ease, transform 360ms cubic-bezier(0.4, 0, 1, 1);
}

.coere-popup__imagem {
	display: block;
	border-radius: 28px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(240, 240, 240, 0.08),
		0 30px 80px -20px rgba(0, 0, 0, 0.65);
	transition: transform 640ms cubic-bezier(0.45, 0, 0.25, 1), box-shadow 640ms cubic-bezier(0.45, 0, 0.25, 1);
}
.coere-popup__imagem img {
	display: block;
	width: 100%;
	height: auto;
}
.coere-popup__imagem:hover {
	transition-duration: 420ms;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	transform: translateY(-3px);
	box-shadow:
		0 0 0 1px rgba(235, 205, 80, 0.35),
		0 40px 90px -24px rgba(0, 0, 0, 0.7);
}

.coere-popup__fechar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(240, 240, 240, 0.18);
	border-radius: 999px;
	background: rgba(20, 30, 25, 0.72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--mist-gray, #F0F0F0);
	cursor: pointer;
	padding: 0;
	transition:
		background-color 560ms cubic-bezier(0.45, 0, 0.25, 1),
		border-color 560ms cubic-bezier(0.45, 0, 0.25, 1),
		transform 640ms cubic-bezier(0.45, 0, 0.25, 1);
}
.coere-popup__fechar:hover {
	transition-duration: 320ms, 320ms, 420ms;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	background: rgba(20, 30, 25, 0.92);
	border-color: rgba(235, 205, 80, 0.55);
	transform: rotate(90deg);
}

.coere-popup__botao {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--golden-yellow, #EBCD50);
	color: var(--graphite-green, #141E19);
	font-family: var(--font-sans, "Figtree", system-ui, sans-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 8px 24px -12px rgba(235, 205, 80, 0);
	/* Saída: mais lenta, com aceleração e frenagem suaves. */
	transition:
		background-color 560ms cubic-bezier(0.45, 0, 0.25, 1),
		transform 640ms cubic-bezier(0.45, 0, 0.25, 1),
		box-shadow 640ms cubic-bezier(0.45, 0, 0.25, 1);
}
.coere-popup__botao svg { transition: transform 640ms cubic-bezier(0.45, 0, 0.25, 1); }
.coere-popup__botao:hover {
	background: var(--yellow-600, #D4B43A);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(235, 205, 80, 0.45);
	/* Entrada: resposta rápida, sem tranco. */
	transition:
		background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.coere-popup__botao:hover svg { transform: translateX(4px); transition-duration: 420ms; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

.coere-popup a:focus-visible,
.coere-popup button:focus-visible {
	outline: 3px solid var(--focus-ring, #EBCD50);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.coere-popup__imagem { border-radius: 20px; }
	.coere-popup__fechar { top: 10px; right: 10px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.coere-popup__fundo,
	.coere-popup__caixa,
	.coere-popup.is-closing .coere-popup__caixa,
	.coere-popup__imagem,
	.coere-popup__fechar,
	.coere-popup__botao,
	.coere-popup__botao svg,
	.coere-popup__imagem:hover,
	.coere-popup__fechar:hover,
	.coere-popup__botao:hover,
	.coere-popup__botao:hover svg {
		transition: opacity 1ms linear !important;
		transform: none !important;
		filter: none !important;
	}
}