/* m11 — premium motion layer. Transform/opacity only (compositor-friendly).
   Everything sits inside no-preference so reduced-motion users get the static UI. */
@property --cum { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --m11-w { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
:root { --m11-ease: cubic-bezier(.2,.8,.2,1); --m11-spring: cubic-bezier(.34,1.36,.64,1); --m11-out: cubic-bezier(.4,0,1,1); }

/* glide indicator for segmented controls (inserted by rx-m11.js) */
.m11-glide-host { position: relative; isolation: isolate; }
.m11-glide { position: absolute; z-index: -1; left: 0; top: 0; border-radius: 8px; background: var(--rx-ink-3, #2a2160); box-shadow: var(--rx-hi, inset 0 0 0 1px rgba(190,176,255,.14)); pointer-events: none; opacity: 0; will-change: transform, width; }
.m11-glide-host.m11-glide-on > .m11-glide { opacity: 1; }
.m11-glide-host.m11-glide-on > :is(button,a,[role=tab]):is(.active,.is-on,.is-active,[aria-selected=true]) { background: transparent !important; box-shadow: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. view transitions */
  .view.m11-in { animation: m11ViewIn .32s var(--m11-ease) both; }
  @keyframes m11ViewIn { from { opacity: 0; transform: translate3d(0,10px,0); } }

  /* 2. staggered list entrance */
  .m11-st { animation: m11Rise .38s var(--m11-ease) both; animation-delay: calc(min(var(--m11-i, 0), 12) * 32ms); }
  @keyframes m11Rise { from { opacity: 0; transform: translate3d(0,8px,0); } }

  /* 3/4. number roll + tick flash */
  .m11-roll { display: inline-block; }
  .m11-tick-up { animation: m11Up 1s ease-out; }
  .m11-tick-down { animation: m11Down 1s ease-out; }
  @keyframes m11Up { 0% { color: #34D399; text-shadow: 0 0 18px rgba(52,211,153,.45); } 100% {} }
  @keyframes m11Down { 0% { color: #F87171; text-shadow: 0 0 18px rgba(248,113,113,.45); } 100% {} }

  /* 5. press / hover micro-interactions */
  :is(.swap-submit, .rx-btn--primary, .rx-btn-primary, .activity-match-btn, .wallet-btn, .m9-cta button, .nb-choice, .lend-term button, .rx-btabs button, .mx-tab, .chip, .book-chart-ranges button) { transition: transform .16s var(--m11-ease), box-shadow .2s var(--m11-ease), background-color .2s, color .2s, filter .2s; }
  @media (hover: hover) {
    :is(.swap-submit, .rx-btn--primary, .rx-btn-primary, .activity-match-btn):not(:disabled):hover { transform: translate3d(0,-1px,0); filter: brightness(1.05); }
    .wallet-btn:hover { transform: translate3d(0,-1px,0); }
  }
  :is(.swap-submit, .rx-btn--primary, .rx-btn-primary, .activity-match-btn, .wallet-btn, .nb-choice, .lend-term button, .book-chart-ranges button, .mx-tab, .rx-btabs button):not(:disabled):active { transform: scale(.97); transition-duration: .08s; }

  /* 6. sheets: spring in, quick out */
  .mx-sheet { transition: transform .2s var(--m11-out) !important; }
  .mx-sheet.is-open { transition: transform .42s var(--m11-spring) !important; }
  .modal-overlay:not(.hidden) .modal, .picker-overlay:not(.hidden) .picker-card { animation: m11Sheet .42s var(--m11-spring) both; }
  .modal-overlay:not(.hidden), .picker-overlay:not(.hidden) { animation: m11Fade .2s ease both; }
  @keyframes m11Sheet { from { opacity: .4; transform: translate3d(0,24px,0) scale(.98); } }
  @keyframes m11Fade { from { opacity: 0; } }
  @media (max-width: 760px) { @keyframes m11Sheet { from { transform: translate3d(0,100%,0); } } }
  details > :not(summary) { animation: m11Rise .26s var(--m11-ease); }

  /* 7. glide */
  .m11-glide { transition: transform .3s var(--m11-ease), width .3s var(--m11-ease), height .3s var(--m11-ease), opacity .15s; }

  /* 8. skeleton shimmer (works on any .m8-sk / .rx-sk / aria-busy block) */
  .m8-sk, .rx-sk, .skeleton { background: linear-gradient(100deg, rgba(255,255,255,.04) 20%, rgba(190,176,255,.14) 40%, rgba(255,255,255,.04) 60%) !important; background-size: 220% 100% !important; animation: m11Shim 1.3s linear infinite !important; }
  @keyframes m11Shim { from { background-position: 120% 0; } to { background-position: -120% 0; } }

  /* 9. chart draw-in */
  .book-chart-canvas.m11-draw { animation: m11Draw .9s var(--m11-ease) both; }
  @keyframes m11Draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

  /* 10. depth bars grow (registered --cum interpolates) */
  .rx-lad__row { transition: --cum .45s var(--m11-ease); }
  .rx-lad__list.m11-fresh .rx-lad__row { animation: m11Cum .7s var(--m11-ease) both; animation-delay: calc(min(var(--m11-i,0),10) * 40ms); }
  @keyframes m11Cum { from { --cum: 0%; } }
  #lend-health-fill { transition: width .55s var(--m11-spring) !important; }

  /* 11. success checkmark */
  .m11-check { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.18em; margin-right: .35em; }
  .m11-check circle { stroke-dasharray: 64; stroke-dashoffset: 64; animation: m11Dash .5s var(--m11-ease) forwards; }
  .m11-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: m11Dash .35s .35s var(--m11-ease) forwards; }
  @keyframes m11Dash { to { stroke-dashoffset: 0; } }

  /* 12. radiant field drift (fixed layer, transform only) */
  body::before { inset: -8% !important; animation: m11Drift 38s ease-in-out infinite alternate; }
  @keyframes m11Drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-2.5%,1.5%,0) scale(1.04); } 100% { transform: translate3d(2%,-1.5%,0) scale(1.02); } }

  /* 13. wallet button morph */
  .wallet-btn.m11-morph { transition: width .38s var(--m11-spring), background-color .3s, color .3s, transform .16s !important; overflow: hidden; }
  .wallet-btn .wallet-btn-text { transition: opacity .2s; }
  .wallet-btn.m11-swapping .wallet-btn-text { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m11-check circle, .m11-check path { stroke-dashoffset: 0; }
}
.m11-check { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.18em; margin-right: .35em; color: #34D399; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: m11Toast .45s var(--m11-spring) both; }
  @keyframes m11Toast { from { opacity: 0; transform: translate3d(0,14px,0) scale(.96); } }
  .toast.success .toast-icon svg :is(path,polyline,circle,line) { stroke-dasharray: 64; stroke-dashoffset: 64; animation: m11Dash .55s .1s var(--m11-ease) forwards; }
}
/* no up/down flash for values that merely arrive while a view is settling in */
.m11-settling :is(.rx-tick-up, .rx-tick-down, .m11-tick-up, .m11-tick-down) { animation: none !important; }