:root {
  --motion-ink: #11120f;
  --motion-paper: #f4f2ec;
  --motion-accent: #a63d2d;
  --motion-ease: cubic-bezier(0.72, 0, 0.17, 1);
}

html.motion-pending::before,
.case-transition-cover {
  position: fixed;
  z-index: 10001;
  inset: 0;
  background: #fff;
  pointer-events: none;
}

html.motion-pending::before {
  content: "";
  background-image: var(--case-transition-image, none);
  background-size: cover;
  background-position: center;
}

.case-transition-cover {
  overflow: hidden;
  pointer-events: auto;
}

.case-transition-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

html.motion-enabled:not(.motion-reduced) [data-motion-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 560ms ease,
    transform 680ms var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-enabled:not(.motion-reduced) [data-motion-reveal].is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-enabled:not(.motion-reduced) .reveal.is-motion-visible,
html.motion-enabled:not(.motion-reduced) .reveal-block.is-motion-visible {
  opacity: 1;
  transform: none;
}

html.motion-enabled:not(.motion-reduced) .project-index-card[data-motion-reveal] {
  transform: translate3d(0, 28px, 0);
}

html.motion-enabled:not(.motion-reduced) .project-index-card[data-motion-reveal].is-motion-visible {
  transform: translate3d(0, 0, 0);
}

[data-motion-index] {
  overflow: hidden;
}

html.motion-enabled:not(.motion-reduced) [data-motion-index] {
  color: transparent;
}

html.motion-enabled:not(.motion-reduced) [data-motion-index]::after {
  display: grid;
  min-width: inherit;
  height: 100%;
  place-items: center;
  color: var(--motion-ink);
  content: attr(data-motion-index);
  transform: translate3d(0, 105%, 0);
  transition: transform 620ms var(--motion-ease);
  transition-delay: calc(var(--motion-delay, 0ms) + 120ms);
}

html.motion-enabled:not(.motion-reduced) .is-motion-visible [data-motion-index]::after {
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-index-card {
    perspective: 1000px;
  }

  .project-index-card > a {
    transform-style: preserve-3d;
    transform: rotateX(var(--card-rotate-x, 0deg)) rotateY(var(--card-rotate-y, 0deg)) scale(1);
    transition: transform 300ms ease-out;
  }

  .project-index-card > a.is-tilting {
    transform: rotateX(var(--card-rotate-x, 0deg)) rotateY(var(--card-rotate-y, 0deg)) scale(1.02);
  }

  .project-index-card .project-index-media,
  .project-index-card .project-index-copy,
  .project-index-card .project-index-role {
    transition: transform 300ms ease-out, box-shadow 300ms ease-out;
  }

  .project-index-card .is-tilting .project-index-media {
    transform: translateZ(35px);
    box-shadow: 0 20px 36px -20px rgba(0, 0, 0, 0.3);
  }

  .project-index-card .is-tilting .project-index-copy {
    transform: translateZ(20px);
  }

  .project-index-card .is-tilting .project-index-role {
    transform: translateZ(10px);
  }
}

@media (hover: none) and (prefers-reduced-motion: no-preference),
  (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .project-index-card > a {
    transform-origin: center center;
    transition: transform 360ms var(--motion-ease);
  }

  .project-index-card .project-index-media,
  .project-index-card .project-index-media img,
  .project-index-card .project-index-copy {
    transition: transform 520ms var(--motion-ease), box-shadow 360ms ease, filter 360ms ease, border-color 360ms ease;
  }

  .project-index-card.is-touch-focused > a {
    transform: translateY(-4px) scale(1.008);
  }

  .project-index-card.is-touch-focused .project-index-media {
    box-shadow: 0 22px 42px -28px rgba(0, 0, 0, .34);
  }

  .project-index-card.is-touch-focused .project-index-media img {
    filter: saturate(1.04) contrast(1.015);
    transform: none;
  }

  .project-index-card > a:active {
    transform: scale(.985);
    transition-duration: 90ms;
  }

  .resume-tail-document:active,
  a.personal-practice-link:active {
    transform: scale(.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-pending::before,
  .case-transition-cover {
    display: none !important;
  }

  [data-motion-reveal],
  .reveal,
  .reveal-block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}