/* Match the cover/about easing without competing with card filter transforms. */
html[data-motion="return-pending"] .projects-page .project-grid {
  visibility: hidden;
}
html[data-motion="pending"] .projects-page .site-header,
html[data-motion="pending"] .projects-page .project-filter,
html[data-motion="pending"] .projects-page .projects-page__footer {
  visibility: hidden;
}
.projects-motion-enabled:not(.projects-motion-images-only) .site-header {
  animation: projects-copy-in .75s cubic-bezier(.16, 1, .3, 1) 80ms both;
}
.projects-motion-enabled:not(.projects-motion-images-only) .filter-button {
  animation: projects-copy-in .85s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--project-motion-delay, 180ms);
}
.projects-motion-enabled:not(.projects-motion-images-only) .projects-page__footer > span {
  animation: projects-copy-in .75s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--project-motion-delay, 680ms);
}
.projects-motion-enabled .project-card {
  background: transparent;
}
.projects-motion-enabled .project-card > .project-image {
  visibility: hidden;
  opacity: 1;
}
.projects-motion-enabled .project-card > .project-image.is-project-image-ready {
  visibility: visible;
}
/* Keep decoded pixels static. Animate a separate cover, not the image's
   opacity/clip/scale; the end of an animation cannot make the image disappear. */
.projects-motion-enabled .project-card:not(.is-project-image-settled)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  pointer-events: none;
  transform: translateY(0);
}
.projects-motion-enabled .project-card.is-project-image-ready:not(.is-project-image-settled)::after {
  transform: translateY(100%);
  animation: projects-mask-out 1.1s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: var(--project-motion-delay, 0ms);
}
@keyframes projects-copy-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes projects-mask-out {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .projects-motion-enabled .site-header,
  .projects-motion-enabled .filter-button,
  .projects-motion-enabled .projects-page__footer > span,
  .projects-motion-enabled .project-card > .project-image {
    animation: none !important;
    opacity: 1;
    transform: none;
    clip-path: none;
    visibility: visible;
  }
  .projects-motion-enabled .project-card::after { content: none; animation: none; }
}