/* Restrained opening, reading and navigation continuity. */
.hero-copy h1.hero-thesis > span > .hero-word {
  display: inline-block;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  margin: 0;
  padding: 0;
}
.site-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--solid-orange);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  pointer-events: none;
}
.work-entry h3 { position: relative; }
.work-entry h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 1px;
  width: 100%;
  background: var(--solid-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1);
}
.work-entry:hover h3::after, .work-entry:focus-within h3::after { transform: scaleX(1); }
.work-entry:focus-within .text-link::after { transform: translateX(5px); }
.button:active { transform: scale(.98); }

/* Progressive cross-document transitions. No intercepted links or waits.
   Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: page-exit 180ms ease-in both; }
::view-transition-new(root) { animation: page-enter 360ms cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
@keyframes page-exit { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-enter { from { opacity: 0; clip-path: inset(3% 0 0 0); transform: translateY(14px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .work-entry h3::after { transition: none; }
  .button:active { transform: none; }
}
html:has(body[data-motion="reduced"])::view-transition-old(root),
html:has(body[data-motion="reduced"])::view-transition-new(root) { animation: none; }
body[data-motion="reduced"] .work-entry h3::after { transition: none; }
body[data-motion="reduced"] .button:active { transform: none; }
body[data-motion="reduced"] .home-cat-easter-egg .pet-image-frame,
body[data-motion="reduced"] .home-cat-easter-egg .pet-image-frame img { animation: none; }
@media print { .site-header::after { display: none; } }