:is(#primary-nav, .case-role-link) .nav-roll { display: block; position: relative; overflow: hidden; }
:is(#primary-nav, .case-role-link) .nav-roll > span { display: block; }
:is(#primary-nav, .case-role-link) .nav-roll > span + span { position: absolute; inset: 100% 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  :is(#primary-nav, .case-role-link) .nav-roll > span { transition: transform .32s cubic-bezier(.22,1,.36,1); }
  :is(#primary-nav :is(a, summary), .case-role-link):is(:hover, :focus-visible) .nav-roll > span { transform: translateY(-100%); }
}

.case-role-link { display: inline-block; }

.hasel-intro a:has(> .nav-roll) { display: inline-flex; align-items: center; gap: .25em; }
.hasel-intro a > .nav-roll { display: block; position: relative; overflow: hidden; }
.hasel-intro a > .nav-roll > span { display: block; }
.hasel-intro a > .nav-roll > span + span { position: absolute; inset: 100% 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .hasel-intro a > .nav-roll > span { transition: transform .32s cubic-bezier(.22,1,.36,1); }
  .hasel-intro a:is(:hover, :focus-visible) > .nav-roll > span { transform: translateY(-100%); }
}