/* ======================================================
   BARBER LUXURY — ANIMATIONS
   ANIMAÇÕES PREMIUM SUAVES
   ====================================================== */


/* =========================================
   BASE DE ANIMAÇÃO
========================================= */

.animate{
opacity:0;
transform:translateY(40px);
transition:all .6s ease;
}

.animate.visible{
opacity:1;
transform:translateY(0);
}


/* =========================================
   FADE IN
========================================= */

.fade-in{
opacity:0;
animation:fadeIn 1s ease forwards;
}

@keyframes fadeIn{

0%{
opacity:0;
}

100%{
opacity:1;
}

}


/* =========================================
   FADE UP
========================================= */

.fade-up{
opacity:0;
transform:translateY(40px);
animation:fadeUp 0.8s ease forwards;
}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}


/* =========================================
   FADE DOWN
========================================= */

.fade-down{
opacity:0;
transform:translateY(-40px);
animation:fadeDown 0.8s ease forwards;
}

@keyframes fadeDown{

0%{
opacity:0;
transform:translateY(-40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}


/* =========================================
   SCALE IN
========================================= */

.scale-in{
opacity:0;
transform:scale(.9);
animation:scaleIn .6s ease forwards;
}

@keyframes scaleIn{

0%{
opacity:0;
transform:scale(.9);
}

100%{
opacity:1;
transform:scale(1);
}

}


/* =========================================
   CARD HOVER PREMIUM
========================================= */

.card{

transition:
transform .35s ease,
box-shadow .35s ease,
border .35s ease;

}

.card:hover{

transform:translateY(-6px) scale(1.01);

}


/* =========================================
   BOTÃO ANIMAÇÃO
========================================= */

.btn{

transition:
transform .2s ease,
box-shadow .2s ease,
background .3s ease;

}

.btn:hover{

transform:translateY(-2px);

}

.btn:active{

transform:translateY(0) scale(.97);

}


/* =========================================
   TEXTO DOURADO BRILHO
========================================= */

.gold{

animation:goldGlow 3s ease-in-out infinite alternate;

}

@keyframes goldGlow{

0%{

text-shadow:
0 0 5px rgba(212,175,55,0.2),
0 0 15px rgba(212,175,55,0.15);

}

100%{

text-shadow:
0 0 8px rgba(212,175,55,0.4),
0 0 25px rgba(212,175,55,0.25);

}

}


/* =========================================
   HERO FLOAT
========================================= */

.hero-img{

animation:heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}


/* =========================================
   PARTÍCULAS / BACKGROUND FLOAT
========================================= */

@keyframes floatSlow{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}


/* =========================================
   DELAY UTILITIES
========================================= */

.delay-1{
animation-delay:.1s;
}

.delay-2{
animation-delay:.2s;
}

.delay-3{
animation-delay:.3s;
}

.delay-4{
animation-delay:.4s;
}

.delay-5{
animation-delay:.5s;
}

.delay-6{
animation-delay:.6s;
}


/* =========================================
   SCROLL REVEAL
========================================= */

.reveal{

opacity:0;
transform:translateY(60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}


/* =========================================
   LOADING SPINNER
========================================= */

.spinner{

width:30px;
height:30px;

border:3px solid rgba(212,175,55,0.2);
border-top:3px solid #D4AF37;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}