/* demo-fx — motion kit for the concept demos (see assets/demo-fx.js) */
.fx-w{display:inline-block; opacity:0; transform:translateY(0.45em); transition:opacity .7s ease, transform 1s cubic-bezier(.19,1,.22,1); transition-delay:calc(var(--i, 0) * 42ms);}
.fx-in .fx-w{opacity:1; transform:none;}
.motion-off .fx-w, .no-js .fx-w{opacity:1 !important; transform:none !important; transition:none !important;}
[data-fx="tilt"]{transition:transform .6s cubic-bezier(.19,1,.22,1);}
.fx-float{position:fixed; left:0; top:0; z-index:80; width:clamp(200px, 20vw, 300px); aspect-ratio:4/3; object-fit:cover; border-radius:14px; pointer-events:none;
  opacity:0; transform:translate(0, -50%) scale(.82) rotate(-2deg); transition:opacity .28s ease, transform .5s cubic-bezier(.19,1,.22,1); box-shadow:0 30px 60px -24px rgba(0,0,0,0.55);}
.fx-float.on{opacity:1; transform:translate(0, -50%) scale(1) rotate(0deg);}
@media (hover:none){ .fx-float{display:none;} }
[data-fx="count"]{font-variant-numeric:tabular-nums;}
/* the floating pill slides in once the first screen's own buttons are gone */
.fx-pill{transition:transform .55s cubic-bezier(.19,1,.22,1), opacity .3s ease, background .2s ease !important;}
.fx-pill.fx-away{transform:translateY(calc(100% + 40px)) !important; opacity:0; pointer-events:none; animation:none !important;}