/* Hero Image Animated Border */
.profile-placeholder.image-mode {
    position: relative;
    padding: 4px;
    /* Gap for border */
    background: transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* Rotating Border */
.profile-placeholder.image-mode::before {
    content: '';
    position: absolute;
    inset: -3px;
    /* Border thickness */
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, transparent 0%, #ff1f3d 20%, transparent 40%, #ff1f3d 60%, transparent 80%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderSpin 4s linear infinite;
    pointer-events: none;
}

/* Glow Effect Layer */
.profile-placeholder.image-mode::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255, 31, 61, 0.8) 20%, transparent 40%, rgba(255, 31, 61, 0.8) 60%, transparent 80%);
    filter: blur(10px);
    z-index: -1;
    animation: borderSpin 4s linear infinite;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Remove static border */
    border: none;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    background: #000;
    /* Prevent see-through */
    transition: transform 0.3s ease;
}

.hero-img:hover {
    transform: scale(0.98);
}

@keyframes borderSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}