/* MV Flight Board — painel de avisos estilo aeroporto */

.mvfb{
	--mvfb-bg:#101216;
	--mvfb-flap:#191c22;
	--mvfb-flap-b:#0c0e12;
	--mvfb-ink:#f2b134;
	--mvfb-ink-hover:#fff;
	--mvfb-tag-bg:#c8102e;
	--mvfb-tag-ink:#fff;
	/* sem valor próprio, o selo acompanha as cores do painel */
	--mvfb-code-bg:var(--mvfb-ink);
	--mvfb-code-ink:var(--mvfb-bg);
	--mvfb-h:44px;
	--mvfb-sep:26px;

	position:relative;
	display:flex;
	align-items:stretch;
	width:100%;
	height:var(--mvfb-h);
	background:var(--mvfb-bg);
	border-top:1px solid rgba(255,255,255,.06);
	border-bottom:1px solid rgba(0,0,0,.6);
	overflow:hidden;
	font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* estoura o container da seção */
.mvfb--full{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

/* etiqueta lateral */
.mvfb-tag{
	display:flex;
	align-items:center;
	gap:8px;
	flex:0 0 auto;
	padding:0 14px;
	background:var(--mvfb-tag-bg);
	color:var(--mvfb-tag-ink);
	z-index:2;
}
.mvfb-tag__word{
	font-size:11px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	white-space:nowrap;
}
.mvfb-tag__dot{
	width:7px;
	height:7px;
	flex:0 0 auto;
	border-radius:50%;
	background:currentColor;
	animation:mvfb-pulse 1.8s ease-in-out infinite;
}
@keyframes mvfb-pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* trilho */
.mvfb-viewport{
	flex:1 1 auto;
	position:relative;
	overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
	        mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
}
.mvfb-track{
	display:flex;
	align-items:center;
	height:100%;
	width:max-content;
	margin:0;
	padding:0;
	list-style:none;
	will-change:transform;
	animation:mvfb-scroll var(--dur,40s) linear infinite;
}
@keyframes mvfb-scroll{
	from{transform:translate3d(0,0,0)}
	to{transform:translate3d(calc(var(--w,1000) * -1px),0,0)}
}
.mvfb--reverse .mvfb-track{animation-direction:reverse}
.mvfb.is-paused .mvfb-track{animation-play-state:paused}
/* O foco do teclado pausa sempre: quem chegou a um aviso com link pelo Tab
   precisa que ele pare para conseguir ler e clicar. O hover é opcional
   (controle "Pausar ao passar o mouse"), porque numa barra só de avisos, sem
   link, parar embaixo do cursor não serve para nada. */
.mvfb:not(.mvfb--nohoverpause) .mvfb-viewport:hover .mvfb-track,
.mvfb-track:focus-within{animation-play-state:paused}

.mvfb-group{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.mvfb-item{display:flex;align-items:center;gap:8px;padding:0 2px}

/* separador */
.mvfb-sep{
	width:var(--mvfb-sep);
	height:100%;
	flex:0 0 auto;
	background:
		linear-gradient(var(--mvfb-ink),var(--mvfb-ink)) center/9px 1px no-repeat,
		radial-gradient(circle,var(--mvfb-ink) 2px,transparent 2.5px) center/100% 100% no-repeat;
	opacity:.4;
}

/* selo de código */
.mvfb .mvfb-item .mvfb-code{
	flex:0 0 auto;
	padding:3px 6px;
	border-radius:2px;
	background:var(--mvfb-code-bg);
	color:var(--mvfb-code-ink);
	font-size:10px;
	font-weight:700;
	letter-spacing:.1em;
	line-height:1;
	white-space:nowrap;
}

/* texto e abas
   Especificidade alta de propósito: as regras de link do Kit do Elementor
   (.elementor-kit-N a) venceriam um seletor simples e o aviso com link sairia
   com a cor/estilo global em vez do configurado no widget. */
.mvfb .mvfb-item .mvfb-text,
.mvfb .mvfb-item a.mvfb-text{
	display:inline-flex;
	color:var(--mvfb-ink);
	text-decoration:none;
	font-size:13px;
	letter-spacing:.06em;
	line-height:1;
	white-space:nowrap;
	perspective:220px;
	background:none;
	border:0;
}
.mvfb .mvfb-item a.mvfb-text:hover,
.mvfb .mvfb-item a.mvfb-text:focus-visible{
	color:var(--mvfb-ink-hover);
	text-decoration:none;
}
.mvfb .mvfb-item a.mvfb-text:focus-visible{outline:2px solid var(--mvfb-ink);outline-offset:3px}

.mvfb-char{
	display:inline-block;
	min-width:.66em;
	padding:5px 1px;
	margin-right:1px;
	text-align:center;
	border-radius:2px;
	background:linear-gradient(180deg,var(--mvfb-flap) 0 49.4%,var(--mvfb-flap-b) 50.6% 100%);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
	transform-origin:center;
}
.mvfb-char.is-space{background:none;box-shadow:none;min-width:.34em}
@keyframes mvfb-flap{
	0%{transform:rotateX(-92deg);opacity:0}
	60%{transform:rotateX(12deg);opacity:1}
	100%{transform:rotateX(0);opacity:1}
}

/* Entrada e hover só entram por classe (o JS liga e desliga).
   Se a animação ficasse na regra base, o navegador não a reiniciaria no hover
   — mesmo nome de animação já em curso não recomeça. */
.mvfb-text.is-intro .mvfb-char{
	animation:mvfb-flap .45s cubic-bezier(.3,.9,.3,1) backwards;
	animation-delay:calc(var(--i,0) * 28ms);
}
.mvfb--hoverflap .mvfb-text.is-flapping .mvfb-char:not(.is-space){
	animation:mvfb-flap .4s cubic-bezier(.3,.9,.3,1) both;
	animation-delay:calc(var(--i,0) * 22ms);
}
.mvfb--noflap .mvfb-char{animation:none}

/* botão pausar */
.mvfb-toggle{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:7px;
	padding:0 14px;
	margin:0;
	border:0;
	border-left:1px solid rgba(255,255,255,.08);
	background:transparent;
	color:var(--mvfb-ink);
	font:inherit;
	font-size:10px;
	letter-spacing:.16em;
	text-transform:uppercase;
	cursor:pointer;
	opacity:.6;
	transition:opacity .2s;
}
.mvfb-toggle:hover,
.mvfb-toggle:focus-visible{opacity:1}
.mvfb-toggle__icon{
	width:9px;
	height:11px;
	border-left:3px solid currentColor;
	border-right:3px solid currentColor;
}
.mvfb.is-paused .mvfb-toggle__icon{
	width:0;
	height:0;
	border:0;
	border-left:10px solid currentColor;
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
}

@media (max-width:767px){
	.mvfb-text{font-size:11.5px}
	.mvfb--tag-mobile-off .mvfb-tag__word{display:none}
	.mvfb--tag-mobile-off .mvfb-tag{padding:0 11px}
	.mvfb-toggle__label{display:none}
	.mvfb-toggle{padding:0 11px}
}

@media (prefers-reduced-motion:reduce){
	.mvfb-track{animation:none}
	.mvfb-char{animation:none}
	.mvfb-tag__dot{animation:none;opacity:1}
	.mvfb-viewport{overflow-x:auto}
}