/* ==========================================================
   CENTURION
   ANIMATIONS
   ========================================================== */

@keyframes helmet-float{

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

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

}

@keyframes scroll-bounce{

    0%,100%{ transform:translate(-50%,0); }

    50%{ transform:translate(-50%,8px); }

}

@keyframes fade-up{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

[data-observe]{

    opacity:0;

    transform:translateY(24px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

[data-observe].is-visible{

    opacity:1;

    transform:translateY(0);

}

[data-observe][data-delay="1"].is-visible{ transition-delay:.1s; }

[data-observe][data-delay="2"].is-visible{ transition-delay:.2s; }

[data-observe][data-delay="3"].is-visible{ transition-delay:.3s; }

[data-observe][data-delay="4"].is-visible{ transition-delay:.4s; }

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

.hero__content > *{

    animation:fade-up .8s ease both;

}

.hero__content > *:nth-child(2){ animation-delay:.1s; }

.hero__content > *:nth-child(3){ animation-delay:.2s; }

.hero__content > *:nth-child(4){ animation-delay:.3s; }

.hero__content > *:nth-child(5){ animation-delay:.4s; }

.hero__visual{

    animation:fade-up 1s ease .3s both;

}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

    [data-observe]{

        opacity:1;

        transform:none;

    }

}