/* Shared motion system: deliberately subtle so portal work stays readable. */
:root{--motion-fast:160ms;--motion-base:280ms;--motion-slow:520ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:no-preference){
  .motion-reveal{opacity:0;transform:translateY(14px);animation:motion-reveal var(--motion-slow) var(--motion-ease) forwards;animation-delay:var(--motion-delay,0ms)}
  .motion-reveal.api-console{transform:none;animation-name:motion-fade}
  .topbar{animation:motion-header var(--motion-slow) var(--motion-ease) both}
  .sidebar-brand .mini-mark{animation:motion-pulse 3.8s ease-in-out infinite}
  .sidebar .side-link{transition:color var(--motion-fast) ease,background var(--motion-fast) ease,transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
  .sidebar .side-link:hover{transform:translateX(4px)}
  .sidebar .side-link.active{animation:motion-active .5s var(--motion-ease) both}
  .surface,.wallet-hero,.api-key-card,.login-card,.modal-content{transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) ease,border-color var(--motion-base) ease}
  .surface:hover,.wallet-hero:hover,.api-key-card:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(28,36,52,.12)}
  .api-console .surface:hover,.api-console .api-key-card:hover{box-shadow:0 16px 34px rgba(0,0,0,.25)}
  .stat-card:hover{transform:translateY(-4px) scale(1.012)}
  .btn,.icon-button,.quick-action,.api-key-action,.api-key-footer-btn,.copy-code,.role-option,.login-button{position:relative;overflow:hidden;transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) ease,filter var(--motion-fast) ease,background var(--motion-fast) ease,border-color var(--motion-fast) ease}
  .btn:hover,.icon-button:hover,.quick-action:hover,.api-key-action:hover,.api-key-footer-btn:hover,.copy-code:hover,.role-option:hover,.login-button:hover{transform:translateY(-2px);filter:brightness(1.03)}
  .btn:active,.icon-button:active,.quick-action:active,.api-key-action:active,.api-key-footer-btn:active,.copy-code:active,.role-option:active,.login-button:active{transform:translateY(0) scale(.97)}
  .ui-ripple{position:absolute;z-index:0;pointer-events:none;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.42);transform:translate(-50%,-50%) scale(0);animation:motion-ripple .58s ease-out forwards}
  .btn>*:not(.ui-ripple),.icon-button>*:not(.ui-ripple),.quick-action>*:not(.ui-ripple),.login-button>*:not(.ui-ripple){position:relative;z-index:1}
  .form-control,.form-select,.input-wrap{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}
  .form-control:focus,.form-select:focus{transform:translateY(-1px)}
  .compact-table tbody tr{transition:background var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) ease}
  .compact-table tbody tr:hover{transform:translateX(3px);box-shadow:inset 3px 0 0 var(--brand)}
  .modal.fade .modal-dialog{transition:transform var(--motion-base) var(--motion-ease)}
  .modal.show .modal-dialog{animation:motion-modal var(--motion-base) var(--motion-ease) both}
  .app-toast{animation:motion-toast var(--motion-slow) var(--motion-ease) both}
  .login-orb{animation:motion-float 8s ease-in-out infinite}
  .login-orb-two{animation-delay:-3.5s}
  [data-api-panel]:not([hidden]){animation:motion-panel var(--motion-base) var(--motion-ease) both}
  .api-hub-tab.is-active svg{animation:motion-icon .45s var(--motion-ease) both}
}
@media (hover:none){.surface:hover,.wallet-hero:hover,.api-key-card:hover,.stat-card:hover,.compact-table tbody tr:hover{transform:none;box-shadow:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@keyframes motion-reveal{to{opacity:1;transform:translateY(0)}}
@keyframes motion-fade{to{opacity:1}}
@keyframes motion-header{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-pulse{0%,100%{transform:scale(1);box-shadow:0 7px 16px rgba(91,92,226,.3)}50%{transform:scale(1.07);box-shadow:0 10px 23px rgba(91,92,226,.55)}}
@keyframes motion-active{0%{transform:translateX(-8px);opacity:.3}100%{transform:translateX(0);opacity:1}}
@keyframes motion-ripple{to{transform:translate(-50%,-50%) scale(22);opacity:0}}
@keyframes motion-modal{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes motion-toast{from{opacity:0;transform:translateX(18px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes motion-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,0)}}
@keyframes motion-panel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-icon{0%{transform:scale(.72) rotate(-15deg)}100%{transform:scale(1) rotate(0)}}

/* Dashboard-only visual feedback. */
@media (prefers-reduced-motion:no-preference){
  body.page-dashboard .stat-card{isolation:isolate;overflow:hidden}
  body.page-dashboard .stat-card::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 -70%;width:48%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 17%,transparent),transparent);transform:skewX(-18deg);animation:dashboard-sheen 5.8s ease-in-out infinite}
  body.page-dashboard .row>[class*="col"]:nth-child(2n) .stat-card::before{animation-delay:-2.3s}
  body.page-dashboard .stat-icon{animation:dashboard-icon-float 4.2s ease-in-out infinite;box-shadow:0 0 0 0 var(--accent-glow)}
  body.page-dashboard .row>[class*="col"]:nth-child(2n) .stat-card .stat-icon{animation-delay:-1.8s}
  body.page-dashboard .stat-value{font-variant-numeric:tabular-nums;text-shadow:0 0 16px color-mix(in srgb,var(--accent) 28%,transparent)}
  body.page-dashboard .wallet-hero{overflow:hidden}
  body.page-dashboard .wallet-hero::before{content:"";position:absolute;inset:-70%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 34%);animation:dashboard-orbit 9s linear infinite;pointer-events:none}
  body.page-dashboard .wallet-hero>*{position:relative;z-index:1}
  body.page-dashboard .chart-wrap,body.page-dashboard .mini-chart-wrap{animation:dashboard-chart-in .72s var(--motion-ease) both;transform-origin:center bottom}
  body.page-dashboard .mini-chart-wrap{animation-delay:110ms}
  body.page-dashboard .quick-action span:first-child{transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) ease}
  body.page-dashboard .quick-action:hover span:first-child{transform:rotate(-8deg) scale(1.12);box-shadow:0 0 18px var(--accent-glow)}
}
@keyframes dashboard-sheen{0%,55%,100%{transform:translateX(0) skewX(-18deg);opacity:0}12%,34%{opacity:1}45%{transform:translateX(440%) skewX(-18deg);opacity:0}}
@keyframes dashboard-icon-float{0%,100%{transform:translateY(0);box-shadow:0 0 0 0 var(--accent-glow)}50%{transform:translateY(-3px);box-shadow:0 7px 20px -8px var(--accent-glow)}}
@keyframes dashboard-orbit{to{transform:rotate(360deg)}}
@keyframes dashboard-chart-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}