/* Prompt Motion inspired sequencing, implemented locally with native Web Animations. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-quick:180ms;--motion-scene:520ms}
.trade-motion-ready .view,.trade-motion-ready dialog[open],.trade-motion-ready .login-card{animation:none}
html[data-motion=on] :is(button,summary,a,input,select,textarea){transition:color var(--motion-quick) var(--motion-ease),background-color var(--motion-quick) var(--motion-ease),border-color var(--motion-quick) var(--motion-ease),box-shadow var(--motion-quick) var(--motion-ease),opacity var(--motion-quick) var(--motion-ease)}
html[data-motion=on] :is(.panel,.value-card,.news-card,.watch-card,.index-card,.position-row,.value-lens,.vl-stat,.opt-metric,.flow-stat,.source-grid article){transition:border-color 240ms var(--motion-ease),box-shadow 240ms var(--motion-ease),background-color 240ms var(--motion-ease)}
html[data-motion=on] :is(.segmented,.section-subnav,.bottom-nav,.vl-strategies) :is(button,a){transition:color 220ms var(--motion-ease),background-color 220ms var(--motion-ease),border-color 220ms var(--motion-ease),box-shadow 220ms var(--motion-ease)}
html[data-motion=on] :is(button,summary):active{filter:brightness(.94)}
html[data-motion=on] :is(input,textarea,select):focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
html[data-motion=on] :is(.sankey-link,.sankey-node,.chart-dot,.chart-scenario-row){transition:opacity 220ms var(--motion-ease),stroke 220ms var(--motion-ease),fill 220ms var(--motion-ease)}
html[data-motion=on] :is(.sankey-node,.chart-dot,.chart-scenario-row):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-motion=on] .action-menu-panel{animation:motion-menu 220ms var(--motion-ease)}
html[data-motion=on] details[open]>:not(summary){animation:motion-disclose 300ms var(--motion-ease)}
html[data-motion=on] dialog[open]::backdrop{animation:motion-backdrop 240ms var(--motion-ease)}
html[data-motion=on] .toast:not(.hidden){animation:motion-toast 320ms var(--motion-ease)}
html[data-motion=on] .quote-changed{animation:motion-quote 800ms var(--motion-ease)}
#motion-toggle{min-width:70px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(hover:hover) and (pointer:fine){
 html[data-motion=on] :is(.value-card,.watch-card,.news-card,.source-grid article):hover{box-shadow:0 5px 22px color-mix(in srgb,var(--ink) 8%,transparent)}
 html[data-motion=on] :is(.value-open,.value-sources a,.context-news-item):hover{color:var(--ink)}
}
@keyframes motion-menu{from{opacity:.5}to{opacity:1}}
@keyframes motion-disclose{from{opacity:.5}to{opacity:1}}
@keyframes motion-backdrop{from{opacity:0}to{opacity:1}}
@keyframes motion-toast{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes motion-quote{0%{background:color-mix(in srgb,var(--accent) 14%,transparent)}100%{background:transparent}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){#motion-toggle{min-width:64px;padding-inline:8px}.header-actions,.login-theme-actions{gap:6px}}

/* Keep the existing one-line mobile header within 320px. Accessible labels remain on the button. */
:is(.topbar,.login-header) #motion-toggle{width:44px;min-width:44px;flex:none;font-size:0}
:is(.topbar,.login-header) #motion-toggle::after{content:'Ⅱ';font-size:17px;line-height:1}
html[data-motion=off] :is(.topbar,.login-header) #motion-toggle::after{content:'▷'}
.trade-motion-ready :is(button,summary):hover,.trade-motion-ready :is(button,summary):active{transform:none}

@media(max-width:380px){:is(.topbar,.login-header) .brand{font-size:0;gap:0}:is(.topbar,.login-header) .brand>span:not(.brand-icon){display:none}:is(.topbar,.login-header) .brand-icon{font-size:12px;margin-right:0}}