[data-pointer-effects-root] {
    --pointer-click-color: #8b5cf6;
    --pointer-trail-color: #22d3ee;
}

[data-pointer-effects-scoped] {
    isolation: isolate;
}

.profile-pointer-fx-layer {
    position: fixed;
    z-index: 32;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    contain: layout style;
    user-select: none;
    -webkit-user-select: none;
}

[data-pointer-effects-scoped] > .profile-pointer-fx-layer {
    position: absolute;
    z-index: 32;
    width: 100%;
    height: 100%;
}

.profile-pointer-fx {
    position: absolute;
    left: var(--pointer-x, 0px);
    top: var(--pointer-y, 0px);
    display: block;
    color: var(--pointer-color, var(--pointer-click-color));
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.profile-pointer-click-ripple {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 0 16px color-mix(in srgb, currentColor 65%, transparent), inset 0 0 9px color-mix(in srgb, currentColor 32%, transparent);
    animation: profile-pointer-ripple .72s cubic-bezier(.15, .72, .2, 1) forwards;
}

.profile-pointer-click-ripple::after {
    position: absolute;
    inset: 3px;
    border: 1px solid currentColor;
    border-radius: inherit;
    content: "";
    opacity: .8;
    animation: profile-pointer-ripple-inner .56s .04s ease-out forwards;
}

.profile-pointer-click-burst {
    width: 4px;
    height: 13px;
    margin: -6px 0 0 -2px;
    border-radius: 99px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .95), currentColor 40%, transparent);
    box-shadow: 0 0 9px currentColor;
    animation: profile-pointer-burst .62s cubic-bezier(.18, .7, .22, 1) forwards;
}

.profile-pointer-click-heart {
    margin: -10px 0 0 -8px;
    color: currentColor;
    font: 800 18px/1 system-ui, sans-serif;
    text-shadow: 0 0 10px currentColor, 0 2px 5px rgba(0, 0, 0, .35);
    animation: profile-pointer-heart .9s cubic-bezier(.18, .7, .22, 1) forwards;
}

.profile-pointer-click-sparkle {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: currentColor;
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
    filter: drop-shadow(0 0 5px currentColor);
    animation: profile-pointer-sparkle .72s cubic-bezier(.18, .7, .22, 1) forwards;
}

.profile-pointer-trail-glow,
.profile-pointer-trail-rainbow {
    width: var(--pointer-size, 9px);
    height: var(--pointer-size, 9px);
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 7px currentColor, 0 0 16px color-mix(in srgb, currentColor 68%, transparent);
    animation: profile-pointer-trail-dot .58s ease-out forwards;
}

.profile-pointer-trail-rainbow {
    color: hsl(var(--pointer-hue, 280) 94% 68%);
    animation-duration: .7s;
}

.profile-pointer-trail-comet {
    width: var(--pointer-size, 24px);
    height: 5px;
    margin: -2.5px 0 0 -20px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 26%, transparent) 35%, currentColor 100%);
    box-shadow: 6px 0 10px color-mix(in srgb, currentColor 72%, transparent);
    transform-origin: 82% 50%;
    animation: profile-pointer-trail-comet .52s ease-out forwards;
}

.profile-pointer-trail-comet::after {
    position: absolute;
    right: -1px;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 60%, white);
    box-shadow: 0 0 11px currentColor;
    content: "";
}

.profile-pointer-trail-sparkle {
    width: var(--pointer-size, 8px);
    height: var(--pointer-size, 8px);
    background: currentColor;
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
    filter: drop-shadow(0 0 5px currentColor);
    animation: profile-pointer-trail-sparkle .72s ease-out forwards;
}

@keyframes profile-pointer-ripple {
    0% { opacity: .92; transform: scale(.25); }
    65% { opacity: .55; }
    100% { opacity: 0; transform: scale(4.1); }
}

@keyframes profile-pointer-ripple-inner {
    0% { opacity: .8; transform: scale(.4); }
    100% { opacity: 0; transform: scale(2.5); }
}

@keyframes profile-pointer-burst {
    0% { opacity: .95; transform: rotate(var(--pointer-angle, 0deg)) translateY(-4px) scaleY(.4); }
    70% { opacity: .75; }
    100% { opacity: 0; transform: rotate(var(--pointer-angle, 0deg)) translateY(-38px) scaleY(.05); }
}

@keyframes profile-pointer-heart {
    0% { opacity: 0; transform: translate(0, 4px) rotate(var(--pointer-rotate, 0deg)) scale(.45); }
    18% { opacity: .98; }
    100% { opacity: 0; transform: translate(var(--pointer-drift, 0px), -48px) rotate(var(--pointer-rotate, 0deg)) scale(1.06); }
}

@keyframes profile-pointer-sparkle {
    0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.25); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--pointer-drift-x, 0px), var(--pointer-drift-y, -28px)) rotate(150deg) scale(.08); }
}

@keyframes profile-pointer-trail-dot {
    0% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
}

@keyframes profile-pointer-trail-comet {
    0% { opacity: .76; transform: rotate(var(--pointer-angle, 0deg)) scaleX(1); }
    100% { opacity: 0; transform: rotate(var(--pointer-angle, 0deg)) scaleX(.2); }
}

@keyframes profile-pointer-trail-sparkle {
    0% { opacity: .9; transform: translate(-50%, -50%) rotate(0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(120deg) scale(.08); }
}

@media (prefers-reduced-motion: reduce) {
    .profile-pointer-fx-layer { display: none !important; }
}