/* Soft course backgrounds (see motif.js) */
.mbg-host{isolation:isolate;overflow:hidden}
.mbg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.mbg>i{position:absolute;inset:-12%;background-size:cover;background-position:var(--mx,50%) 50%;background-repeat:no-repeat;transform:scaleX(var(--flip,1))}
.mbg .mbg-far{filter:blur(5px);opacity:.75;animation:mbgA 70s ease-in-out infinite alternate}
.mbg .mbg-near{opacity:.45;animation:mbgB 90s ease-in-out infinite alternate}
.mbg-light .mbg-frost{inset:0;background:linear-gradient(100deg,rgba(240,245,243,.88) 0%,rgba(240,245,243,.55) 45%,rgba(240,245,243,.15) 100%)}
.mbg-dark .mbg-frost{inset:0;background:linear-gradient(180deg,rgba(52,65,62,.35),rgba(52,65,62,.7))}
@keyframes mbgA{from{transform:scaleX(var(--flip,1)) translate3d(0,0,0) scale(1.02)}to{transform:scaleX(var(--flip,1)) translate3d(-3%,2%,0) scale(1.08)}}
@keyframes mbgB{from{transform:scaleX(var(--flip,1)) translate3d(0,0,0)}to{transform:scaleX(var(--flip,1)) translate3d(3%,-2%,0)}}

/* Whole-page blurred drawing, seen through the frosted cards */
.mbg-page{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none}
body.mbg-on>.mbg-page{display:block}
.mbg-page>i{position:absolute;inset:-10%;background-size:cover;background-position:center;background-repeat:no-repeat}
.mbg-page>i:first-child{filter:blur(9px);opacity:.3;animation:mbgA 90s ease-in-out infinite alternate}
.mbg-page>i:last-child{filter:blur(3px);opacity:.1;animation:mbgB 120s ease-in-out infinite alternate}
.mbg-still .mbg>i,.mbg-still .mbg-page>i{animation:none}

/* Frosted module tiles with soft shadows */
body.mbg-on .cp-mod,body.mbg-on .mod,body.mbg-on .cp-box{background:rgba(255,255,255,.74);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 1px 1px rgba(31,46,43,.04),0 18px 36px -18px rgba(31,46,43,.28);border-radius:24px;
  transition:transform .6s cubic-bezier(.32,.72,0,1),box-shadow .6s cubic-bezier(.32,.72,0,1),background .3s}
body.mbg-on .cp-mod:hover,body.mbg-on .mod:hover{transform:translateY(-4px);background:rgba(255,255,255,.6);box-shadow:0 1px 1px rgba(31,46,43,.04),0 28px 50px -22px rgba(31,46,43,.35)}
.mod:before{display:none}

/* The EDA sidebar scrolls: keep its drawing pinned while the list moves */
.side.mbg-host{overflow-y:auto!important}
.side>.mbg{position:sticky;top:0;inset:auto;flex:0 0 100vh;height:100vh;margin-bottom:-100vh;width:100%}