/*==================================================
    ANIMATION DU HERO
==================================================*/

.hero-animate
{
    opacity: 0;
    transform: translateY(22px);
    animation: hero-reveal .8s cubic-bezier(.22, .8, .32, 1) forwards;
}

.hero-animate--logo
{
    animation-delay: .25s;
}

.hero-animate--tagline
{
    animation-delay: .45s;
}

.hero-animate--text
{
    animation-delay: .62s;
}

.hero-animate--actions
{
    animation-delay: .80s;
}

@keyframes hero-reveal
{
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-scroll-indicator
{
    0%
    {
        transform: translateY(0);
    }

    70%,
    100%
    {
        transform: translateY(200%);
    }
}


/*==================================================
    ANIMATION DES EN-TÊTES DE PAGE
==================================================*/

.page-header-animate
{
    opacity: 0;
    transform: translateY(18px);
    animation: page-header-reveal .7s cubic-bezier(.22, .8, .32, 1) forwards;
}

.page-header-animate--eyebrow
{
    animation-delay: .12s;
}

.page-header-animate--signature
{
    animation-delay: .22s;
}

.page-header-animate--title
{
    animation-delay: .34s;
}

.page-header-animate--subtitle
{
    animation-delay: .48s;
}

@keyframes page-header-reveal
{
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==================================================
    ANIMATION DU BANDEAU D’INTRODUCTION
==================================================*/

.page-header__intro
{
    opacity: 0;
    transform: translateY(15px);
    animation: page-header-intro .9s ease .25s forwards;
}

@keyframes page-header-intro
{
    from
    {
        opacity: 0;
        transform: translateY(15px);
    }

    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}