.hero {
    background-image: linear-gradient(var(--color-lighter), var(--color-off-white));
}

.hero header {
    overflow: hidden;
}

.hero-heading {
    color: var(--color-light);
    text-align: center;

    margin-left: -200%;
    opacity: 0;
    animation: 1.2s slideRight 1 forwards;
}

.hero-subheading {
    margin-top: var(--spacing-sm);
    font-weight: bold;
    color: var(--color-dark);
    text-align: center;

    margin-right: -150%;
    opacity: 0;
    animation: 1.2s slideLeft 1 forwards;
}

.hero-ctas {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.hero-ctas button {
    margin: 0 4px;
    position: relative;

    bottom: -64px;
    opacity: 0;
    animation: .8s slideUp 1.2s 1 forwards;
}

@keyframes slideRight {
    from {
        margin-left: -200%;
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    to {
        margin-left: 0;
        opacity: 1;
    }
}

@keyframes textLeft {
    from {
        right: -100%;
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    to {
        right: 0;
        opacity: 1;
    }
}

@keyframes slideLeft {
    from {
        margin-right: -150%;
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    to {
        margin-right: 0;
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        bottom: -64px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}