/* =========================================
   FLOATING SOCIAL COMIC DOCK
========================================= */

.social-float {
    --bubble-size: 48px;
    --gap: 10px;

    position: fixed;
    z-index: 99999;

    display: flex;
    flex-direction: column;
    gap: var(--gap);

    padding: 9px;

    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 30px;

    background: rgba(255, 255, 255, .42);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 18px 45px rgba(48, 63, 140, .16),
        inset 0 1px 0 rgba(255, 255, 255, .75);

    user-select: none;
    -webkit-user-select: none;

    touch-action: none;

    cursor: grab;

    transition:
        left .7s cubic-bezier(.22, 1, .36, 1),
        right .7s cubic-bezier(.22, 1, .36, 1),
        top .7s cubic-bezier(.22, 1, .36, 1),
        bottom .7s cubic-bezier(.22, 1, .36, 1),
        transform .9s cubic-bezier(.22, 1, .36, 1),
        opacity .5s ease;
}

.social-float:active {
    cursor: grabbing;
}


/* =========================================
   INITIAL POSITION
========================================= */

.social-float[data-position="right"] {
    right: 22px;
    top: 50%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
}

.social-float[data-position="left"] {
    left: 22px;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
}


/* =========================================
   SOCIAL BUBBLE
========================================= */

.social-bubble {
    position: relative;

    width: var(--bubble-size);
    height: var(--bubble-size);

    flex: 0 0 var(--bubble-size);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    border: 2px solid rgba(255, 255, 255, .72);

    background: rgba(255, 255, 255, .75);

    box-shadow:
        0 8px 20px rgba(30, 40, 90, .15),
        inset 0 1px 1px rgba(255, 255, 255, .9);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.social-bubble span {
    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 21px;
    font-weight: 800;
    line-height: 1;

    color: #17213f;
}


/* =========================================
   COMIC HOVER
========================================= */

.social-bubble:hover {
    transform: scale(1.18) rotate(-5deg);

    box-shadow:
        0 12px 30px rgba(40, 50, 130, .25),
        0 0 0 5px rgba(255, 255, 255, .28);
}


/* =========================================
   DIFFERENT BUBBLES
========================================= */

.social-bubble.linkedin {
    background: linear-gradient(145deg,
            #e8f4ff,
            #9bd0ff);
}

.social-bubble.x {
    background: linear-gradient(145deg,
            #ffffff,
            #dfe3ea);
}

.social-bubble.instagram {
    background: linear-gradient(145deg,
            #ffd8ef,
            #c7b5ff);
}

.social-bubble.facebook {
    background: linear-gradient(145deg,
            #d8e8ff,
            #a8c7ff);
}

.social-bubble.whatsapp {
    background: linear-gradient(145deg,
            #dfffe9,
            #a6eac1);
}

.social-bubble.credly {
    background: linear-gradient(145deg,
            #fff3d4,
            #ffd47d);
}


/* =========================================
   IDLE STATE
========================================= */

.social-float.is-idle {
    cursor: default;
}


/*
 * IMPORTANT:
 * Do NOT use negative positioning here.
 *
 * Old version was:
 * left: calc(var(--bubble-size) * -0.5);
 *
 * That caused the dock to become half hidden.
 */


/* =========================================
   LEFT DOCK
========================================= */

.social-float.dock-left {
    left: 22px !important;
    right: auto !important;
}


/* =========================================
   RIGHT DOCK
========================================= */

.social-float.dock-right {
    right: 22px !important;
    left: auto !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .social-float {
        --bubble-size: 42px;
        --gap: 7px;

        padding: 7px;
    }

    .social-bubble span {
        font-size: 18px;
    }

    .social-float[data-position="right"] {
        right: 12px;
    }

    .social-float[data-position="left"] {
        left: 12px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .social-float {
        --bubble-size: 42px;
        --gap: 7px;
    }

    .social-bubble span {
        font-size: 18px;
    }
}