/* Scroll-driven reveals keep their layout footprint and reverse on the way back. */
.scroll-row :is(.work-row-title,.work-row-number,.work-row-detail,.work-row-arrow) {
  translate:0 var(--row-reveal-y,0px); opacity:var(--row-reveal-opacity,1);
}
.scroll-item { translate:0 var(--item-reveal-y,0px); opacity:var(--item-reveal-opacity,1); overflow:visible; }

/* Hold the completed exit states until the dialog closes. Shorter label/scrim
   animations must not snap back while the sheet is still travelling. */
.motion-menu.is-closing .menu-sheet { transform:translateX(125%); --menu-bend:1; }
.motion-menu.is-closing :is(.menu-scrim,.menu-footnote,.menu-links a) { opacity:0; }

/* Surfaces and labels have distinct travel. In particular, a menu icon isn't
   glued to the circle, and contact text isn't glued to its pill. */
:is(.contact-email,.contact-phone,.menu-launch,.menu-dismiss,.social-name)>.magnet-label {
  display:block; position:relative; z-index:1; pointer-events:none;
}
.menu-links .magnet-label { display:block; }
.social-links>.social-name::after {
  content:''; position:absolute; inset:auto 0 7px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.social-links>.social-name:is(:hover,:focus-visible)::after { transform:scaleX(1); transform-origin:left; }

@media (prefers-reduced-motion:reduce) {
  .scroll-row :is(.work-row-title,.work-row-number,.work-row-detail,.work-row-arrow),.scroll-item { translate:none!important; opacity:1!important; }
  .social-links>.social-name::after { transition:none; }
}