/* Progressive motion: the unenhanced page remains the source of every word. */
#name.motion-name .name-line {
  animation: none !important;
  transform-style: preserve-3d;
  translate: var(--motion-name-x, 0px) var(--motion-name-y, 0px);
  rotate: var(--motion-name-rotate, 0deg);
}

#name.motion-name .name-last {
  translate: calc(var(--motion-name-x, 0px) * -.65) calc(var(--motion-name-y, 0px) * .6);
  rotate: calc(var(--motion-name-rotate, 0deg) * -.6);
}

#name.motion-name .name-mask {
  perspective: 1100px;
  overflow: visible;
}

#name .motion-letter {
  display: inline-block;
  transform-origin: 50% 80%;
  backface-visibility: hidden;
}

.motion-metric {
  display: inline-block;
  perspective: 750px;
}

.motion-metric .motion-digit {
  display: inline-block;
  transform-origin: 50% 68%;
  backface-visibility: hidden;
}

@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  .projects-section.motion-spotlight {
    position: relative;
    isolation: isolate;
  }

  .projects-section.motion-spotlight::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      ellipse 620px 520px at var(--motion-spot-x, 50%) var(--motion-spot-y, 50%),
      rgb(255 151 83 / 24%),
      rgb(132 192 255 / 11%) 38%,
      transparent 68%
    );
    transition: opacity .7s ease;
  }

  .projects-section.motion-spotlight.motion-pointer-over::before {
    opacity: 1;
  }

  .projects-section.motion-spotlight > .projects-layout {
    position: relative;
    z-index: 1;
  }

  .motion-spotlight .project-story h3 {
    transition: color .45s ease;
  }

  .motion-spotlight .project-story:hover h3 {
    color: #ffd2aa;
  }
}

@media (prefers-reduced-motion: reduce) {
  #name.motion-name .name-line {
    translate: none !important;
    rotate: none !important;
  }

  #name .motion-letter,
  .motion-metric .motion-digit {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .projects-section.motion-spotlight::before {
    content: none;
  }
}