.gradient-border {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(45deg, #FFDD00, #FF0080, #F000FF, #007FFF);
    background-size: 300% 300%;
    animation: gradient-animation 4s infinite linear;
    padding: 3px;
    transform: perspective(800px) rotateX(10deg);
    transition: transform 0.5s ease-in-out, box-shadow 0.4s ease-in-out;
}

.gradient-border:hover {
    transform: perspective(800px) rotateX(-5deg) rotateY(10deg) scale(1.1); /* تغییر اسکیل */
    box-shadow: 0 20px 40px rgba(255, 105, 180, 0.7), 0 0 30px rgba(255, 105, 180, 0.6);
}

.gradient-border .image-box {
    position: relative;
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.4s ease-in-out, transform 0.4s ease;
}

.gradient-border:hover .image-box {
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.gradient-border .image-box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.4s ease;
}

.gradient-border:hover .image-box img {
    transform: scale(1.1) rotate(25deg); /* چرخش ساعتگرد هنگام هاور */
    filter: brightness(1.2) saturate(1.3);
}

.particle {
    position: absolute;
    width: 5px; /* اندازه کوچک‌تر برای پارتیکل‌ها */
    height: 5px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    pointer-events: none;
    animation: particle-move 2.5s infinite ease-in-out;
}

@keyframes particle-move {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--random-x, 10px), var(--random-y, 10px)); /* مسیر رندوم */
        opacity: 0.5; /* کاهش شفافیت */
    }
}

/* انیمیشن گرادینت */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}