/* Shared by the index and standalone articles. Native navigation keeps the
   wordmark continuous without routing an article through the index renderer. */
@view-transition{navigation:auto}

.mark{transform-origin:top left;view-transition-name:wordmark}
::view-transition-old(root){animation:page-out .16s ease both}
::view-transition-new(root){animation:page-in .28s ease both}
::view-transition-group(wordmark){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.72,.25,1)}
/* No cross-fade between the two wordmarks. They are the same words at two
   sizes, so fading one into the other shows a brief double image; letting the
   group's transform carry it alone reads as one object moving. */
::view-transition-old(wordmark){animation:none;opacity:0}
::view-transition-new(wordmark){animation:none;opacity:1}

/* A morph needs somewhere to start. The index wordmark sits in a header that
   scrolls away, and a snapshot is clipped to the viewport, so once it is gone
   the group has an empty origin and the transition half-happens. Dropping the
   name then is the difference between no animation and a broken one. */
.mark[data-vt="off"]{view-transition-name:none}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}}

/* The generic artifact renderer still uses this same-document fallback. */
.mark-transitioning{animation:wordmark-move .42s cubic-bezier(.2,.72,.25,1) both}
@keyframes wordmark-move{
  from{transform:translate(var(--mark-x),var(--mark-y)) scale(var(--mark-scale))}
  to{transform:translate(0,0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .mark-transitioning{animation:none!important}
}