Act as a senior front-end engineer with a motion design eye. Add a tilt effect to the featured card on {{page_or_feature}} in my {{tech_stack}} project, in this style: {{visual_style}}. Read the card component first. Use it on one or two showcase cards only, never on text-heavy cards or every card in a grid. What moves and why: the card leans toward the pointer to say this one is special and clickable. It responds to attention; it never moves on its own. Build: - Perspective of 900px on the parent; rotateX and rotateY at most 6 degrees, from the pointer's position relative to the card's center - Pointer events on the card only, values written as CSS custom properties inside requestAnimationFrame, smoothed so the card eases toward the target instead of snapping - Optional glare: a light gradient layer whose opacity, up to 0.15, and position follow the pointer, using transform and opacity only - On leave, back to flat over 300ms, ease-out cubic-bezier(0.2, 0, 0, 1) - A shadow lift made by fading a pseudo-element's opacity, not by animating box-shadow - will-change only while hovered Fallbacks: - Only with hover and a fine pointer. On touch, no gyroscope tilt: a 150ms scale to 0.98 on press, then back - Keyboard focus: a 4px lift and a visible focus ring, no tilt - Under prefers-reduced-motion: reduce, no tilt or glare; hover shows only the shadow lift Rules: text stays sharp and readable at every angle, the card stays one real link, and nothing outside it moves, so there's no layout shift. Performance budget: no layout reads inside the move handler, 60fps with 4x CPU throttling, and no tilt library over 3KB; a few lines of plain code are fine. Avoid: tilts over 10 degrees, holographic rainbow foil on business content, and tilt on every card. Finish with the files changed and the values used.