/**
 * Mind Elements — Menu Fullscreen.
 * Reproduz a técnica do menu circular + overlay fullscreen (estilo travisscott.com):
 * botão redondo fixo com emblema girando, anel com brilho que percorre a borda,
 * overlay que dá fade e pills que entram escalonadas.
 *
 * Todo o visual é controlado por CSS vars (--mfs-*), setadas pelos controles do
 * Elementor. Assinatura de timing: durações múltiplas de 0.111s (como no original).
 */

.mind-fsmenu {
	/* Botão / emblema */
	--mfs-toggle-size: 70px;
	--mfs-toggle-bottom: 30px;
	--mfs-toggle-x: 30px;
	--mfs-spin-speed: 12s;
	--mfs-toggle-bg: rgba(217, 217, 217, 0.04);
	--mfs-toggle-border-color: rgba(255, 255, 255, 0.3);
	--mfs-toggle-border-width: 1px;
	--mfs-icon-color: #ffffff;
	--mfs-icon-scale: 62%;

	/* Anel de brilho */
	--mfs-shine-color: #ffffff;
	--mfs-shine-speed: 5s;
	--mfs-ring-thickness: 2px;

	/* Overlay */
	--mfs-overlay-bg: rgba(0, 0, 0, 0.85);
	--mfs-overlay-blur: 0px;

	/* Pills */
	--mfs-pill-text: #ffffff;
	--mfs-pill-hover-text: #ffffff;
	--mfs-pill-border: rgba(255, 255, 255, 0.3);
	--mfs-pill-border-width: 1px;
	--mfs-pill-bg: rgba(217, 217, 217, 0.04);
	--mfs-pill-hover-bg: rgba(255, 255, 255, 0.12);
	--mfs-pill-radius: 30px;
	--mfs-pill-pad-y: 15px;
	--mfs-pill-pad-x: 34px;
	--mfs-pill-min-width: 260px;
	--mfs-pill-gap: 22px;

	/* Rótulos laterais */
	--mfs-side-color: #ffffff;
}

/* --------------------------------------------------------------------------
 * Botão toggle (fixo no rodapé central)
 * ----------------------------------------------------------------------- */
.mind-fsmenu__toggle {
	position: fixed;
	bottom: var(--mfs-toggle-bottom);
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	width: var(--mfs-toggle-size);
	height: var(--mfs-toggle-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: var(--mfs-toggle-border-width) solid var(--mfs-toggle-border-color);
	border-radius: 50%;
	background: var(--mfs-toggle-bg);
	color: var(--mfs-icon-color);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.222s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.222s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.222s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Posição horizontal (via prefix_class no wrapper) */
.mfs-pos-center .mind-fsmenu__toggle {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}
.mfs-pos-left .mind-fsmenu__toggle {
	left: var(--mfs-toggle-x);
	right: auto;
	transform: none;
}
.mfs-pos-right .mind-fsmenu__toggle {
	right: var(--mfs-toggle-x);
	left: auto;
	transform: none;
}

/* Brilho que percorre o anel da borda, suave, uma volta a cada --mfs-shine-speed.
 * Técnica: conic-gradient em forma de anel (via mask) girando 360°. */
.mind-fsmenu__toggle::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	padding: var(--mfs-ring-thickness);
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 250deg,
		color-mix(in srgb, var(--mfs-shine-color) 12%, transparent) 300deg,
		var(--mfs-shine-color) 344deg,
		color-mix(in srgb, var(--mfs-shine-color) 12%, transparent) 350deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: mind-fsmenu-shine var(--mfs-shine-speed) linear infinite;
	pointer-events: none;
}

/* Desligar o brilho (prefix_class) */
.mfs-shine-off .mind-fsmenu__toggle::after {
	display: none;
}

/* Desligar o giro do emblema (prefix_class) */
.mfs-spin-off .mind-fsmenu__icon {
	animation: none;
}

@keyframes mind-fsmenu-shine {
	to {
		transform: rotate(360deg);
	}
}

/* Emblema que gira continuamente */
.mind-fsmenu__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mfs-icon-scale);
	height: var(--mfs-icon-scale);
	animation: mind-fsmenu-spin var(--mfs-spin-speed) linear infinite;
	transition: opacity 0.222s ease, transform 0.444s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.mind-fsmenu__icon svg,
.mind-fsmenu__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.mind-fsmenu__icon,
	.mind-fsmenu__toggle::after {
		animation: none;
	}
}

/* O "X" de fechar mora dentro do mesmo botão, sobreposto ao emblema */
.mind-fsmenu__x {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.6) rotate(-45deg);
	transition: opacity 0.222s ease, transform 0.444s cubic-bezier(0.075, 0.82, 0.165, 1);
	pointer-events: none;
}

.mind-fsmenu__x svg {
	width: 40%;
	height: 40%;
	stroke: currentColor;
	stroke-width: 1.5;
}

.mind-fsmenu.is-open .mind-fsmenu__icon {
	opacity: 0;
	transform: scale(0.6);
	animation-play-state: paused;
}

.mind-fsmenu.is-open .mind-fsmenu__x {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* --------------------------------------------------------------------------
 * Overlay fullscreen
 * ----------------------------------------------------------------------- */
.mind-fsmenu__overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--mfs-pill-gap);
	background: var(--mfs-overlay-bg);
	-webkit-backdrop-filter: blur(var(--mfs-overlay-blur));
	backdrop-filter: blur(var(--mfs-overlay-blur));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.444s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0.444s cubic-bezier(0.4, 0, 0.2, 1);
}

.mind-fsmenu.is-open .mind-fsmenu__overlay {
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------------------------------------
 * Pills (itens de menu) — entram escalonadas
 * ----------------------------------------------------------------------- */
.mind-fsmenu__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mfs-pill-gap);
}

.mind-fsmenu__item {
	display: block;
	min-width: var(--mfs-pill-min-width);
	padding: var(--mfs-pill-pad-y) var(--mfs-pill-pad-x);
	border: var(--mfs-pill-border-width) solid var(--mfs-pill-border);
	border-radius: var(--mfs-pill-radius);
	background: var(--mfs-pill-bg);
	color: var(--mfs-pill-text);
	font-size: 14px;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;

	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.444s cubic-bezier(0.075, 0.82, 0.165, 1),
		transform 0.444s cubic-bezier(0.075, 0.82, 0.165, 1),
		background-color 0.222s ease, color 0.222s ease;
}

.mind-fsmenu__item:hover {
	background: var(--mfs-pill-hover-bg);
	color: var(--mfs-pill-hover-text);
}

.mind-fsmenu.is-open .mind-fsmenu__item {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(0.111s + var(--index) * 0.066s);
}

/* --------------------------------------------------------------------------
 * Rótulos laterais (EMAIL / WhatsApp)
 * ----------------------------------------------------------------------- */
.mind-fsmenu__side {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--mfs-side-color);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.444s ease;
	transition-delay: 0.222s;
}

.mind-fsmenu__side--left {
	left: 40px;
}

.mind-fsmenu__side--right {
	right: 40px;
}

.mind-fsmenu.is-open .mind-fsmenu__side {
	opacity: 0.85;
}

.mind-fsmenu__side:hover {
	opacity: 1;
}

@keyframes mind-fsmenu-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 640px) {
	.mind-fsmenu__side {
		display: none;
	}
	.mind-fsmenu__item {
		min-width: 220px;
	}
}