/* ==========================================
   FRUTA DORADA
   ANIMATIONS.CSS
========================================== */

/* -----------------------------
   Frasco flotando
------------------------------*/

@keyframes float {

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

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

    100%{
        transform:translateY(0px);
    }

}


/* -----------------------------
   Flecha scroll
------------------------------*/

@keyframes bounce {

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}


/* -----------------------------
   Fade Up
------------------------------*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.fade-up.show{

    opacity:1;

    transform:none;

}


/* -----------------------------
   Fade Left
------------------------------*/

.fade-left{

    opacity:0;

    transform:translateX(-80px);

    transition:1s;

}

.fade-left.show{

    opacity:1;

    transform:none;

}


/* -----------------------------
   Fade Right
------------------------------*/

.fade-right{

    opacity:0;

    transform:translateX(80px);

    transition:1s;

}

.fade-right.show{

    opacity:1;

    transform:none;

}


/* -----------------------------
   Zoom
------------------------------*/

.zoom{

    opacity:0;

    transform:scale(.92);

    transition:1s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}


/* -----------------------------
   Botón brillante
------------------------------*/

@keyframes shine{

0%{

left:-120%;

}

100%{

left:180%;

}

}


/* -----------------------------
   Glow Dorado
------------------------------*/

@keyframes glow{

0%{

filter:drop-shadow(0 0 0 rgba(233,184,66,.25));

}

50%{

filter:drop-shadow(0 0 18px rgba(233,184,66,.45));

}

100%{

filter:drop-shadow(0 0 0 rgba(233,184,66,.25));

}

}


/* -----------------------------
   Aparición Hero
------------------------------*/

.hero-title{

opacity:0;

transform:translateY(35px);

animation:

heroTitle 1s ease forwards;

animation-delay:.2s;

}

@keyframes heroTitle{

to{

opacity:1;

transform:none;

}

}


.hero-subtitle{

opacity:0;

transform:translateY(35px);

animation:

heroTitle 1s ease forwards;

animation-delay:.45s;

}


.hero-text{

opacity:0;

transform:translateY(35px);

animation:

heroTitle 1s ease forwards;

animation-delay:.7s;

}


.hero-button{

opacity:0;

transform:translateY(35px);

animation:

heroTitle 1s ease forwards;

animation-delay:.95s;

}


.hero-video{

opacity:0;

transform:translateX(80px);

animation:

heroVideo 1.4s ease forwards;

animation-delay:.6s;

}

@keyframes heroVideo{

to{

opacity:1;

transform:none;

}

}


/* -----------------------------
   Scroll indicator
------------------------------*/

.scroll-indicator{

animation:

bounce 2s infinite;

}


/* -----------------------------
   Video
------------------------------*/

.hero-video video{

animation:

glow 8s ease infinite;

}