/* A persistent pale rule fills from left to right on hover or keyboard focus. */
.orb-link { position:relative; white-space:nowrap; text-decoration:none; }
.orb-link::before, .orb-link::after { content:''; position:absolute; left:0; right:0; bottom:-.3em; height:1px; pointer-events:none; }
.orb-link::before { background:var(--color-line); }
.orb-link::after { background:var(--link-underline-color,var(--color-ink)); transform:scaleX(0); transform-origin:left center; transition:transform 420ms var(--ease-smooth); }
.orb-link:is(:hover,:focus-visible)::after { transform:scaleX(1); }
.reveal-title { opacity: 0; transform: translateY(20px); transition: opacity 720ms ease, transform 720ms var(--ease-smooth); }
.reveal-title.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .web-carousel { animation: none; }
  .reveal-title { opacity: 1; transform: none; transition: none; }
  .project-media__inner, .project-navigation__link, .orb-link::after, .close-project { transition: none; }
}

.motion-paused .web-carousel, .web-carousel:focus-within { animation-play-state:paused; }

/* Footer hover rules use a white accent against the dark background. */
.contact { --link-underline-color:#ffffff; }