/* Transformation is limited to display surfaces, never forms or surrounding layout. */
.depth-surface{--depth-x:0deg;--depth-y:0deg;--light-x:50%;--light-y:30%;transform-origin:center;transition:transform 380ms cubic-bezier(.2,.7,.25,1),box-shadow 250ms ease;isolation:isolate}
body[data-depth=on] .depth-surface.depth-active{transform:perspective(1100px) rotateX(var(--depth-x)) rotateY(var(--depth-y)) translateZ(5px);transition:transform 100ms linear,box-shadow 250ms ease}
.depth-toggle{font:inherit;font-size:12px;line-height:1.5;min-height:44px;padding:10px 14px;border:1px solid currentColor;border-radius:12px;background:transparent;color:inherit;cursor:pointer;opacity:.85;max-width:100%;text-align:left}
.depth-toggle:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.demo-foot .depth-toggle{flex-shrink:0}
body[data-depth=off] .depth-surface{--depth-x:0deg;--depth-y:0deg}
.portfolio-cover::before,.case-visual::before,.product-image::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,30%),#ffffff24,transparent 58%);pointer-events:none;opacity:0;transition:opacity .3s ease}
body[data-depth=on] .depth-active::before{opacity:1}
body[data-depth=off].liquid-site .uah-motion-card:hover{transform:none}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.depth-surface{transform:none!important;transition:none!important}}