/* premium-motion : dimensional cards  (premium-motion 2.0, Phase 3)
   Pointer-driven 3D tilt with in-card parallax layers and a specular glare.
   Pair with tilt.js. Fine-pointer + full-tier only; degrades to a flat card.
     <article class="md-tilt" data-tilt="8">
       <div class="md-tilt-layer" style="--z:40px">…floats above…</div>
       …base content…
     </article>
   ============================================================ */
.md-tilt{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.22,.61,.2,1);
  position: relative; will-change: transform;
}
.md-tilt-layer{
  transform: translate3d(var(--px,0), var(--py,0), var(--z,30px));
  transition: transform .3s cubic-bezier(.22,.61,.2,1);
}
.md-tilt::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(300px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.4), transparent 60%);
  opacity:0; transition: opacity .3s; mix-blend-mode: overlay; z-index:2;
}
.md-tilt:hover::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .md-tilt,.md-tilt-layer{ transform:none !important; transition:none; } }
:root[data-motion="lite"] .md-tilt,:root[data-motion="off"] .md-tilt{ transform:none !important; }