/* Badge Effects Animations - Unified Floating/Orbiting Particles */

/* Base container */
.profile-effects-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50 !important;
    overflow: visible;
    border-radius: 50%;
}

/* Common FontAwesome Setup */
.profile-effects-layer div::before,
.profile-effects-layer div::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* 1. Neon Feet (Steps) - Walking Orbit */
.effect-neon-feet {
    position: absolute;
    inset: -30px;
    z-index: 50;
}

.effect-neon-feet::before {
    content: '\f54b';
    position: absolute;
    color: rgba(251, 191, 36, 0.5);
    font-size: 1.2rem;
    left: 50%;
    bottom: 0;
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.4));
    opacity: 0;
    animation: orbit-walk 4s infinite linear;
}

.effect-neon-feet::after {
    content: '\f54b';
    position: absolute;
    color: rgba(251, 191, 36, 0.5);
    font-size: 1.2rem;
    right: 50%;
    top: 0;
    transform: scaleX(-1);
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.4));
    opacity: 0;
    animation: orbit-walk 4s infinite linear 2s;
}

@keyframes orbit-walk {
    0% {
        transform: rotate(0deg) translateY(-60px) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateY(-60px) rotate(-360deg);
        opacity: 0;
    }
}

/* 2. Nature Leaves (Dish) - Leaf Orbit */
.effect-nature-leaves {
    position: absolute;
    inset: -25px;
    z-index: 50;
}

.effect-nature-leaves::before {
    content: '\f06c';
    position: absolute;
    color: rgba(16, 185, 129, 0.5);
    font-size: 1.2rem;
    top: 0;
    left: 50%;
    opacity: 0;
    animation: orbit-leaf 5s infinite linear;
}

.effect-nature-leaves::after {
    content: '\f06c';
    position: absolute;
    color: rgba(52, 211, 153, 0.5);
    font-size: 1rem;
    bottom: 0;
    right: 50%;
    opacity: 0;
    animation: orbit-leaf 6s infinite linear reverse;
}

@keyframes orbit-leaf {
    0% {
        transform: rotate(0deg) translateY(-65px) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateY(-65px) rotate(-360deg);
        opacity: 0;
    }
}

/* 3. 3D Calendar (Monthly) - Floating Calendars */
.effect-3d-calendar {
    position: absolute;
    inset: -20px;
    z-index: 50;
}

.effect-3d-calendar::before {
    content: '\f073';
    position: absolute;
    color: rgba(148, 163, 184, 0.5);
    font-size: 1.2rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-float 8s infinite linear;
}

.effect-3d-calendar::after {
    content: '\f017';
    /* Clock */
    position: absolute;
    color: rgba(148, 163, 184, 0.4);
    font-size: 1rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-float 8s infinite linear 4s;
}

@keyframes orbit-float {
    0% {
        transform: rotate(0deg) translateY(-70px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateY(-70px) rotate(-360deg);
        opacity: 0;
    }
}

/* 4. Light Handshake (Commitment) - Floating Hands */
.effect-light-handshake {
    position: absolute;
    inset: -20px;
    z-index: 50;
}

.effect-light-handshake::before {
    content: '\f2b5';
    position: absolute;
    color: rgba(59, 130, 246, 0.5);
    font-size: 1.2rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-pulse 6s infinite linear;
}

.effect-light-handshake::after {
    content: '\f118';
    /* Smile */
    position: absolute;
    color: rgba(59, 130, 246, 0.4);
    font-size: 1rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-pulse 6s infinite linear 3s;
}

@keyframes orbit-pulse {
    0% {
        transform: rotate(0deg) translateY(-70px) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: rotate(72deg) translateY(-70px) rotate(-72deg) scale(1.1);
    }

    80% {
        opacity: 1;
        transform: rotate(288deg) translateY(-70px) rotate(-288deg) scale(0.8);
    }

    100% {
        transform: rotate(360deg) translateY(-70px) rotate(-360deg) scale(0.8);
        opacity: 0;
    }
}

/* 5. Rotating Team (Group) - Floating Users */
.effect-rotating-team {
    position: absolute;
    inset: -20px;
    z-index: 50;
}

.effect-rotating-team::before {
    content: '\f0c0';
    /* Users */
    position: absolute;
    color: rgba(139, 92, 246, 0.5);
    font-size: 1.2rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-users 7s infinite linear;
}

.effect-rotating-team::after {
    content: '\f007';
    /* User */
    position: absolute;
    color: rgba(139, 92, 246, 0.4);
    font-size: 1rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-users 7s infinite linear 3.5s;
}

@keyframes orbit-users {
    0% {
        transform: rotate(0deg) translateY(-75px) rotate(0deg);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateY(-75px) rotate(-360deg);
        opacity: 0;
    }
}

/* 6. Fire Aura - Floating Flames */
.effect-fire-aura {
    position: absolute;
    inset: -20px;
    z-index: 50;
}

.effect-fire-aura::before {
    content: '\f06d';
    /* Fire */
    position: absolute;
    color: rgba(249, 115, 22, 0.5);
    font-size: 1.3rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-fire 4s infinite linear;
}

.effect-fire-aura::after {
    content: '\f06d';
    position: absolute;
    color: rgba(251, 191, 36, 0.5);
    font-size: 1rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-fire 4s infinite linear 2s;
}

@keyframes orbit-fire {
    0% {
        transform: rotate(0deg) translateY(-70px) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    50% {
        transform: rotate(180deg) translateY(-70px) rotate(-180deg) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateY(-70px) rotate(-360deg) scale(0.8);
        opacity: 0;
    }
}

/* 7. Water Ripple - Floating Drops */
.effect-water-ripple {
    position: absolute;
    inset: -20px;
    z-index: 50;
}

.effect-water-ripple::before {
    content: '\f043';
    /* Tint */
    position: absolute;
    color: rgba(59, 130, 246, 0.5);
    font-size: 1.2rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-water 5s infinite linear;
}

.effect-water-ripple::after {
    content: '\f043';
    position: absolute;
    color: rgba(147, 197, 253, 0.5);
    font-size: 1rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-water 5s infinite linear 2.5s;
}

@keyframes orbit-water {
    0% {
        transform: rotate(0deg) translateY(-70px) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateY(-70px) rotate(-360deg);
        opacity: 0;
    }
}

/* 8. Shield Glow - Floating Shields */
.effect-shield-glow-gold {
    position: absolute;
    inset: -20px;
    z-index: 50;
}

.effect-shield-glow-gold::before {
    content: '\f132';
    /* Shield */
    position: absolute;
    color: rgba(245, 158, 11, 0.5);
    font-size: 1.2rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-shield 6s infinite linear;
}

@keyframes orbit-shield {
    0% {
        transform: rotate(0deg) translateY(-70px) rotate(0deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: rotate(180deg) translateY(-70px) rotate(-180deg);
    }

    100% {
        transform: rotate(360deg) translateY(-70px) rotate(-360deg);
        opacity: 0;
    }
}

/* 9. Lightning - Floating Bolts */
.effect-lightning-storm {
    position: absolute;
    inset: -20px;
    z-index: 50;
}

.effect-lightning-storm::before {
    content: '\f0e7';
    /* Bolt */
    position: absolute;
    color: rgba(255, 215, 0, 0.6);
    font-size: 1.4rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-bolt 3s infinite linear;
}

@keyframes orbit-bolt {
    0% {
        transform: rotate(0deg) translateY(-75px) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    10%,
    20% {
        opacity: 1;
        transform: rotate(50deg) translateY(-75px) rotate(-50deg) scale(1.2);
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) translateY(-75px) rotate(-360deg) scale(0.8);
        opacity: 0;
    }
}

/* 10. Deep Glow - Floating Stars */
.effect-deep-glow {
    position: absolute;
    inset: -20px;
    z-index: 50;
}

.effect-deep-glow::before {
    content: '\f005';
    /* Star */
    position: absolute;
    color: rgba(244, 63, 94, 0.5);
    font-size: 1rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-star 5s infinite linear;
}

.effect-deep-glow::after {
    content: '\f005';
    position: absolute;
    color: rgba(251, 113, 133, 0.4);
    font-size: 0.8rem;
    left: 50%;
    top: 50%;
    opacity: 0;
    animation: orbit-star 5s infinite linear 2.5s;
}

@keyframes orbit-star {
    0% {
        transform: rotate(0deg) translateY(-70px) rotate(0deg) scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: rotate(180deg) translateY(-70px) rotate(-180deg) scale(1);
    }

    100% {
        transform: rotate(360deg) translateY(-70px) rotate(-360deg) scale(0.5);
        opacity: 0;
    }
}