/* ===========================
   ANIMAÇÕES GERAIS
===========================*/

.fade-up{
opacity:0;
transform:translateY(80px);
transition:.8s ease;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}

.fade-left{
opacity:0;
transform:translateX(-80px);
transition:.8s ease;
}

.fade-left.show{
opacity:1;
transform:translateX(0);
}

.fade-right{
opacity:0;
transform:translateX(80px);
transition:.8s ease;
}

.fade-right.show{
opacity:1;
transform:translateX(0);
}

.zoom{
opacity:0;
transform:scale(.85);
transition:.7s;
}

.zoom.show{
opacity:1;
transform:scale(1);
}

.rotate{
animation:rotate 30s linear infinite;
}

.float{
animation:float 6s ease-in-out infinite;
}

.float2{
animation:float2 8s ease infinite;
}

.pulse{
animation:pulse 2.5s infinite;
}

.glow{
animation:glow 3s infinite;
}

.hero-phone{

animation:phoneFloat 8s ease infinite;

}

.hero-polvo{

animation:octopus 6s ease infinite;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 30px 80px rgba(0,0,0,.45);

}

button:hover,
.btn:hover{

transform:translateY(-4px);

}

@keyframes float{

0%{transform:translateY(0)}

50%{transform:translateY(-20px)}

100%{transform:translateY(0)}

}

@keyframes float2{

0%{transform:translateY(0)}

25%{transform:translateY(-10px)}

75%{transform:translateY(15px)}

100%{transform:translateY(0)}

}

@keyframes pulse{

0%{transform:scale(1)}

50%{transform:scale(1.08)}

100%{transform:scale(1)}

}

@keyframes glow{

0%{

box-shadow:0 0 0 rgba(255,0,100,.3);

}

50%{

box-shadow:0 0 35px rgba(255,0,100,.8);

}

100%{

box-shadow:0 0 0 rgba(255,0,100,.3);

}

}

@keyframes phoneFloat{

0%{

transform:rotate(-8deg) translateY(0);

}

50%{

transform:rotate(-6deg) translateY(-20px);

}

100%{

transform:rotate(-8deg) translateY(0);

}

}

@keyframes octopus{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px) rotate(2deg);

}

100%{

transform:translateY(0);

}

}

@keyframes rotate{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}
}