/* Real pages retain browser history, with the content sliding beneath a steady masthead. */
@view-transition { navigation: auto; }
:root { --page-enter-x: 32px; --page-exit-x: -20px; }
:root[data-page-direction="backward"] { --page-enter-x: -32px; --page-exit-x: 20px; }
.site-header { view-transition-name: eons-header; }
#main-content { view-transition-name: eons-content; }
.page-arrived .hero-copy, .page-arrived .hero-art { animation: none; }
::view-transition-group(root),
::view-transition-group(eons-header) { animation: none; }
::view-transition-old(root),
::view-transition-old(eons-header) { animation: none; opacity: 0; }
::view-transition-new(root),
::view-transition-new(eons-header) { animation: none; }
::view-transition-group(eons-content) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-image-pair(eons-content) { isolation: isolate; }
::view-transition-old(eons-content) { animation: eons-page-out 120ms ease-out both; mix-blend-mode: normal; }
::view-transition-new(eons-content) { animation: eons-page-in 380ms 80ms cubic-bezier(.22,1,.36,1) both; mix-blend-mode: normal; }
@keyframes eons-page-out { to { opacity: 0; transform: translateX(var(--page-exit-x)); } }
@keyframes eons-page-in { from { opacity: 0; transform: translateX(var(--page-enter-x)); } to { opacity: 1; transform: translateX(0); } }
.desktop-nav a { padding-block: 12px; }
.desktop-nav .active::after { width: 16px; height: 3px; border-radius: 3px; left: calc(50% - 8px); bottom: 1px; }
.mobile-nav a { min-height: 44px; }
.mobile-nav .active { color: var(--orange-dark); }
.mobile-nav:not([hidden]) { animation: menu-reveal 220ms cubic-bezier(.22,1,.36,1) both; }
@keyframes menu-reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.header-actions .language-button { min-height: 44px; }
.motion-paused { scroll-behavior: auto; }
.motion-paused .mobile-nav:not([hidden]),
.motion-paused .faq-item[open] .faq-answer,
.motion-paused .demo-stamp.just-stamped { animation: none; }
.motion-paused::view-transition-group(*),
.motion-paused::view-transition-old(*),
.motion-paused::view-transition-new(*) { animation: none !important; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .mobile-nav:not([hidden]) { animation: none; }
}