/* ===========================================================
   Proyecto : Método IPOV
   Archivo  : animations.css
   Versión  : 0.1
   Autor    : OpenAI + Pablo Gustavo Díaz
=========================================================== */


/* ===========================================================
   TRANSICIONES GENERALES
=========================================================== */

*{

    transition:
        color .30s ease,
        background-color .30s ease,
        border-color .30s ease,
        transform .35s ease,
        box-shadow .35s ease,
        opacity .35s ease;

}


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

@keyframes heroFade{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.hero-tag{

    animation:heroFade .6s ease forwards;

}

#hero h1{

    animation:heroFade .9s ease forwards;

}

#hero h2{

    animation:heroFade 1.2s ease forwards;

}

#hero p{

    animation:heroFade 1.5s ease forwards;

}

.hero-buttons{

    animation:heroFade 1.8s ease forwards;

}


/* ===========================================================
   LIBRO
=========================================================== */

@keyframes floatingBook{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-book{

    animation:

        heroFade 1.4s ease,

        floatingBook 5s ease-in-out infinite;

}


/* ===========================================================
   GLOW VERDE
=========================================================== */

@keyframes greenGlow{

    0%{

        box-shadow:0 0 0 rgba(66,217,140,0);

    }

    50%{

        box-shadow:

            0 0 25px rgba(66,217,140,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(66,217,140,0);

    }

}

.btn-success{

    animation:greenGlow 3s infinite;

}


/* ===========================================================
   TARJETAS
=========================================================== */

.card-ipov{

    overflow:hidden;

    position:relative;

}

.card-ipov::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.07),

        transparent

    );

}

.card-ipov:hover::before{

    left:120%;

    transition:1.1s;

}


/* ===========================================================
   FORMULA
=========================================================== */

@keyframes formulaPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

.formula{

    animation:formulaPulse 4s ease infinite;

}


/* ===========================================================
   TITULOS
=========================================================== */

.section-title h2{

    position:relative;

    display:inline-block;

}

.section-title h2::after{

    content:"";

    display:block;

    width:0;

    height:3px;

    margin:auto;

    margin-top:14px;

    background:var(--green);

    transition:.5s;

}

.section-title:hover h2::after{

    width:100%;

}


/* ===========================================================
   NAVBAR
=========================================================== */

.navbar{

    transition:

        background .35s,

        padding .35s,

        box-shadow .35s;

}

.navbar.scrolled{

    background:#07120D;

    padding:10px 0;

    box-shadow:

        0 12px 30px rgba(0,0,0,.35);

}


/* ===========================================================
   BOTONES
=========================================================== */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

}

.btn:hover::before{

    left:120%;

    transition:.7s;

}


/* ===========================================================
   SCROLL INDICATOR
=========================================================== */

@keyframes scrollMouse{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(18px);

    }

}

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

}

.scroll-indicator span{

    display:block;

    width:24px;

    height:40px;

    border:2px solid rgba(255,255,255,.45);

    border-radius:20px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:4px;

    height:8px;

    border-radius:4px;

    background:white;

    transform:translateX(-50%);

    animation:scrollMouse 2s infinite;

}


/* ===========================================================
   AOS
=========================================================== */

[data-aos]{

    transition-duration:.9s !important;

}


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

footer a{

    transition:.3s;

}

footer a:hover{

    color:var(--green-light);

}


/* ===========================================================
   FUTURAS ANIMACIONES
=========================================================== */

/*

v0.2

- aparición progresiva de la fórmula IPOV

- animación de dashboards

- partículas de datos

- líneas del mapa argentino

- efecto IA

- timeline

- contador de campañas

- efecto parallax

- scroll storytelling

*/