/* ========================
   Neon Social Buttons
   ======================== */

.social-neon-list {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 25px;
    padding         : 0 25px;
    margin          : 20px 0;
    list-style      : none;
}

.social-neon-item {
    width : 250px;
}

.social-neon-item a {
    display          : flex;
    align-items      : center;
    gap              : 15px;
    padding          : 15px 20px;
    border-radius    : 15px;
    border           : 2px solid color-mix(in srgb, var(--glow-color) 80%, transparent);
    color            : #fff;
    background       : radial-gradient(
        circle at 22% 50%,
        color-mix(in srgb, var(--glow-color) 22%, transparent),
        rgba(10, 5, 20, 0.9) 70%
    );

    /*
       Soft neon frame: a tight bright ring on the border
       plus one wider, faint bloom. Kept modest so the icon
       stays the main light source.
    */
    box-shadow :
        0 0 4px color-mix(in srgb, var(--glow-color) 80%, transparent),
        0 0 13px color-mix(in srgb, var(--glow-color) 48%, transparent),
        0 0 24px color-mix(in srgb, var(--glow-color) 24%, transparent),
        inset 0 0 12px rgba(0, 0, 0, 0.55);

    transition:
        box-shadow 0.3s ease,
        transform 0.2s ease;
}

.social-neon-item a:hover {
    animation : neon-pulse 1.6s ease-in-out infinite;
    color     : #fff;
    transform : scale(1.1);
}

@keyframes neon-pulse {
    0%, 100% {
        box-shadow :
            0 0 5px color-mix(in srgb, var(--glow-color) 90%, transparent),
            0 0 15px color-mix(in srgb, var(--glow-color) 56%, transparent),
            0 0 28px color-mix(in srgb, var(--glow-color) 30%, transparent),
            inset 0 0 12px rgba(0, 0, 0, 0.55);
    }

    50% {
        box-shadow :
            0 0 7px color-mix(in srgb, var(--glow-color) 100%, transparent),
            0 0 23px color-mix(in srgb, var(--glow-color) 72%, transparent),
            0 0 40px color-mix(in srgb, var(--glow-color) 40%, transparent),
            inset 0 0 12px rgba(0, 0, 0, 0.55);
    }
}

/* ========================
   Icons
   ======================== */

.social-neon-icon {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 30px;
    max-height      : 35px;
    filter:
        drop-shadow(0 0 0.3px var(--glow-color))
        drop-shadow(
            0 0 3px
            color-mix(in srgb, var(--glow-color) 65%, transparent)
        )
        drop-shadow(
            0 0 6px
            color-mix(in srgb, var(--glow-color) 35%, transparent)
        );

    transition: filter .3s ease;
}

/* ========================
   FontAwesome Icons
   ======================== */

.social-neon-icon i:not(.custom-icon) {
    font-size           : 30px;
    max-height          : 30px;
    color               : transparent;
    -webkit-text-stroke : 1px var(--glow-color);
}

/* ========================
   SVG Custom Icons
   ======================== */

.social-neon-icon svg.custom-icon {
    overflow : visible;
    width    : 35px;
    height   : 35px;
}

.social-neon-icon svg.custom-icon * {
    fill            : none !important;
    stroke          : var(--glow-color);
    stroke-width    : 1.4;
    vector-effect   : non-scaling-stroke;
}

/* ========================
   Hover Icon Glow
   ======================== */

/* pulses in sync with the button frame (neon-pulse) */
.social-neon-item a:hover .social-neon-icon {
    animation : neon-icon-pulse 1.6s ease-in-out infinite;
}

@keyframes neon-icon-pulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 0.5px var(--glow-color))
            drop-shadow(0 0 1px var(--glow-color))
            drop-shadow(
                0 0 9px
                color-mix(in srgb, var(--glow-color) 52%, transparent)
            );
    }

    50% {
        filter:
            drop-shadow(0 0 1px var(--glow-color))
            drop-shadow(0 0 6px var(--glow-color))
            drop-shadow(
                0 0 15px
                color-mix(in srgb, var(--glow-color) 75%, transparent)
            );
    }
}

/* ========================
   Text
   ======================== */

.social-neon-text {
    font-size      : 20px;
    font-weight    : bold;
    letter-spacing : 0.5px;
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;

}

/* ========================
   Reduced Motion
   ======================== */

@media (prefers-reduced-motion: reduce) {
    .social-neon-item a:hover,
    .social-neon-item a:hover .social-neon-icon {
        animation : none;
    }

    .social-neon-item a:hover {
        transform : none;
    }
}