:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-snap: cubic-bezier(0.2, 0.85, 0.22, 1);
  --section-distance: 42px;
  --card-distance: 28px;
}

.reveal,
.textReveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, var(--section-distance), 0);
  transition:
    opacity 760ms var(--motion-ease),
    transform 820ms var(--motion-ease);
  will-change: opacity, transform;
}

html.motion-ready .reveal.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

html.motion-ready #extraInfo #aboutMe-images,
html.motion-ready #skills h2,
html.motion-ready #skills .wrapper,
html.motion-ready #projectSection .projectPost,
html.motion-ready #experienceSection h2,
html.motion-ready #experienceSection .timelineItem,
html.motion-ready #blogSection h2,
html.motion-ready #blogSection .blogCard,
html.motion-ready #contactMe h2,
html.motion-ready #contactMe #contactContainer {
  opacity: 0;
  transition:
    opacity 700ms var(--motion-ease),
    transform 780ms var(--motion-ease);
  will-change: opacity, transform;
}

html.motion-ready #skills h2,
html.motion-ready #experienceSection h2,
html.motion-ready #blogSection h2,
html.motion-ready #contactMe h2 {
  transform: translate3d(-24px, 12px, 0);
}

html.motion-ready #extraInfo #aboutMe-images {
  transform: translate3d(24px, 12px, 0);
}

html.motion-ready #skills .wrapper,
html.motion-ready #blogSection .blogCard,
html.motion-ready #contactMe #contactContainer {
  transform: translate3d(0, var(--card-distance), 0);
}

html.motion-ready #projectSection .projectPost:nth-child(odd) {
  transform: translate3d(-24px, var(--card-distance), 0);
}

html.motion-ready #projectSection .projectPost:nth-child(even) {
  transform: translate3d(24px, var(--card-distance), 0);
}

html.motion-ready #experienceSection .timelineItem:nth-child(odd) {
  transform: translate3d(-24px, 20px, 0);
}

html.motion-ready #experienceSection .timelineItem:nth-child(even) {
  transform: translate3d(24px, 20px, 0);
}

html.motion-ready #extraInfo.active #aboutMe-images,
html.motion-ready #skills.active h2,
html.motion-ready #skills.active .wrapper,
html.motion-ready #projectSection.active .projectPost,
html.motion-ready #experienceSection.active h2,
html.motion-ready #experienceSection.active .timelineItem,
html.motion-ready #blogSection.active h2,
html.motion-ready #blogSection.active .blogCard,
html.motion-ready #contactMe.active h2,
html.motion-ready #contactMe.active #contactContainer {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

html.motion-ready #extraInfo.active #aboutMe-images,
html.motion-ready #skills.active .wrapper,
html.motion-ready #blogSection.active .blogCard,
html.motion-ready #contactMe.active #contactContainer {
  transition-delay: 180ms;
}

html.motion-ready #projectSection.active .projectPost:nth-child(1),
html.motion-ready #experienceSection.active .timelineItem:nth-child(1) {
  transition-delay: 0ms;
}

html.motion-ready #projectSection.active .projectPost:nth-child(2),
html.motion-ready #experienceSection.active .timelineItem:nth-child(2) {
  transition-delay: 90ms;
}

html.motion-ready #projectSection.active .projectPost:nth-child(3),
html.motion-ready #experienceSection.active .timelineItem:nth-child(3) {
  transition-delay: 180ms;
}

html.motion-ready #projectSection.active .projectPost:nth-child(4),
html.motion-ready #experienceSection.active .timelineItem:nth-child(4) {
  transition-delay: 270ms;
}

html.motion-ready #projectSection.active .projectPost:nth-child(5),
html.motion-ready #experienceSection.active .timelineItem:nth-child(5) {
  transition-delay: 360ms;
}

html.motion-ready #projectSection .left picture,
html.motion-ready #aboutMe-imageGrid img,
html.motion-ready #aboutMe-imageGrid video,
html.motion-ready .jobPic {
  transform: scale(1.025);
  transition: transform 900ms var(--motion-snap);
}

html.motion-ready #projectSection.active .left picture,
html.motion-ready #extraInfo.active #aboutMe-imageGrid img,
html.motion-ready #extraInfo.active #aboutMe-imageGrid video,
html.motion-ready #experienceSection.active .jobPic {
  transform: scale(1);
}

@media screen and (max-width: 700px) {
  :root {
    --section-distance: 28px;
    --card-distance: 22px;
  }

  html.motion-ready #projectSection .projectPost:nth-child(odd),
  html.motion-ready #projectSection .projectPost:nth-child(even),
  html.motion-ready #experienceSection .timelineItem:nth-child(odd),
  html.motion-ready #experienceSection .timelineItem:nth-child(even) {
    transform: translate3d(0, var(--card-distance), 0);
  }

  html.motion-ready #projectSection.active .projectPost,
  html.motion-ready #experienceSection.active .timelineItem {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  html.motion-ready .reveal,
  html.about-text-ready #extraInfo .about-word,
  html.motion-ready #extraInfo #aboutMe-images,
  html.motion-ready #skills h2,
  html.motion-ready #skills .wrapper,
  html.motion-ready #projectSection .projectPost,
  html.motion-ready #experienceSection h2,
  html.motion-ready #experienceSection .timelineItem,
  html.motion-ready #blogSection h2,
  html.motion-ready #blogSection .blogCard,
  html.motion-ready #contactMe h2,
  html.motion-ready #contactMe #contactContainer,
  html.motion-ready #projectSection .left picture,
  html.motion-ready #aboutMe-imageGrid img,
  html.motion-ready #aboutMe-imageGrid video,
  html.motion-ready .jobPic {
    opacity: 1;
    clip-path: none;
    transform: none;
    filter: none;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.about-text-ready #extraInfo .about-word {
    opacity: 1 !important;
  }
}