/* MoxKit Waves (Style > MoxKit Waves). */
.moxkit-waves-host{isolation:isolate}
.moxkit-waves{--moxkit-waves-h:120px;position:absolute;left:0;right:0;z-index:-1;height:var(--moxkit-waves-h);overflow:hidden;line-height:0;pointer-events:none}
.moxkit-waves--front{z-index:2}
.moxkit-waves--bottom{bottom:-1px}
.moxkit-waves--top{top:-1px;transform:rotate(180deg)}
.moxkit-wave-layer{position:absolute;inset:0;overflow:hidden;opacity:var(--moxkit-wave-alpha);transform-origin:50% 100%}
.moxkit-wave-layer svg{position:absolute;left:0;bottom:0;display:block;width:100%;height:100%;overflow:visible}
.moxkit-wave-layer path{fill:var(--moxkit-wave-fill)}
/* Flow: each layer holds two identical periods and slides by exactly one of them. */
.moxkit-waves--flow .moxkit-wave-layer svg,.moxkit-waves--flow-bob .moxkit-wave-layer svg{width:200%;will-change:transform;animation:moxkit-wave-flow var(--moxkit-wave-dur) linear infinite;animation-delay:var(--moxkit-wave-delay)}
.moxkit-wave-layer.is-reverse svg{animation-direction:reverse}
/* Rise and fall: each layer breathes from its own baseline at its own pace. */
.moxkit-waves--flow-bob .moxkit-wave-layer{will-change:transform;animation:moxkit-wave-bob var(--moxkit-wave-bob) ease-in-out infinite alternate;animation-delay:var(--moxkit-wave-delay)}
.moxkit-waves.is-offscreen *{animation-play-state:paused}
@keyframes moxkit-wave-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes moxkit-wave-bob{from{transform:scaleY(1)}to{transform:scaleY(.86)}}
@media(prefers-reduced-motion:reduce){.moxkit-waves *{animation:none!important}}
