/* Styles para a seção de informações (inform.css)
	 - Gradiente animado no título
	 - Links estilizados como botões "mágicos" com brilho/hover
*/

/* Título com gradiente linear animado */
#informacoes h2,
section[id="Atualizações"] h2,
.inform h2,
.inform-title {
	font-weight: 800;
	font-size: clamp(20px, 3.6vw, 36px);
	line-height: 1.05;
	margin: 0 0 0.6rem 0;
	background: linear-gradient(90deg, #ff7a18 0%, #ff0066 30%, #7f00ff 60%, #00d4ff 100%);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: inform-gradient 6s ease-in-out infinite;
	-webkit-font-smoothing: antialiased;
	text-align: center;
	padding: 40px 12px;
}

@keyframes inform-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Botão mágico para links dentro da seção inform
	 Aplica-se a: #inform a, .inform a — se preferir, adicione a classe `magic-btn` ao HTML */
.magic-btn,
#informacoes a,
.inform a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	background: linear-gradient(90deg, rgba(255,122,24,0.95) 0%, rgba(255,0,102,0.95) 40%, rgba(127,0,255,0.95) 70%);
	box-shadow: 0 8px 28px rgba(127,0,255,0.12), inset 0 -4px 10px rgba(0,0,0,0.12);
	transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms, filter 260ms;
	position: relative;
	overflow: hidden;
}

/* efeito de brilho / faísca usando pseudo-elemento */
.magic-btn::after,
#informacoes a::after,
.inform a::after {
	content: '';
	position: absolute;
	top: -40%;
	left: -30%;
	width: 60%;
	height: 180%;
	transform: rotate(25deg) translateX(-100%);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
	opacity: 0;
	transition: transform 650ms cubic-bezier(.2,.9,.2,1), opacity 420ms;
	pointer-events: none;
}

.magic-btn:hover,
#informacoes a:hover,
.inform a:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 18px 48px rgba(127,0,255,0.20), inset 0 -6px 18px rgba(0,0,0,0.15);
}

.magic-btn:hover::after,
#informacoes a:hover::after,
.inform a:hover::after {
	transform: rotate(25deg) translateX(80%);
	opacity: 1;
}

/* foco acessível */
.magic-btn:focus,
#informacoes a:focus,
.inform a:focus {
	outline: 3px solid rgba(0,212,255,0.24);
	outline-offset: 4px;
	box-shadow: 0 12px 36px rgba(0,212,255,0.08);
}

/* pequeno ajuste para botões em telas pequenas */

@media (max-width: 600px) {
	.magic-btn,
	#informacoes a,
	.inform a {
		padding: 8px 12px;
		border-radius: 10px;
		font-size: 14px;
	}
}

/* garantia de contraste: texto com leve sombra para melhor leitura sobre gradiente */
.magic-btn,
#informacoes a,
.inform a { text-shadow: 0 1px 0 rgba(0,0,0,0.12); }

/* Forçar mesmos tamanhos dos botões na seção de informações */
#informacoes .magic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 360px; /* largura baseada no botão maior (ajuste se necessário) */
	box-sizing: border-box;
	text-align: center;
}

@media (max-width: 900px) {
	#informacoes .magic-btn { min-width: 260px; }
}

@media (max-width: 600px) {
	#informacoes .magic-btn { min-width: 0; width: 100%; display: block; }
}

/* Estilos da seção Atualizações foram movidos para atualizacao.css */