/* BETOOTH pixel motion. Every effect supports orientation, hierarchy or feedback. */
:root{
 --motion-instant:120ms;--motion-fast:120ms;--motion-normal:220ms;--motion-slow:360ms;--motion-stagger:0ms;
 --ease-enter:steps(4,end);--ease-premium:cubic-bezier(0.22,1,0.36,1);--ease-smooth:cubic-bezier(0.16,1,0.3,1);--ease-exit:cubic-bezier(0.4,0,0.7,0.2);
 --transition-fast:var(--motion-fast) var(--ease-premium);--transition-standard:var(--motion-normal) var(--ease-premium);--transition-slow:var(--motion-slow) var(--ease-premium);
}
html{scroll-behavior:smooth}
/* Orientation: immediately usable route, smooth fluid entrance. */
.motion-enabled #pageMount>.motion-route-enter{animation:betooth-route-enter var(--motion-fast) var(--ease-premium)}
@keyframes betooth-route-enter{from{opacity:.9;transform:translateY(2px)}to{opacity:1;transform:none}}
/* Hierarchy: one reveal with capped stagger; content stays readable and focusable. */
.motion-enabled .motion-reveal{opacity:.92;transform:translateY(2px);transition:opacity var(--motion-fast) var(--ease-premium),transform var(--motion-fast) var(--ease-premium);transition-delay:calc(var(--motion-order,0) * var(--motion-stagger))}
.motion-enabled .motion-reveal.motion-visible,.motion-enabled .motion-reveal:focus-within{opacity:1;transform:none;transition-delay:0ms}
/* Orientation: active rail moves independently in both navigation groups. */
.nav{position:relative;isolation:isolate}
.nav-motion-indicator{position:absolute;z-index:2;inset-inline-start:0;top:0;width:2px;height:var(--nav-indicator-height,44px);background:var(--betooth-orange);opacity:0;pointer-events:none;transform:translateY(var(--nav-indicator-y,0));transition:transform var(--transition-fast),opacity var(--transition-fast)}
.nav-motion-indicator.is-ready{opacity:1}
.nav-item{position:relative;z-index:1;transition:background-color var(--transition-fast),color var(--transition-fast)}
.nav-item .nav-icon,.action-arrow,.beto-cta-arrow{transition:transform var(--transition-fast)}
.app :is(.leaderboard-tabs,.profile-tabs,[role="tablist"]) :is(button,[role="tab"]){transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}
.app :is(.leaderboard-tabs,.profile-tabs,[role="tablist"]) :is(button,[role="tab"]):active{transform:translateY(1px);transition-duration:30ms}
.app :is(.profile-tab-panel,[role="tabpanel"]){transition:opacity var(--transition-fast)}
/* Feedback: tactile press, rich hover & smooth borders. */
.app :is(button,summary,.primary,.secondary,.ghost,.icon-btn,.button-link),body .pixel-dialog button{transition:transform var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}
.app :is(button,.primary,.secondary,.ghost,.icon-btn,.button-link):active:not(:disabled),body .pixel-dialog button:active:not(:disabled){transform:translateY(1.5px);transition-duration:30ms}
.app :is(input,textarea,select){transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
@media(hover:hover) and (pointer:fine){
 .app :is(button,.primary,.secondary,.button-link):hover:not(:disabled){transform:translateY(-1.5px)}
 .app .icon-btn:hover:not(:disabled){transform:scale(1.05)}
 .nav-item:hover .nav-icon,.home-feature:hover .action-arrow{transform:translateX(3px)}
 html[dir="rtl"] .nav-item:hover .nav-icon,html[dir="rtl"] .home-feature:hover .action-arrow{transform:translateX(-3px)}
 .app :is(.home-feature,.course-card,.mcq-bank-card,.notes-item,.store-product-card):hover{transform:translateY(-3px);border-color:var(--betooth-orange-line);box-shadow:var(--shadow-soft)}
 .app .mcq-option:hover:not(.correct):not(.incorrect){transform:translateX(3px);border-color:var(--betooth-orange-line)}
 html[dir="rtl"] .app .mcq-option:hover:not(.correct):not(.incorrect){transform:translateX(-3px)}
}
.app :is(.home-feature,.course-card,.mcq-bank-card,.notes-item,.store-product-card){transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}
.app :is(.home-feature,.course-card,.mcq-bank-card,.notes-item,.store-product-card):active{transform:translateY(0);transition-duration:30ms}
/* State change: native open/hidden behavior and focus stay authoritative. */
.motion-enabled :is(dialog[open],.account-dropdown:not([hidden]),.search-status.visible,.pixel-tooltip:not([hidden]),[popover]:popover-open){animation:betooth-popover-enter var(--motion-fast) var(--ease-premium)}
.motion-enabled details[open]>:not(summary):is(.workspace-more-panel,.pdf-zoom-menu-panel,.workspace-page-template-menu,.annotation-settings-panel,.annotation-shapes,.notes-study-menu),
.motion-enabled :is(.notes-study-menu,.annotation-empty-context-menu,.annotation-selection-actions):not([hidden]){animation:betooth-popover-enter var(--motion-fast) var(--ease-premium)}
@keyframes betooth-popover-enter{from{opacity:.65;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Feedback: new question/AI result, not replaying the entire old chat. */
.motion-enabled .motion-arrival{animation:betooth-inline-enter var(--motion-normal) var(--ease-premium)}
@keyframes betooth-inline-enter{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}
.motion-enabled :is(.notes-study-result,.mcq-feedback,.mcq-explanation):not(:empty):not([hidden]){animation:betooth-inline-enter var(--motion-fast) var(--ease-premium)}
.app .mcq-option{transition:border-color var(--transition-fast),background-color var(--transition-fast),transform var(--transition-fast)}
.app .mcq-option:active{transform:none}
.app :is(.mcq-option.correct,.mcq-option.incorrect){animation:betooth-inline-enter var(--motion-fast) var(--ease-premium)}
/* Busy feedback: graphic segments only; existing live text remains accessible.
   No fake percentage and no continuous movement outside a genuine busy state. */
.motion-enabled :is(.beto-message-pending,.notes-study-loading,.pdf-page-loading,.community-table-list[aria-busy="true"])::before{
 content:"";display:inline-block;vertical-align:middle;width:6px;height:6px;margin-inline:2px 26px;background:var(--pixel-cyan);box-shadow:8px 0 var(--betooth-muted),16px 0 var(--betooth-light);animation:betooth-pixel-busy calc(var(--motion-slow) * 3) steps(3,end) infinite;
}
@keyframes betooth-pixel-busy{0%,100%{opacity:.45}66%{opacity:1}}
.community-table-list[aria-busy="true"]{position:relative}
.motion-enabled .community-table-list[aria-busy="true"]::before{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}
.motion-enabled #pageMount[aria-busy="true"]::before{content:"";position:fixed;z-index:45;top:var(--topbar-height);inset-inline-end:18px;width:6px;height:6px;background:var(--pixel-cyan);box-shadow:8px 0 var(--betooth-muted),16px 0 var(--betooth-light);pointer-events:none;animation:betooth-pixel-busy calc(var(--motion-slow) * 3) steps(3,end) infinite}
/* Notes: no route/reveal animation on drawing ancestors. Chrome opacity only.
   No pressure, pointer, pan, zoom, PDF or annotation state is touched. */
.motion-enabled .notes-workspace :is(.notes-study-menu,.annotation-selection-actions,.annotation-empty-context-menu,.annotation-settings-panel,.annotation-shapes,.workspace-more-panel,.pdf-zoom-menu-panel){animation-name:betooth-inline-enter}
.pdf-page-shell,.pdf-page-canvas{animation:none!important}
.notes-workspace :is(.workspace-stage,.workspace-shell,.pdf-page-scroll,.pdf-page-shell,.pdf-page-canvas,.annotation-layer,.annotation-overlay,.annotation-canvas,.workspace-paper,.pdf-blank-page,.notebook-page){animation:none!important;transition:none!important}
.notes-workspace :is(.workspace-toolbar button,.workspace-tool,.annotation-selection-actions button,.pdf-thumbnail):active{transform:none}
.notes-workspace :is(.workspace-pages,.workspace-beto){transition-duration:var(--motion-normal);transition-timing-function:var(--ease-enter)}
@media(max-width:980px){:root{--motion-stagger:16ms}}
@media(max-width:640px){:root{--motion-stagger:0ms}}
@media(prefers-reduced-motion:reduce){
 :root{--motion-instant:0ms;--motion-fast:0ms;--motion-normal:0ms;--motion-slow:0ms;--motion-stagger:0ms}
 .motion-enabled .motion-reveal{opacity:1!important}
 .motion-enabled *, .motion-enabled *::before,.motion-enabled *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .motion-enabled #pageMount>.motion-route-enter,.motion-enabled .motion-arrival,.nav-motion-indicator{transform:none!important}
 .nav-motion-indicator{top:var(--nav-indicator-y,0)}
}