/* ==========================================================================
   ANIMAÇÕES GLOBAIS
========================================================================== */

[data-reveal]{
	opacity:0;
	transform:translateY(34px);
	transition:opacity .75s ease, transform .75s ease;
	will-change:opacity, transform;
}

[data-reveal].is-visible{
	opacity:1;
	transform:translateY(0);
}


/* ==========================================================================
   VARIAÇÕES DE ENTRADA
========================================================================== */

[data-reveal="left"]{ transform:translateX(-42px); }
[data-reveal="right"]{ transform:translateX(42px); }
[data-reveal="zoom"]{ transform:scale(.96); }

[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible{
	transform:translateX(0);
}

[data-reveal="zoom"].is-visible{
	transform:scale(1);
}


/* ==========================================================================
   IMAGENS
========================================================================== */

.image-hover{
	position:relative;
	overflow:hidden;
}

.image-hover img{
	transition:transform .9s ease;
}

.image-hover:hover img{
	transform:scale(1.045);
}


/* ==========================================================================
   BOTÕES
========================================================================== */

.btn{
	transition:color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.btn:hover{
	transform:translateY(-2px);
}

.btn:active{
	transform:translateY(0);
}


/* ==========================================================================
   HEADER
========================================================================== */

.site-header{
	transition:height .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

.site-brand img{
	transition:max-height .35s ease, filter .35s ease;
}

.site-header .nav-link{
	transition:color .3s ease, background-color .3s ease;
}


/* ==========================================================================
   ÍCONES E ELEMENTOS INTERATIVOS
========================================================================== */

.icon-box,
.home-solution-icon,
.home-differential-icon,
.footer-social a,
.home-hero-controls button{
	transition:color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease;
}


/* ==========================================================================
   WHATSAPP
========================================================================== */

.whatsapp-float{
	animation:whatsappPulse 2.8s infinite;
	transition:background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.whatsapp-float:hover{
	animation-play-state:paused;
}


/* ==========================================================================
   KEYFRAMES
========================================================================== */

@keyframes whatsappPulse{

	0%{
		box-shadow:
			0 15px 35px rgba(37,211,102,.30),
			0 0 0 0 rgba(37,211,102,.28);
	}

	70%{
		box-shadow:
			0 15px 35px rgba(37,211,102,.30),
			0 0 0 17px rgba(37,211,102,0);
	}

	100%{
		box-shadow:
			0 15px 35px rgba(37,211,102,.30),
			0 0 0 0 rgba(37,211,102,0);
	}

}


/* ==========================================================================
   ACESSIBILIDADE
========================================================================== */

@media (prefers-reduced-motion:reduce){

	[data-reveal]{
		opacity:1;
		transform:none;
		transition:none;
	}

	.whatsapp-float{
		animation:none;
	}

	.image-hover img,
	.btn,
	.site-header,
	.site-brand img,
	.site-header .nav-link,
	.icon-box,
	.home-solution-icon,
	.home-differential-icon,
	.footer-social a,
	.home-hero-controls button{
		transition:none;
	}

}