/* headings */

@keyframes heading-reveal {
    from {
        transform: translateY(2.5rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


.heading-animated.animated span {
    display: inline-block;
    transform: translateY(2.5rem);
    opacity: 0;
    animation-name: heading-reveal;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
}

/* text */

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(10rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.text-animated {
    opacity: 0;
    transform: translateY(10rem);
}

.text-animated a {
    color: var(--color-white);
    text-decoration: underline;
    color: inherit !important;

}

.navbar-group a.c-primary  {
    color: var(--color-primary);
}
.text-animated.c-dark a,
.c-dark a {
    color: var(--color-dark);
}
.c-dark a {
    color: var(--color-dark);
}
.text-animated.animated {
    animation-name: slide-in;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/* images */

@keyframes image-reveal {
    from {
        clip-path: polygon(100% 100%, 100% 100%, 0 100%, 0 100%);
    }
    to {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0 );
    }
}

.image-animated {
    width: 50%;
    clip-path: polygon(100% 100%, 0 100%, 100% 100%, 0 100%);
}
.image-animated.animated {
    animation-name: image-reveal;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

/* cards */

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.card-animated {
    opacity: 0;
}

.card-animated.animated {
    -webkit-animation-name: fade-in;
    animation-name: fade-in;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

/* member */

@keyframes image-reveal-member {
    from {
        object-position: 0% 20rem;
    }
    to {
        object-position: 0% 0rem;
    }
}

.image-animated-member.animated {
    animation-name: image-reveal-member;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}