feat: use tailwind css to fix safari problem

src/app/globals.css

@@ -174,72 +174,3 @@ div[data-media-provider] video {
     display: none !important;
   }
 }
-
-/* WebKit 动画性能优化类 - 修复视频卡片动画闪烁和卡顿 */
-.webkit-animation-fix {
-  /* 启用硬件加速 */
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-
-  /* 防止WebKit动画闪烁 */
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-
-  /* 设置透视，改善3D变换性能 */
-  -webkit-perspective: 1000px;
-  perspective: 1000px;
-
-  /* 优化动画性能 */
-  will-change: transform, opacity;
-
-  /* 强制创建新的层叠上下文 */
-  -webkit-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-
-  /* 确保动画平滑 */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* 为子元素提供动画优化 */
-.webkit-animation-fix * {
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-
-/* 特别优化hover状态的性能 */
-.webkit-animation-fix:hover {
-  /* 在hover时明确设置will-change */
-  will-change: transform, opacity, filter;
-}
-
-/* 避免不必要的重绘 */
-.webkit-animation-fix:not(:hover) {
-  will-change: auto;
-}
-
-/* 播放logo WebKit修复 - 精确控制fill动画避免闪烁 */
-.play-icon-fixed {
-  --icon-fill: transparent;
-  --icon-scale: 1;
-
-  color: white;
-  fill: var(--icon-fill);
-  transform: scale(var(--icon-scale));
-
-  /* 分别控制每个属性的动画时长，避免WebKit闪烁 */
-  transition: fill 0.2s ease-out, transform 0.2s ease-out;
-
-  /* WebKit硬件加速和防闪烁 */
-  -webkit-transform: scale(var(--icon-scale)) translateZ(0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  will-change: transform, fill, opacity;
-}
-
-.play-icon-fixed:hover {
-  --icon-fill: rgb(34, 197, 94); /* green-500 */
-  --icon-scale: 1.1;
-}

src/components/VideoCard.tsx

@@ -262,7 +262,7 @@ export default function VideoCard({
             <PlayCircleIcon
               size={50}
               strokeWidth={0.8}
-              className='rounded-full play-icon-fixed'
+              className='rounded-full text-white fill-transparent transition-[fill,transform] duration-200 ease-out [-webkit-transform:translateZ(0)] [-webkit-backface-visibility:hidden] [backface-visibility:hidden] [will-change:transform,fill,opacity] hover:fill-green-500 hover:scale-110'
             />
           </div>
         )}