/* Icon rolls upward inside its existing carrier; the button never moves. */
.arrow-motion:not(.arrow-motion-svg) {
  line-height: 1;
}
.inline-arrow {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.has-arrow-motion .arrow-motion .arrow-motion-window {
  display: block;
  position: relative;
  overflow: hidden;
  width: 1em;
  height: 1em;
  line-height: 1;
  transform: none;
  translate: none;
}
.has-arrow-motion .arrow-motion-svg .arrow-motion-window {
  width: 100%;
  height: 100%;
}
.has-arrow-motion .arrow-motion .arrow-motion-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200%;
  transform: translateY(0);
  translate: none;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: auto;
}
.has-arrow-motion .arrow-motion .arrow-motion-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50%;
  width: 100%;
  height: 50%;
  font-size: inherit;
  line-height: 1;
  transform: none;
  translate: none;
}
.has-arrow-motion .arrow-motion svg.arrow-motion-glyph {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
}
.has-arrow-motion:focus-visible .arrow-motion .arrow-motion-track {
  transform: translateY(-50%);
}
/* Replace earlier lateral nudges; selection/expansion rotations are retained. */
.service-link:is(:hover, :focus-visible) > .arrow-motion,
.text-link:is(:hover, :focus-visible) .arrow-motion,
.footer-conversation:is(:hover, :focus-visible) > .arrow-motion,
.footer-back-top:is(:hover, :focus-visible) > .arrow-motion,
.journal-card h3 > a:is(:hover, :focus-visible) > .arrow-motion {
  transform: none;
  translate: none;
}

/* Each letter rolls to an identical copy, creating a short staggered wave. */
.has-nav-roll .nav-roll-label {
  display: inline-flex;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  line-height: 1.5;
  white-space: pre;
  perspective: 400px;
}
.has-nav-roll .nav-roll-char {
  display: inline-grid;
  position: relative;
  flex: none;
  transform-style: preserve-3d;
}
.has-nav-roll .nav-roll-char > span {
  grid-area: 1/1;
  display: block;
  backface-visibility: hidden;
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--letter-delay, 0ms);
}
.has-nav-roll .nav-roll-front {
  transform: translateY(0) rotateX(0);
}
.has-nav-roll .nav-roll-back {
  transform: translateY(110%) rotateX(-65deg);
}
.has-nav-roll:focus-visible .nav-roll-front {
  transform: translateY(-110%) rotateX(65deg);
}
.has-nav-roll:focus-visible .nav-roll-back {
  transform: translateY(0) rotateX(0);
}
.footer-conversation > .nav-roll-label,
.footer-back-top > .nav-roll-label {
  font-size: inherit;
  transform: none;
  translate: none;
}
.footer-back-top > .nav-roll-label {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  display: inline-flex;
}
.footer-conversation:is(:hover, :focus-visible) > .nav-roll-label,
.footer-back-top:is(:hover, :focus-visible) > .nav-roll-label {
  transform: none;
  translate: none;
}
@media (hover: hover) and (pointer: fine) {
  .has-arrow-motion:hover .arrow-motion .arrow-motion-track {
    transform: translateY(-50%);
  }
  .has-nav-roll:hover .nav-roll-front {
    transform: translateY(-110%) rotateX(65deg);
  }
  .has-nav-roll:hover .nav-roll-back {
    transform: translateY(0) rotateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-arrow-motion .arrow-motion .arrow-motion-track,
  .has-nav-roll .nav-roll-char > .nav-roll-front {
    transform: none !important;
    transition: none !important;
  }
  .has-nav-roll .nav-roll-char > .nav-roll-back {
    visibility: hidden;
    transition: none !important;
  }
  .has-arrow-motion .arrow-motion .arrow-motion-glyph + * {
    visibility: hidden;
  }
}