const isOpen = cat.status === 'open'
            const inner = (
              <motion.div variants={reduce?undefined:FV.fadeUp} className="st-cat-card"
                onMouseEnter={(e) => {
                  const v = e.currentTarget.querySelector('video') as HTMLVideoElement | null
                  v?.play().catch(() => {})
                }}
                onMouseLeave={(e) => {
                  const v = e.currentTarget.querySelector('video') as HTMLVideoElement | null
                  if (v) { v.pause(); v.currentTime = 0 }
                }}
                style={{position:'relative',padding:0,background:P.bg,border:`1px solid ${P.border}`,borderRadius:'14px',display:'flex',flexDirection:'column',cursor:isOpen?'pointer':'default',opacity:isOpen?1:0.7,overflow:'hidden'}}>
                {/* Cinematic visual — poster image + hover video */}
                <div style={{position:'relative',aspectRatio:'16/9',width:'100%',background:P.surf2,overflow:'hidden'}}>
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={cat.poster} alt="" loading="lazy" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',zIndex:1}}/>
                  <video
                    src={cat.video}
                    muted
                    loop
                    playsInline
                    preload="none"
                    aria-hidden
                    style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',zIndex:2}}