<script setup lang="ts">
import { animate } from 'motion-v'
const props = defineProps({ enabled: { type: Boolean, default: false } })
const pointer = ref<HTMLElement | null>(null)
const pos = reactive({ x: 0, y: 0 }); const target = reactive({ x: 0, y: 0 })

function onMove(e: MouseEvent){ target.x=e.clientX; target.y=e.clientY }
function loop(){ if(!pointer.value) return requestAnimationFrame(loop); pos.x+=(target.x-pos.x)*0.25; pos.y+=(target.y-pos.y)*0.25; const w=pointer.value.offsetWidth/2, h=pointer.value.offsetHeight/2; pointer.value.style.translate = `${pos.x-w}px ${pos.y-h}px`; requestAnimationFrame(loop) }

onMounted(()=>{ if(!props.enabled) return; document.body.classList.add('cursor-active'); document.addEventListener('pointermove', onMove, { passive:true }); loop() })
onUnmounted(()=>{ document.body.classList.remove('cursor-active'); document.removeEventListener('pointermove', onMove) })
</script>

<template>
  <ClientOnly><div ref="pointer" data-ios-cursor class="fixed top-0 left-0 h-3 w-3 rounded-full bg-white"/></ClientOnly>
</template>

body.cursor-active, body.cursor-active a, body.cursor-active button, body.cursor-active [role='button'], body.cursor-active .clickable { cursor: none !important; }
[data-ios-cursor]{ position:fixed; top:0; left:0; z-index:2147483647; width:12px; height:12px; border-radius:9999px; pointer-events:none!important; isolation:isolate; view-transition-name:none!important; }
::view-transition-group(root), ::view-transition-image-pair(root), ::view-transition-old(root), ::view-transition-new(root){ pointer-events:none!important; }