/*==================================================
ANIMATION.CSS
Toyota Landing Page 2026
==================================================*/

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================
FADE LEFT
=========================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================
FADE RIGHT
=========================*/

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================
ZOOM
=========================*/

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================
PULSE
=========================*/

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/*=========================
ROTATE
=========================*/

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================
SHAKE
=========================*/

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-5px);

    }

    50%{

        transform:translateX(5px);

    }

    75%{

        transform:translateX(-5px);

    }

    100%{

        transform:translateX(0);

    }

}

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

.hero-content{

    animation:fadeLeft 1s ease;

}

.hero-image{

    animation:fadeRight 1s ease;

}

.hero-image img{

    animation:floating 5s ease-in-out infinite;

}

/*=========================
BUTTON
=========================*/

.btn-primary:hover,
.btn-secondary:hover,
.btn-wa:hover,
.btn-header:hover,
.promo-btn:hover{

    animation:pulse .5s;

}

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

.promo-item{

    animation:fadeUp .8s ease;

}

.promo-item:hover i{

    animation:rotate .7s linear;

}

/*=========================
MOBIL
=========================*/

.mobil-card{

    animation:zoomIn .7s ease;

}

.mobil-card:hover img{

    transform:scale(1.06);

}

/*=========================
WHY US
=========================*/

.why-card{

    animation:fadeUp .8s ease;

}

.why-card:hover .why-icon{

    animation:pulse .6s;

}

/*=========================
CTA
=========================*/

.cta h2{

    animation:fadeDown .8s ease;

}

.cta p{

    animation:fadeUp 1s ease;

}

/*=========================
TESTIMONI
=========================*/

.testimoni-card{

    animation:fadeUp .8s ease;

}

.avatar:hover{

    animation:pulse .5s;

}

/*=========================
CONTACT
=========================*/

.contact-card{

    animation:zoomIn .8s ease;

}

.contact-card:hover i{

    animation:shake .5s;

}

/*=========================
FOOTER
=========================*/

.footer-social a:hover{

    animation:pulse .5s;

}

/*=========================
FLOATING SOCIAL
=========================*/

.floating-social a{

    animation:floating 3s ease-in-out infinite;

}

.floating-social a:nth-child(2){

    animation-delay:.3s;

}

.floating-social a:nth-child(3){

    animation-delay:.6s;

}

.floating-social a:nth-child(4){

    animation-delay:.9s;

}

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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*=========================
HOVER EFFECT
=========================*/

.mobil-card,
.why-card,
.testimoni-card,
.contact-card,
.promo-item{

    transition:all .35s ease;

}

.mobil-card:hover,
.why-card:hover,
.testimoni-card:hover,
.contact-card:hover,
.promo-item:hover{

    transform:translateY(-10px);

}

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

body{

    animation:fadeIn .8s ease;

}
.mobile-nav-content a{

opacity:0;

transform:translateY(30px);

animation:menuFade .5s forwards;

}

.mobile-nav-content a:nth-child(1){

animation-delay:.1s;

}

.mobile-nav-content a:nth-child(2){

animation-delay:.2s;

}

.mobile-nav-content a:nth-child(3){

animation-delay:.3s;

}

.mobile-nav-content a:nth-child(4){

animation-delay:.4s;

}

.mobile-nav-content a:nth-child(5){

animation-delay:.5s;

}

@keyframes menuFade{

to{

opacity:1;

transform:translateY(0);

}

}