/**
 * CSS Customizado do Tema Natal 2025
 * Estilos customizados do tema
 */

 html {
	scroll-behavior: smooth;
	overflow: scroll;
	scrollbar-color: var(--color-yellow) var(--color-primary) ;
	scrollbar-width: thin;
 }

 @media (prefers-reduced-motion: no-preference) {
	html {
		scroll-padding-top: 110px; /* Espaço para header (padding 16px + logo 69px + padding 16px + margem) */
	}
 }
 
.body-natal {
	background: linear-gradient(90deg, #F198BE 0%, #3BAA7C 25.42%, #89AADA 48.39%, #FDC627 70.31%, #F198BE 100%);
	background-size: 200% 200%; /* Permite animação do gradiente */
	animation: gradient-shift 8s ease infinite;
}

/* Animação do gradiente */
@keyframes gradient-shift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.main-natal {
	background: var(--color-bg-main);
	border-radius: var(--border-radius-xl);
	margin: var(--spacer-2);
	position: relative;
	overflow: hidden;
	z-index: 0; /* Abaixo do hero para que as estrelas sejam visíveis */
}

main header {
	color: var(--color-text-light);
	font-size: var(--font-size-xxl);
	font-weight: var(--font-weight-bold);
	text-align: center;
}
/** 
 * Classe utilitária para destacar texto com efeito arco-íris animado
 * Use: <span class="rainbow-highlight">Seu texto</span>
 */
.rainbow-highlight {
	background: linear-gradient(
		90deg, 
		#ff4e50,    /* vermelho */
		#f9d423,    /* amarelo */
		#43e97b,    /* verde */
		#38f9d7,    /* aqua */
		#3b66e1,    /* azul */
		#ae47ff,    /* roxo */
		#ff4e50     /* volta ao vermelho para loop animado */
	);
	background-size: 400% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	animation: rainbow-gradient 2.5s linear infinite;
	font-weight: var(--font-weight-extrabold, 800);
}

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