/* ============================================
   MODERN PROFILE IMAGE
   ============================================ */

.modern-profile-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    border-radius: 30px;
    padding: 10px;
    /* Space for the neon border */
    /* background: #03000a; MOVED TO .profile-bg */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.profile-bg {
    position: absolute;
    inset: 0;
    background: #03000a;
    border-radius: 30px;
    z-index: -1;
}

.profile-square {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 20px;
    z-index: -2;
    opacity: 0.6;
    filter: blur(15px);
    transition: all 0.5s ease-in-out;
}

.modern-profile-wrapper:hover .profile-square {
    filter: blur(5px);
    opacity: 0.8;
}

.square-1 {
    top: -40px;
    right: -40px;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    transform: rotate(15deg);
}

.square-2 {
    bottom: -40px;
    left: -40px;
    background: linear-gradient(135deg, #7e22ce, #db2777);
    transform: rotate(-10deg);
}

/* Pattern Background behind image */
.modern-profile-wrapper::before {
    content: '';
    position: absolute;
    inset: 10px;
    background-image:
        radial-gradient(circle at 2px 2px, rgba(147, 51, 234, 0.15) 1px, transparent 0);
    background-size: 24px 24px;
    border-radius: 20px;
    z-index: 0;
}

/* Neon Border Frame */
.profile-neon-frame {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 2px;
    background: linear-gradient(135deg, #7e22ce, #06b6d4, #7e22ce);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 0 15px rgba(126, 34, 206, 0.5), inset 0 0 15px rgba(6, 182, 212, 0.3);
    animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(126, 34, 206, 0.6)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.8)) brightness(1.2);
    }
}

/* Removed ::before overlay as the background provides the gradient */

.modern-profile-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease;
    filter: brightness(0.95);
}

.modern-profile-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(130, 36, 227, 0.1) 100%);
    pointer-events: none;
    z-index: 2;
}

.modern-profile-wrapper:hover .modern-profile-image {
    transform: scale(1.03);
}

/* Responsive */
@media (max-width: 992px) {
    .modern-profile-wrapper {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .modern-profile-wrapper {
        max-width: 280px;
    }
}