/* ============================================================
   STEAGUS CROSS-SITE SOCIAL ICONS — styles
   Status: LOCKED. Same on every site — same accounts, same brand
   colors (real platform colors, not site palette — same convention
   as the hub bar dots). Label color uses --text-muted/--text so it
   still adapts to each site's own light/dark palette.
   ============================================================ */
.social-icons {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.social-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-decoration: none;
    color: var(--text-muted);
}

.social-icon:hover {
    color: var(--text);
}

.social-icon .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transition: transform .2s ease, box-shadow .2s ease;
    border: 2px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.social-icon .badge svg {
    width: 20px;
    height: 20px;
}

.social-icon .badge.mastodon {
    background: #7906CB;
}

.social-icon .badge.bluesky {
    background: #1185FE;
}

.social-icon .badge.imgur {
    background: #1BB76E;
}

/* === Hover Effects === */
.social-icon:hover .badge {
    animation: social-pulse 1.4s ease-in-out infinite;
}

.social-icon:hover .badge svg {
    animation: social-shake 0.4s ease-in-out infinite;
}

.social-icon:hover .badge.mastodon {
    box-shadow: 0 0 10px 3px #9207F5;
}

.social-icon:hover .badge.bluesky {
    box-shadow: 0 0 10px 3px #55D0FF;
}

.social-icon:hover .badge.imgur {
    box-shadow: 0 0 10px 3px #00ff66;
}

.social-icon:hover .badge {
    border-color: #000;
}

@keyframes social-pulse{
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes social-shake{
    0% {
        transform: translate(0, 0) rotate(0);
    }

    20% {
        transform: translate(-1px, 1px) rotate(-1deg);
    }

    40% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    60% {
        transform: translate(1px, 1px) rotate(0);
    }

    80% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    100% {
        transform: translate(0, 0) rotate(0);
    }
}

@media (prefers-reduced-motion: reduce){
    .social-icon:hover .badge {
        animation: none;
    }

    .social-icon:hover .badge svg {
        animation: none;
    }
}