/* One line shows the reading position and previews desktop navigation. */
@media (width > 1050px) {
  .topbar .navlinks.has-motion-mark {
    position: relative;
    --nav-mark-color: var(--acid, #d8ff4f);
  }
  .topbar[data-theme="light"] .navlinks.has-motion-mark {
    --nav-mark-color: var(--blue, #486cff);
  }
  .topbar .navlinks.has-motion-mark a::after { content: none; }
  .topbar .navlinks.has-motion-mark::after {
    content: "";
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: 2px;
    width: var(--nav-mark-width, 0px);
    border-top: 2px solid var(--nav-mark-color);
    transform: translateX(var(--nav-mark-x, 0px));
    opacity: 0;
  }
  .topbar .navlinks.mark-visible::after { opacity: 1; }
}

/* The same strokes form the menu and its close icon. */
@media (max-width: 1050px) {
  .topbar .menu-toggle[aria-expanded] .menu-icon {
    border: 0;
    background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  }
  .topbar .menu-toggle[aria-expanded] .menu-icon::before,
  .topbar .menu-toggle[aria-expanded] .menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - .5px);
    width: 100%;
    border-top: 1px solid currentColor;
    transform: translateY(-5px);
  }
  .topbar .menu-toggle[aria-expanded] .menu-icon::after { transform: translateY(5px); }
  .topbar .menu-toggle[aria-expanded="true"] .menu-icon { background-size: 0% 1px; }
  .topbar .menu-toggle[aria-expanded="true"] .menu-icon::before { transform: rotate(45deg); }
  .topbar .menu-toggle[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }
}

@media (width > 1050px) and (prefers-reduced-motion: no-preference) {
  .topbar .navlinks.has-motion-mark::after { transition: opacity 140ms ease; }
  .topbar .navlinks.mark-travels::after {
    transition: transform 250ms cubic-bezier(.2,.74,.26,1), width 250ms cubic-bezier(.2,.74,.26,1), opacity 140ms ease;
  }
}
@media (max-width: 1050px) and (prefers-reduced-motion: no-preference) {
  .topbar .menu-toggle[aria-expanded] .menu-icon { transition: background-size 160ms ease; }
  .topbar .menu-toggle[aria-expanded] .menu-icon::before,
  .topbar .menu-toggle[aria-expanded] .menu-icon::after { transition: transform 200ms cubic-bezier(.2,.74,.26,1); }
}