/* ===================================
   ARTICLE PAGE ANIMATIONS
=================================== */

/* ===================================
   BLOG HERO
=================================== */

/* Hidden by default */

.blog-hero .back-link,
.blog-hero .category,
.blog-hero h1,
.blog-hero .blog-meta {
  opacity: 0;
}

/* Back link */

.blog-hero.animate .back-link {
  animation: fade-in 0.8s ease 0.1s both;
}

/* Category */

.blog-hero.animate .category {
  animation: slide-in-bottom 0.8s ease 0.2s both;
}

/* Main heading */

.blog-hero.animate h1 {
  animation: slide-in-left 1s ease 0.35s both;
}

/* Meta */

.blog-hero.animate .blog-meta {
  animation: fade-in 0.8s ease 0.6s both;
}

/* ===================================
   BLOG COVER
=================================== */

.blog-cover img {
  opacity: 0;
}

.blog-cover.animate img {
  animation: fade-in 1s ease 0.2s both;
}

/* ===================================
   ARTICLE CONTENT
=================================== */

/* Hidden by default */

.blog-content .lead,
.blog-content h2,
.blog-content p,
.blog-content blockquote,
.blog-content .content-image {
  opacity: 0;
}

/* Lead paragraph */

.blog-content.animate .lead {
  animation: fade-in 0.9s ease 0.1s both;
}

/* Article headings */

.blog-content.animate h2 {
  animation: slide-in-bottom 0.8s ease both;
}

/* Paragraphs */

.blog-content.animate p {
  animation: fade-in 0.8s ease both;
}

/* Blockquotes */

.blog-content.animate blockquote {
  animation: slide-in-left 0.8s ease both;
}

/* Article images */

.blog-content.animate .content-image {
  animation: fade-in 0.9s ease both;
}

/* ===================================
   ARTICLE CONTENT STAGGERING
=================================== */

/* Headings */

.blog-content.animate h2:nth-of-type(1) {
  animation-delay: 0.15s;
}

.blog-content.animate h2:nth-of-type(2) {
  animation-delay: 0.3s;
}

.blog-content.animate h2:nth-of-type(3) {
  animation-delay: 0.45s;
}

.blog-content.animate h2:nth-of-type(4) {
  animation-delay: 0.6s;
}

.blog-content.animate h2:nth-of-type(5) {
  animation-delay: 0.75s;
}

.blog-content.animate h2:nth-of-type(6) {
  animation-delay: 0.9s;
}

.blog-content.animate h2:nth-of-type(7) {
  animation-delay: 1.05s;
}

.blog-content.animate h2:nth-of-type(8) {
  animation-delay: 1.2s;
}

/* Paragraphs */

.blog-content.animate p:nth-of-type(1) {
  animation-delay: 0.2s;
}

.blog-content.animate p:nth-of-type(2) {
  animation-delay: 0.3s;
}

.blog-content.animate p:nth-of-type(3) {
  animation-delay: 0.4s;
}

.blog-content.animate p:nth-of-type(4) {
  animation-delay: 0.5s;
}

.blog-content.animate p:nth-of-type(5) {
  animation-delay: 0.6s;
}

.blog-content.animate p:nth-of-type(6) {
  animation-delay: 0.7s;
}

.blog-content.animate p:nth-of-type(7) {
  animation-delay: 0.8s;
}

.blog-content.animate p:nth-of-type(8) {
  animation-delay: 0.9s;
}

.blog-content.animate p:nth-of-type(9) {
  animation-delay: 1s;
}

.blog-content.animate p:nth-of-type(10) {
  animation-delay: 1.1s;
}

.blog-content.animate p:nth-of-type(11) {
  animation-delay: 1.2s;
}

.blog-content.animate p:nth-of-type(12) {
  animation-delay: 1.3s;
}

/* ===================================
   RELATED ARTICLES
=================================== */

.related-posts .heading .small-title,
.related-posts .heading h2,
.related-card {
  opacity: 0;
}

/* Section heading */

.related-posts.animate .heading .small-title {
  animation: slide-in-bottom 0.8s ease both;
}

.related-posts.animate .heading h2 {
  animation: slide-in-bottom 0.8s ease 0.15s both;
}

/* Related cards */

.related-posts.animate .related-card:nth-child(1) {
  animation: slide-in-bottom 0.8s ease 0.25s both;
}

.related-posts.animate .related-card:nth-child(2) {
  animation: slide-in-bottom 0.8s ease 0.4s both;
}

.related-posts.animate .related-card:nth-child(3) {
  animation: slide-in-bottom 0.8s ease 0.55s both;
}

/* ===================================
   FOOTER
=================================== */

footer h3,
footer p,
footer small {
  opacity: 0;
}

footer.animate h3 {
  animation: slide-in-bottom 0.8s ease both;
}

footer.animate p {
  animation: fade-in 0.8s ease 0.2s both;
}

footer.animate small {
  animation: slide-in-bottom 0.8s ease 0.4s both;
}

/* ===================================
   KEYFRAMES
=================================== */

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

  to {
    opacity: 1;
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

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

@keyframes slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

/* ===================================
   ACCESSIBILITY
=================================== */

@media (prefers-reduced-motion: reduce) {
  .blog-hero .back-link,
  .blog-hero .category,
  .blog-hero h1,
  .blog-hero .blog-meta,
  .blog-cover img,
  .blog-content .lead,
  .blog-content h2,
  .blog-content p,
  .blog-content blockquote,
  .blog-content .content-image,
  .related-posts .heading .small-title,
  .related-posts .heading h2,
  .related-card,
  footer h3,
  footer p,
  footer small {
    opacity: 1;
    transform: none;
    animation: none;
  }
}