/* =========================================================
   Codex Arrow Button: porte em CSS/GSAP puro do componente
   React "arrow-fill-button" (Hyperiux Vault). Sem dependência
   de React: usado pelo widget Elementor "Codex Button" e por
   qualquer link/HTML no editor (classe .codex-btn-arrow).

   Cores configuráveis via CSS custom properties inline:
   --btn-bg, --btn-text, --btn-fill-bg, --btn-fill-text,
   --btn-fill-bg-hover, --btn-fill-text-hover, --btn-arrow,
   --btn-arrow-hover
   ========================================================= */

.codex-btn-arrow {
	--btn-bg: var(--codex-orange);
	--btn-text: var(--codex-white);
	--btn-fill-bg: var(--codex-white);
	--btn-fill-text: var(--codex-orange);
	--btn-fill-bg-hover: var(--codex-white);
	--btn-fill-text-hover: var(--codex-orange);
	--btn-arrow: var(--btn-fill-text);
	--btn-arrow-hover: var(--btn-fill-text-hover);
	--icon-circle: 3.25em;
	--icon-right: 0.4em;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3.6em;
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--codex-font-body);
	font-weight: 500;
	letter-spacing: 0.01em;
	font-size: 1rem;
	line-height: 1;
	border-radius: 999px;
	border: 1px solid var(--btn-bg);
	background: var(--btn-bg);
	color: var(--btn-text);
	padding-left: 1.6em;
	padding-right: calc(var(--icon-circle) + var(--icon-right) + 1.1em);
}

.codex-btn-arrow__label {
	position: relative;
	z-index: 1;
}

.codex-btn-arrow__fill {
	pointer-events: none;
	position: absolute;
	z-index: 2;
	border-radius: 999px;
	background: var(--btn-fill-bg);
	top: calc((100% - var(--icon-circle)) / 2);
	bottom: calc((100% - var(--icon-circle)) / 2);
	right: var(--icon-right);
	left: calc(100% - var(--icon-right) - var(--icon-circle));
	transition: background-color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
		inset 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.codex-btn-arrow__fill-label {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	padding-left: 1.6em;
	padding-right: calc(var(--icon-circle) + var(--icon-right) + 1.1em);
	color: var(--btn-fill-text);
	clip-path: inset(
		calc((100% - var(--icon-circle)) / 2)
		var(--icon-right)
		calc((100% - var(--icon-circle)) / 2)
		calc(100% - var(--icon-right) - var(--icon-circle))
	);
	transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
		clip-path 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.codex-btn-arrow__icon {
	pointer-events: none;
	position: absolute;
	right: var(--icon-right);
	top: 50%;
	z-index: 3;
	width: var(--icon-circle);
	height: var(--icon-circle);
	transform: translateY(-50%);
	border-radius: 999px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--btn-fill-bg);
	color: var(--btn-arrow);
	transition: background-color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),
		color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.codex-btn-arrow__icon svg {
	position: absolute;
	width: 1.2em;
	height: 1.2em;
	stroke-width: 1.5;
	stroke: currentColor;
	fill: none;
	transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.codex-btn-arrow__icon svg.is-incoming {
	transform: translateX(-170%);
}

.codex-btn-arrow__icon svg.is-current {
	transform: translateX(0);
}

/* Hover / focus / estado "pressed" (touch, ativado via JS) */
.codex-btn-arrow:hover .codex-btn-arrow__fill,
.codex-btn-arrow:focus-visible .codex-btn-arrow__fill,
.codex-btn-arrow.is-pressed .codex-btn-arrow__fill {
	background: var(--btn-fill-bg-hover);
	inset: 0;
}

.codex-btn-arrow:hover .codex-btn-arrow__fill-label,
.codex-btn-arrow:focus-visible .codex-btn-arrow__fill-label,
.codex-btn-arrow.is-pressed .codex-btn-arrow__fill-label {
	color: var(--btn-fill-text-hover);
	clip-path: inset(0 0 0 0);
}

.codex-btn-arrow:hover .codex-btn-arrow__icon,
.codex-btn-arrow:focus-visible .codex-btn-arrow__icon,
.codex-btn-arrow.is-pressed .codex-btn-arrow__icon {
	background: var(--btn-fill-bg-hover);
	color: var(--btn-arrow-hover);
}

.codex-btn-arrow:hover .codex-btn-arrow__icon svg.is-incoming,
.codex-btn-arrow:focus-visible .codex-btn-arrow__icon svg.is-incoming,
.codex-btn-arrow.is-pressed .codex-btn-arrow__icon svg.is-incoming {
	transform: translateX(0);
}

.codex-btn-arrow:hover .codex-btn-arrow__icon svg.is-current,
.codex-btn-arrow:focus-visible .codex-btn-arrow__icon svg.is-current,
.codex-btn-arrow.is-pressed .codex-btn-arrow__icon svg.is-current {
	transform: translateX(170%);
}



/* Variante "glass": botão outline sobre fundo com foto/glass */
.codex-btn-arrow--glass {
	--btn-bg: transparent;
	--btn-text: var(--codex-white);
	background: var(--glass-bg-light);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	border-color: var(--glass-border);
}

/* Tamanhos */
.codex-btn-arrow--sm {
	height: 3em;
	font-size: 0.875rem;
}

.codex-btn-arrow--lg {
	height: 4.2em;
	font-size: 1.125rem;
}

/* =========================================================
   Marcação de mídia faltante (codex_media_slot)
   ========================================================= */
.codex-slot-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.codex-marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	aspect-ratio: var(--marker-ratio, 16 / 9);
	padding: clamp(20px, 3vw, 36px);
	text-align: center;
	color: inherit;
	border: 1px dashed color-mix(in srgb, currentColor 24%, transparent);
	border-radius: inherit;
	background: color-mix(in srgb, currentColor 3%, transparent);
}

.codex-marker__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 50%;
	opacity: 0.7;
}

.codex-marker__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.65;
}

.codex-marker__tag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--codex-orange);
}

.codex-marker__title {
	font-family: var(--codex-font-heading);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 300;
	line-height: 1.25;
}

.codex-marker__need {
	max-width: 44ch;
	font-size: 0.875rem;
	line-height: 1.55;
	opacity: 0.72;
}

.codex-marker__where {
	margin-top: 4px;
	font-size: 0.75rem;
	opacity: 0.5;
}