.kinetic-char, .kinetic-glyph { display: inline-block; }
.kinetic-char { transform-origin: 50% 75%; }
.kinetic-glyph { transform-origin: 50% 100%; }
[data-kinetic-line] { white-space: nowrap; }
[data-kinetic] { perspective: 800px; }

.service-list > div { position: relative; isolation: isolate; }
.service-list > div::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: .7;
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .3s;
  pointer-events: none;
}
.service-list > div:hover::after { transform: scaleX(1); }
.service-list dt { transition: transform .4s cubic-bezier(.16,1,.3,1), color .25s; }
.service-list > div:hover dt { color: var(--text); transform: translateX(8px); }
.email-link { position: relative; }
.email-link::after {
  content: '';
  position: absolute;
  height: 1px;
  inset: auto 0 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.email-link:hover { text-decoration: none; }
.email-link:hover::after, .email-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.email-link svg { transition: transform .5s cubic-bezier(.16,1,.3,1), color .25s; }
.email-link:hover svg { transform: translate(6px,-6px); color: var(--accent); }

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .service-list > div:hover dt, .email-link:hover svg { transform: none; }
}
html[data-page-motion='paused'] .service-list dt,
html[data-page-motion='paused'] .email-link svg { transform: none; transition: none; }
html[data-page-motion='paused'] .service-list > div::after,
html[data-page-motion='paused'] .email-link::after { transition: none; }