@view-transition { navigation: auto; }
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
body:not(.reader-page) #main { view-transition-name: site-content; }
::view-transition-old(root) { animation: site-fade-out 160ms ease both; }
::view-transition-new(root) { animation: site-fade-in 320ms ease both; }
::view-transition-old(site-content) { animation: site-fade-out 140ms ease both; }
::view-transition-new(site-content) { animation: site-content-in 420ms var(--motion-ease) both; }
::view-transition-group(*) { animation-timing-function: var(--motion-ease); }
@keyframes site-fade-out { to { opacity: 0; } }
@keyframes site-fade-in { from { opacity: 0; } }
@keyframes site-content-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html:has(body:not(.reader-page)) { scroll-behavior: smooth; }
body :is(.sidebar-nav,.journal-navigation,.top-main-nav,.readx-main-nav,.new-brand-navigation,.mobile-nav,.detail-tabs,.account-sections,.store-tabs,.social-tabs,.library-status-tabs,.library-activity-tabs,.library-view-switch) :is(a,button) {
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
body .detail-tabs a { position: relative; padding-block: 7px; }
body .detail-tabs a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--motion-ease); }
body .detail-tabs a:is(:hover,:focus-visible,[data-motion-current])::after { transform: scaleX(1); }
body :is(.detail-tabs,.journal-navigation,.top-main-nav,.readx-main-nav,.new-brand-navigation) a[data-motion-current] { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html:has(body) { scroll-behavior: auto !important; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none !important; }
  body .detail-tabs a::after { transition: none; }
}
