/* Sparkle Effect - Floating particle sparkles around avatar */

.profile-avatar.effect-sparkle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, var(--theme-text-header), transparent),
        radial-gradient(1px 1px at 70% 20%, var(--theme-text-link), transparent),
        radial-gradient(1px 1px at 40% 70%, var(--theme-accent), transparent),
        radial-gradient(2px 2px at 80% 60%, var(--theme-text-header), transparent),
        radial-gradient(1px 1px at 30% 10%, var(--theme-text-link), transparent),
        radial-gradient(2px 2px at 60% 80%, var(--theme-accent), transparent);
    animation: particleFloat 4s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

.profile-avatar.effect-sparkle::after {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    background-image:
        radial-gradient(1px 1px at 10% 50%, var(--theme-text-header), transparent),
        radial-gradient(2px 2px at 90% 40%, var(--theme-text-link), transparent),
        radial-gradient(1px 1px at 50% 90%, var(--theme-accent), transparent),
        radial-gradient(2px 2px at 25% 20%, var(--theme-text-header), transparent);
    animation: particleFloat 5s ease-in-out infinite 1s;
    z-index: 2;
    pointer-events: none;
}

.profile-avatar.effect-sparkle::before,
.profile-avatar.effect-sparkle::after {
    mix-blend-mode: screen;
}

@keyframes particleFloat {

    0%,
    100% {
        transform: rotate(0deg);
        opacity: 0.7;
    }

    25% {
        transform: rotate(90deg);
        opacity: 1;
    }

    50% {
        transform: rotate(180deg);
        opacity: 0.5;
    }

    75% {
        transform: rotate(270deg);
        opacity: 0.9;
    }
}