/*==================================================
DIGIFARM ANIMATION.CSS
==================================================*/

/*==================== PAGE ====================*/

body{
animation:pageFade .6s ease;
}

@keyframes pageFade{
from{opacity:0;}
to{opacity:1;}
}

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

.hero{
animation:heroZoom 1.2s ease;
}

@keyframes heroZoom{
from{transform:scale(1.08);}
to{transform:scale(1);}
}

.hero-overlay{
animation:fadeIn .8s ease;
}

.hero-content{
animation:slideDown .7s ease;
}

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

.logo{
animation:rotateLogo .8s ease;
}

@keyframes rotateLogo{
0%{transform:rotate(-180deg) scale(.4);}
100%{transform:rotate(0) scale(1);}
}

.avatar{
animation:avatarShow .8s ease;
}

@keyframes avatarShow{
0%{transform:scale(.5);opacity:0;}
100%{transform:scale(1);opacity:1;}
}

.icon-btn{
transition:.3s;
}

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

.icon-btn:active{
transform:scale(.92);
}

/*==================== WALLET ====================*/

.wallet-card{
animation:walletUp .8s ease;
}

@keyframes walletUp{
from{opacity:0;transform:translateY(50px);}
to{opacity:1;transform:translateY(0);}
}

.wallet-card:hover{
transform:translateY(-5px);
}

.wallet-icon{
animation:walletPulse 2.5s infinite;
}

@keyframes walletPulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.08);}
}

/*==================== STATS ====================*/

.stat-card{
animation:cardUp .7s ease both;
transition:.35s;
}

.stat-card:nth-child(2){
animation-delay:.1s;
}

.stat-card:nth-child(3){
animation-delay:.2s;
}

.stat-card:nth-child(4){
animation-delay:.3s;
}

.stat-card:hover{
transform:translateY(-8px);
}

.stat-icon{
animation:float 4s ease-in-out infinite;
}

/*==================== PROMO ====================*/

.promo-card{
animation:cardUp .9s ease;
}

.promo-animal{
animation:animalFloat 4s ease-in-out infinite;
}

@keyframes animalFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-10px);}
}

.promo-button{
transition:.3s;
}

.promo-button:hover{
transform:translateY(-4px);
box-shadow:0 12px 25px rgba(0,0,0,.15);
}

.promo-button:active{
transform:scale(.95);
}

/*==================== FARM ====================*/

.farm-card{
animation:cardUp .8s ease both;
transition:.35s;
}

.farm-card:hover{
transform:translateY(-8px);
}

.farm-card:hover img{
transform:scale(1.08);
}

.farm-image img{
transition:.4s;
}

.farm-status{
animation:pulseBadge 2s infinite;
}

.progress-bar{
animation:progressGrow 1.8s ease;
}

.progress-bar::after{
animation:shine 2.2s linear infinite;
}

/*==================== ACTIVITY ====================*/

.activity-item{
animation:fadeLeft .7s ease both;
transition:.3s;
}

.activity-item:nth-child(2){
animation-delay:.08s;
}

.activity-item:nth-child(3){
animation-delay:.16s;
}

.activity-item:nth-child(4){
animation-delay:.24s;
}

.activity-item:nth-child(5){
animation-delay:.32s;
}

.activity-item:hover{
transform:translateX(6px);
}

.activity-icon{
animation:floatSmall 3s ease-in-out infinite;
}

/*==================== NAVIGATION ====================*/

.bottom-nav{
animation:navUp .8s ease;
}

@keyframes navUp{
from{transform:translate(-50%,100%);}
to{transform:translate(-50%,0);}
}

.nav-item{
transition:.3s;
}

.nav-item:hover{
color:var(--primary);
}

.nav-item:hover i{
transform:translateY(-4px);
}

.nav-item i{
transition:.3s;
}

.nav-item.active i{
animation:activeIcon 1.8s infinite;
}

.nav-center{
animation:centerButton 1s ease;
transition:.35s;
}

.nav-center:hover{
transform:translateY(-6px) scale(1.08);
}

.nav-center:active{
transform:scale(.94);
}

/*==================== BADGE ====================*/

.badge{
animation:notification 1.6s infinite;
}

@keyframes notification{
0%,100%{transform:scale(1);}
50%{transform:scale(1.2);}
}

/*==================== SHIMMER ====================*/

.shimmer{
position:relative;
overflow:hidden;
}

.shimmer::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
animation:shine 2.2s linear infinite;
}

@keyframes shine{
0%{left:-120%;}
100%{left:150%;}
}

/*==================== GLOBAL ====================*/

.fade-up{
animation:cardUp .8s ease;
}

.fade-left{
animation:fadeLeft .8s ease;
}

.fade-right{
animation:fadeRight .8s ease;
}

.zoom-in{
animation:zoomIn .6s ease;
}

.bounce{
animation:bounce 2.5s infinite;
}

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

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

@keyframes cardUp{
from{opacity:0;transform:translateY(35px);}
to{opacity:1;transform:translateY(0);}
}

@keyframes fadeLeft{
from{opacity:0;transform:translateX(-35px);}
to{opacity:1;transform:translateX(0);}
}

@keyframes fadeRight{
from{opacity:0;transform:translateX(35px);}
to{opacity:1;transform:translateX(0);}
}

@keyframes slideDown{
from{opacity:0;transform:translateY(-35px);}
to{opacity:1;transform:translateY(0);}
}

@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}

@keyframes zoomIn{
from{opacity:0;transform:scale(.85);}
to{opacity:1;transform:scale(1);}
}

@keyframes bounce{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}

@keyframes float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}

@keyframes floatSmall{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-4px);}
}

@keyframes activeIcon{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-4px);}
}

@keyframes centerButton{
0%{transform:scale(.5);}
100%{transform:scale(1);}
}

@keyframes pulseBadge{
0%,100%{transform:scale(1);}
50%{transform:scale(1.08);}
}

@keyframes progressGrow{
from{width:0;}
}

/*==================== RIPPLE ====================*/

.ripple{
position:relative;
overflow:hidden;
}

.ripple:after{
content:"";
position:absolute;
width:10px;
height:10px;
background:rgba(255,255,255,.5);
border-radius:50%;
transform:scale(0);
opacity:0;
pointer-events:none;
}

.ripple:active:after{
animation:ripple .6s ease;
}

@keyframes ripple{
0%{transform:scale(0);opacity:.6;}
100%{transform:scale(20);opacity:0;}
}

/*==================== REDUCE MOTION ====================*/

@media(prefers-reduced-motion:reduce){
*{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}
}