/**
 * =========================================================
 * SOCIAL FLOATING BUTTONS
 * FINAL CSS
 *
 * Desktop Icon : 150px
 * Desktop Gap  : -40px
 *
 * Animation:
 * Zoom In
 *    ↓
 * Zoom Out
 *    ↓
 * Snake Left / Right
 *    ↓
 * Smooth Stop
 * =========================================================
 */


/* =========================================================
   FLOATING CONTAINER
   ========================================================= */

.sfb-floating {
    position: fixed;
    right: 18px;
    bottom: 90px;

    z-index: 9998;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 0;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* =========================================================
   SOCIAL BUTTON
   ========================================================= */

.sfb-button {
    position: relative;

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

    width: 150px;
    height: 150px;

    /*
     * Compact vertical spacing.
     */
    margin: -40px 0;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    text-decoration: none;

    pointer-events: auto;

    -webkit-tap-highlight-color: transparent;

    transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);

    transform-origin: center center;

    will-change: transform;

    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 220ms ease;
}


/* =========================================================
   ICON IMAGE
   ========================================================= */

.sfb-button img {
    display: block;

    width: 150px;
    height: 150px;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: contain;

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

    pointer-events: none;
}


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

.sfb-button:hover {
    transform: scale(1.10);

    filter:
        brightness(1.06)
        drop-shadow(
            0 6px 12px rgba(0, 0, 0, 0.18)
        );
}


/* =========================================================
   AUTOMATIC ANIMATION
   ========================================================= */

.sfb-button.sfb-animate {
    animation:
        sfb-zoom-then-snake
        2200ms
        ease-in-out
        both;
}


/* =========================================================
   ZOOM FIRST → SNAKE SECOND
   ========================================================= */

@keyframes sfb-zoom-then-snake {

    /* -----------------------------------------------------
       START
       ----------------------------------------------------- */

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }


    /* -----------------------------------------------------
       ZOOM IN
       ----------------------------------------------------- */

    12% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1.20);
    }


    /* -----------------------------------------------------
       HOLD ZOOM
       ----------------------------------------------------- */

    24% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1.20);
    }


    /* -----------------------------------------------------
       ZOOM OUT
       ----------------------------------------------------- */

    38% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(0.88);
    }


    /* -----------------------------------------------------
       NORMAL SIZE
       ----------------------------------------------------- */

    50% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }


    /* =====================================================
       SNAKE PHASE
       ===================================================== */


    /* LEFT */

    60% {
        transform:
            translate3d(-12px, 0, 0)
            rotate(-5deg)
            scale(1);
    }


    /* RIGHT */

    69% {
        transform:
            translate3d(12px, 0, 0)
            rotate(5deg)
            scale(1);
    }


    /* LEFT */

    77% {
        transform:
            translate3d(-10px, 0, 0)
            rotate(-4deg)
            scale(1);
    }


    /* RIGHT */

    85% {
        transform:
            translate3d(9px, 0, 0)
            rotate(3.5deg)
            scale(1);
    }


    /* SMALL LEFT */

    92% {
        transform:
            translate3d(-4px, 0, 0)
            rotate(-2deg)
            scale(1);
    }


    /* -----------------------------------------------------
       SMOOTH STOP
       ----------------------------------------------------- */

    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.sfb-button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;

    box-shadow:
        0 0 0 6px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   SCREEN READER TEXT
   ========================================================= */

.sfb-screen-reader-text {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .sfb-floating {
        right: 12px;
        bottom: 75px;
    }

    .sfb-button {
        width: 130px;
        height: 130px;

        margin: -34px 0;
    }

    .sfb-button img {
        width: 130px;
        height: 130px;
    }
}


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

@media (max-width: 480px) {

    .sfb-floating {
        right: 8px;
        bottom: 70px;
    }

    .sfb-button {
        width: 120px;
        height: 120px;

        margin: -32px 0;
    }

    .sfb-button img {
        width: 120px;
        height: 120px;
    }
}


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

@media (max-width: 360px) {

    .sfb-floating {
        right: 6px;
        bottom: 65px;
    }

    .sfb-button {
        width: 110px;
        height: 110px;

        margin: -30px 0;
    }

    .sfb-button img {
        width: 110px;
        height: 110px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sfb-button,
    .sfb-button:hover {
        transition: none;
    }

    .sfb-button.sfb-animate {
        animation: none;
    }
}