/* shared motion kit for the sample sites (see demo.js) */
:root{--ez:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}
.demo-toast{position:fixed;left:50%;bottom:72px;z-index:60;transform:translate(-50%,24px) scale(.96);opacity:0;pointer-events:none;background:var(--toast-bg,#111);color:var(--toast-fg,#fff);padding:14px 20px;border-radius:16px;font:500 14px/1.45 system-ui,sans-serif;width:max-content;max-width:min(92vw,420px);text-align:center;box-shadow:0 24px 60px -12px rgba(0,0,0,.45);transition:opacity .3s,transform .5s cubic-bezier(.2,.9,.3,1.35)}
.demo-toast b{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.65;margin-bottom:3px}
.demo-toast.on{opacity:1;transform:translate(-50%,0) scale(1)}

.js [data-r]{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ez),transform 1s var(--ez),filter 1s var(--ez);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-r=left]{transform:translateX(-50px)}
.js [data-r=right]{transform:translateX(50px)}
.js [data-r=scale]{transform:scale(.9)}
.js [data-r=blur]{transform:translateY(14px);filter:blur(12px)}
.js [data-r].in{opacity:1;transform:none;filter:none}

.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sw-i{display:inline-block}
.js [data-split] .sw-i{transform:translateY(105%) rotate(4deg);transition:transform 1.1s var(--ez);transition-delay:calc(var(--w) * 70ms + .1s)}
.js [data-split].in .sw-i{transform:none}

[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .5s var(--ez)}
[data-par]{translate:0 var(--py,0)}
[data-mag]{transition:transform .35s var(--ez)}

.mq{display:flex;width:max-content;animation:mq var(--mq,30s) linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r],.js [data-split] .sw-i{opacity:1!important;transform:none!important;filter:none!important}
}