/* messy -> clean menu effect (additive: only decorates the real menus while they animate) */
.dropdown.messy a,.m-sub.messy-run a,.mobile-panel.messy-run .m-list > li{will-change:transform}
.dropdown.messy a > *,.mobile-panel.messy-run .m-link,.mobile-panel.messy-run .m-trigger svg{will-change:transform}
.dropdown.messy .dd-title,.dropdown.messy .dd-desc,.dropdown.messy .badge,.m-list a,.m-list button{white-space:nowrap}
/* faint spreadsheet grid that fades while the rows sort */
.dropdown::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:100% 25%,34px 100%;background-position:0 -1px,18px 0}
.dropdown.messy::after{animation:ddGrid var(--messy-dur,.62s) ease-out}
@keyframes ddGrid{0%{opacity:0}18%{opacity:.9}70%{opacity:.5}100%{opacity:0}}
.mobile-panel.messy-run{overflow-x:hidden}
.mobile-panel.messy-run::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;opacity:0;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:25% 100%;animation:mGrid .7s ease-out}
@keyframes mGrid{0%{opacity:0}20%{opacity:.8}100%{opacity:0}}
.m-sub.messy-run{overflow:hidden}
@media (prefers-reduced-motion:reduce){.dropdown::after,.mobile-panel.messy-run::after{animation:none}}