/* Header muda de transparente para sólido ao rolar (era feito via JS state no React) */
header.is-scrolled {
	background-color: #0a0f1c;
	box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

/* Menu mobile (escondido por padrão, JS adiciona .is-open) */
#mobile-menu {
	display: none;
}
#mobile-menu.is-open {
	display: flex;
}

/* Fade-in ao rolar — substitui as animações do framer-motion.
   No HTML original os elementos nasciam com style="opacity:0;transform:translateY(40px)".
   Aqui usamos uma classe (.reveal) + IntersectionObserver via main.js */
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0) translateX(0);
}

/* Botão flutuante do WhatsApp */
.whatsapp-pulse {
	animation: batistela-pulse 2.4s infinite;
}
@keyframes batistela-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
	70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
	100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}