/* SocialOrbit Component Styles */

.social-orbit-wrapper {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-orbit-root {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-ripple {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(82, 82, 82, 0.4); /* Refined grey border */
    background: radial-gradient(circle, rgba(82, 82, 82, 0.08) 0%, transparent 70%);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 10px rgba(82, 82, 82, 0.1);
}

.social-ripple-animate {
    animation: socialRipplePulse 4s ease-in-out infinite;
}

@keyframes socialRipplePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        border-color: rgba(82, 82, 82, 0.3);
        box-shadow: 0 0 15px rgba(82, 82, 82, 0.1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.03);
        border-color: rgba(82, 82, 82, 0.6);
        box-shadow: 0 0 25px rgba(82, 82, 82, 0.2);
    }
}

.social-orbit-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 1px; /* Minimal size, just a rotation point */
    height: 1px;
}

.social-orbit-layer-animate {
    animation-name: socialOrbitRotate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    pointer-events: auto;
}

.social-icon-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -18px;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    opacity: 0;
    transform: translate(0, 0) scale(0);
    transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 800ms;
}

.social-icon-wrapper.visible {
    opacity: 1;
}

.social-icon-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
    cursor: pointer;
    overflow: hidden;
    padding: 6px;
}

.social-icon-card:hover {
    transform: scale(1.2);
}

.social-icon-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.social-icon-counter-rotate {
    animation: socialCounterRotate 30s linear infinite;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-center-piece {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 2s, opacity 800ms 2s;
}

.social-center-piece.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.center-logo {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: invert(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.25));
}

@keyframes socialOrbitRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes socialCounterRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}