/* ============================================================
   SOCIAL MEDIA ICONS - SPINNER ANIMATION
============================================================ */

/* 1. Define Keyframes for Rotation */
@keyframes spinSocial {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 2. Base Styles for Anchor to support pseudo-element */
.social-links a {
    position: relative !important;
    /* Ensure relative positioning for pseudo-element */
    z-index: 1;
    /* Ensure content is above spinner */
}

/* 3. The Spinner Pseudo-element (Hidden by default) */
.social-links a::before {
    content: "";
    position: absolute;
    inset: -2px;
    /* Assumes ~2px border. Covers the original border area */
    border-radius: 50%;
    padding: 2px;
    /* Width of the spinner stroke matches expected border */

    /* The "Trail" Effect: Conic Gradient transparency to Color */
    background: conic-gradient(from 0deg, transparent 0%, var(--social-hover-color, #1866d8) 100%);

    /* Mask logic to show only the border ring */
    -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;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: -1;
    /* Behind the icon */
}

/* 4. Hover State: Show Spinner and Animate */
.social-links a:hover::before {
    opacity: 1;
    animation: spinSocial 2s linear infinite;
    /* 2s duration as requested */
}

/* 5. Hide the original border on hover so spinner is visible */
.social-links a:hover {
    border-color: transparent !important;
}

/* 6. Specific Colors for Each Network (Defining Variables) */

/* Facebook */
.social-links a[href*="facebook.com"] {
    --social-hover-color: #1866d8;
}

.social-links a[href*="facebook.com"]:hover svg,
.social-links a[href*="facebook.com"]:hover path {
    fill: #1866d8 !important;
    color: #1866d8 !important;
    stroke: #1866d8 !important;
    border-color: transparent !important;
}

/* Twitter / X */
.social-links a[href*="x.com"],
.social-links a[href*="twitter.com"] {
    --social-hover-color: #ffffff;
}

.social-links a[href*="x.com"]:hover svg,
.social-links a[href*="x.com"]:hover path,
.social-links a[href*="twitter.com"]:hover svg,
.social-links a[href*="twitter.com"]:hover path {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    border-color: transparent !important;
}

/* Instagram */
.social-links a[href*="instagram.com"] {
    --social-hover-color: #DD2A7B;
}

.social-links a[href*="instagram.com"]:hover svg,
.social-links a[href*="instagram.com"]:hover path {
    fill: #DD2A7B !important;
    color: #DD2A7B !important;
    stroke: #DD2A7B !important;
    border-color: transparent !important;
}