/* Keep entry fades on opacity: transforms here would reposition fixed dialogs. */
@keyframes page-enter{from{opacity:0}to{opacity:1}}
@keyframes menu-item-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes menu-enter{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
body:not(.auth-pending)>main:not([data-route-view])> :not(dialog){animation:page-enter 260ms ease-out backwards;animation-delay:calc(var(--entry-order,0)*40ms)}
body:not(.auth-pending)>main:not([data-route-view])> :nth-child(2){--entry-order:1}
body:not(.auth-pending)>main:not([data-route-view])> :nth-child(3){--entry-order:2}
body:not(.auth-pending)>main:not([data-route-view])> :nth-child(4){--entry-order:3}
body:not(.auth-pending)>main:not([data-route-view])> :nth-child(n+5){--entry-order:4}

.nav-dropdown[open][data-menu-revealing]>.nav-arena-panel,
.nav-dropdown[open][data-menu-revealing]>.nav-mega-panel{animation:menu-enter 150ms ease-out;transform-origin:top center}
.nav-dropdown[open][data-menu-revealing] [data-menu-entry]{animation:menu-item-enter 220ms ease-out backwards;animation-delay:calc(20ms + var(--menu-order,0)*18ms)}
.nav-dropdown [data-menu-entry]:focus-visible{animation:none!important}
.nav-dropdown summary{transition:color 160ms ease,border-color 160ms ease}
.nav-dropdown summary::after{transition:transform 180ms ease}
.nav-dropdown[open] summary::after{transform:rotate(225deg)}
.portal-header .portal-main-nav :is(.nav-arena-panel,.nav-mega-panel) a{transition:background-color 160ms ease,color 160ms ease,opacity 160ms ease}
.portal-header .nav-actions :is(a,button),.demo-header a{transition:color 160ms ease,opacity 160ms ease}

:is(.portal-body,.demo-page) a:is(.arrangement-card,.grade-card,.audience-card,.pedagogy-card,.session-card,.demo-card){transition:translate 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
:is(.portal-button,.demo-button,.ws-button,.import-button,.play-button,.square-button,.all-button,.round-link){transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}

@media(hover:hover) and (pointer:fine){
 :is(.portal-body,.demo-page) a:is(.arrangement-card,.grade-card,.audience-card,.pedagogy-card,.session-card,.demo-card):hover{opacity:1;translate:0 -3px;box-shadow:0 8px 22px #40302612;border-color:#b8a797}
 :is(.portal-button,.demo-button,.ws-button,.import-button,.play-button,.square-button,.all-button,.round-link):not(:disabled):hover{box-shadow:0 3px 10px #4030261a}
 .portal-header .nav-actions :is(a,button):hover{color:#513927}
}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 :is(.portal-body,.demo-page) a:is(.arrangement-card,.grade-card,.audience-card,.pedagogy-card,.session-card,.demo-card):hover{translate:none}
}
@media print{*,*::before,*::after{animation:none!important;transition:none!important}}