/* WEB 1.7 / consistent card motion across the three standalone demos. */
.demo-fx{position:relative;isolation:isolate;--dm-x:50%;--dm-y:50%;transition:transform .5s cubic-bezier(.17,.72,.2,1),box-shadow .5s ease,filter .5s ease;}
.demo-fx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(330px circle at var(--dm-x) var(--dm-y),rgba(255,255,255,.20),transparent 65%);transition:opacity .4s ease;}
.demo-fx:is(:hover,:focus-within,.is-lit)::after{opacity:1;}
.demo-fx:is(:hover,:focus-within,.is-lit){transform:translateY(-7px) scale(1.018);box-shadow:0 22px 55px rgba(0,0,0,.20);}
.demo-fx.demo-appear{animation:demo-reveal .7s cubic-bezier(.2,.75,.18,1) both;}
@keyframes demo-reveal{from{opacity:.2;translate:0 22px;}to{opacity:1;translate:0 0;}}
@media(hover:none),(pointer:coarse){.demo-fx:is(:hover,.is-lit){transform:none}.demo-fx::after{display:none}}
@media(prefers-reduced-motion:reduce){.demo-fx,.demo-fx:is(:hover,.is-lit){transform:none!important;box-shadow:none!important;animation:none!important;transition:none!important}.demo-fx::after{display:none}}