fix: qr animation transition & mobile qr

[nalkalin]

Description

After upgrading to Tailwind CSS v4 in v2.8.4, two problems emerged.

• Problem 1: QR code show/hide animation in the home banner is missing.
• Problem 2: QR code in the banner cannot trigger on mobile devices.

Related Issues

• [BUG] 从 v2.8.4 版本开始，手机端交互体验不佳，二维码无法展示、菜单栏无法收拢，动画异常。 #553

Problem 1 Analysis

1. QR code container in home-banner.ejs uses the transition-all class
2. This animation involves: opacity, translate, and visibility
3. The transition-g() function's transition-property is missing above 3 properties
4. This causes animations to become abrupt instead of smooth transitions

Problem 2 Analysis

1. The hover variant now only applies on devices that support hovering as the primary input in Tailwind CSS v4
2. On touch devices, group-hover:visible and group-hover:opacity-100 classes have no effect

Problem 1 Solution

Add the missing transition properties to the transition-g() function in animated.styl:

• opacity
• translate
• visibility

Problem 2 Solution

Implement toggleQR functionality that:

• Provides click/tap interaction for mobile devices