/**
 * Shois Chat Button — Entrance Animations
 *
 * 10 entrance keyframes for how the button first appears on page.
 * All animations use only transform and opacity (GPU-composited).
 *
 * @package ShoisChatButton
 */

/* ─── Fade In ───────────────────────────────────────── */
@keyframes scb-enter-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.shcb-enter-fade {
    animation: scb-enter-fade 600ms ease forwards;
}

/* ─── Slide Up ──────────────────────────────────────── */
@keyframes scb-enter-slideup {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shcb-enter-slideup {
    animation: scb-enter-slideup 500ms ease-out forwards;
}

/* ─── Slide Down ────────────────────────────────────── */
@keyframes scb-enter-slidedown {
    from {
        opacity: 0;
        transform: translateY(-60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shcb-enter-slidedown {
    animation: scb-enter-slidedown 500ms ease-out forwards;
}

/* ─── Slide Right ───────────────────────────────────── */
@keyframes scb-enter-slideright {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.shcb-enter-slideright {
    animation: scb-enter-slideright 500ms ease-out forwards;
}

/* ─── Zoom In ───────────────────────────────────────── */
@keyframes scb-enter-zoom {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.shcb-enter-zoom {
    animation: scb-enter-zoom 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── Bounce In ─────────────────────────────────────── */
@keyframes scb-enter-bounce {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.shcb-enter-bounce {
    animation: scb-enter-bounce 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── Flip In ───────────────────────────────────────── */
@keyframes scb-enter-flip {
    from {
        opacity: 0;
        transform: perspective(600px) rotateY(-90deg);
    }

    to {
        opacity: 1;
        transform: perspective(600px) rotateY(0);
    }
}

.shcb-enter-flip {
    animation: scb-enter-flip 500ms ease-out forwards;
}

/* ─── Roll In ───────────────────────────────────────── */
@keyframes scb-enter-roll {
    from {
        opacity: 0;
        transform: translateX(-200px) rotate(-180deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}

.shcb-enter-roll {
    animation: scb-enter-roll 600ms ease-out forwards;
}

/* ─── Pop ───────────────────────────────────────────── */
@keyframes scb-enter-pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    60% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.shcb-enter-pop {
    animation: scb-enter-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── Rubber Band ───────────────────────────────────── */
@keyframes scb-enter-rubber {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    30% {
        opacity: 1;
        transform: scaleX(1.4) scaleY(0.75);
    }

    50% {
        transform: scaleX(0.8) scaleY(1.15);
    }

    70% {
        transform: scaleX(1.1) scaleY(0.9);
    }

    85% {
        transform: scaleX(0.95) scaleY(1.05);
    }

    100% {
        transform: scaleX(1) scaleY(1);
    }
}

.shcb-enter-rubber {
    animation: scb-enter-rubber 600ms ease-out forwards;
}