/* Small projected surfaces. Forms, tables and charts stay still. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card-depth{position:relative;
    transform:perspective(1000px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) translateY(var(--card-lift,0px));
    transition:transform 240ms cubic-bezier(.2,.65,.3,1),border-color 180ms ease,box-shadow 240ms ease}
  .card-tracking{transition-duration:150ms}
  .card-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
    transition:opacity 240ms ease;
    background:radial-gradient(ellipse at var(--card-light-x,50%) var(--card-light-y,50%),rgba(255,255,255,.55),transparent 62%)}
  .card-tracking>.card-sheen{opacity:1}
  body[data-theme=dark] .card-sheen{
    background:radial-gradient(ellipse at var(--card-light-x,50%) var(--card-light-y,50%),rgba(180,215,255,.14),transparent 62%)}
}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  .card-depth{transform:none!important;transition:none!important}
  .card-sheen{display:none}
}