/* ------------- SECTION TITLES ------------------- */

.page-header {
    text-align: center;
    margin: 0 0 3em 0;
    margin-bottom: 5em;
    margin-top: -2em;
}

.page-header h2 {
    color: #ffffff;
    font-size: 2.25em;
    margin-bottom: 0.75em;
    opacity: 1;
}

@media screen and (max-width: 736px) {
.page-header {
    text-align: center;
    margin: 0 0 3em 0;
    margin-bottom: 2em;
    margin-top: -2em;
}
    .page-header h2 {
        font-size: 1.75rem !important;
    }
}

/* Divider */
.page-header::after {
    content: "";
    display: block;
    width: 150px;
    height: 2px;
    margin: 0 auto;
    margin-bottom: 1em;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0),
        #ffffff3a,
        rgba(0,0,0,0)
    );
}

/* Title Animation */
.page-header h2 {
    animation: pageHeaderFade 0.8s ease-out;
}

/* Divider Animation */
.page-header::after {
    animation: dividerGrow 1s ease-out;
}

@keyframes pageHeaderFade {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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

@keyframes dividerGrow {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 150px;
        opacity: 1;
    }
}

/* ------------- PRESSPAWS PAW LOAD FIX ------------------- */

.paw-left {
    transform: translate(70px, 0px);
    animation-fill-mode: both;
    will-change: transform;
    backface-visibility: hidden;
}

.paw-right {
    transform: translate(-70px, 0px);
    animation-fill-mode: both;
    will-change: transform;
    backface-visibility: hidden;
}

/* ------------- PRESSPAWS PAW INTRO ANIMATION ------------------- */

.paw-left,
.paw-right {
    animation-fill-mode: both;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.paw-left {
    animation:
        pawIntroLeft 0.9s cubic-bezier(.22,1.2,.36,1) forwards,
        pawFloatLeft 8s ease-in-out infinite 0.9s;
}

.paw-right {
    animation:
        pawIntroRight 0.9s cubic-bezier(.22,1.2,.36,1) forwards,
        pawFloatRight 9s ease-in-out infinite 1.5s;
}

/* Left Paw */
@keyframes pawIntroLeft {
    0% {
        opacity: 0;
        transform: translate(70px, 0px) scale(0.05);
    }

    70% {
        opacity: 1;
        transform: translate(70px, 0px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translate(70px, 0px) scale(1);
    }
}

/* Right Paw */
@keyframes pawIntroRight {
    0% {
        opacity: 0;
        transform: translate(-70px, 0px) scale(0.05);
    }

    70% {
        opacity: 1;
        transform: translate(-70px, 0px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translate(-70px, 0px) scale(1);
    }
}

.press-text {
    animation: pressReveal 0.5s ease-out;
}

.paws-text {
    animation: pawsReveal 0.5s ease-out;
}

@keyframes pressReveal {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes pawsReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes pressReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    70% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes pawsReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    70% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* News Post Animation  */

/*
.article-list .excerpt {
    animation: newsPostFade 0.8s ease-out both;
} */

.article-list .excerpt:nth-child(1) {
    animation: newsPostFade 0.8s ease-out 0.1s both;
}

.article-list .excerpt:nth-child(2) {
    animation: newsPostFade 0.8s ease-out 0.3s both;
}

.article-list .excerpt:nth-child(3) {
    animation: newsPostFade 0.8s ease-out 0.5s both;
}

.article-list .excerpt:nth-child(4) {
    animation: newsPostFade 0.8s ease-out 0.7s both;
}

@keyframes newsPostFade {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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