/**
 * Shois Chat Button — Popup Open/Close Transition Animations
 *
 * 8 popup open keyframes with matching close (reverse) classes.
 * Also includes platform icon expansion and badge animations.
 *
 * @package ShoisChatButton
 */

/* ═══════════════════════════════════════════════════════
   POPUP OPEN ANIMATIONS
   ═══════════════════════════════════════════════════════ */

/* ─── Fade Scale ────────────────────────────────────── */
@keyframes scb-open-fadescale-kf {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

.shcb-open-fadescale .shcb-popup.shcb-popup-visible {
    animation: scb-open-fadescale-kf 300ms ease-out forwards;
}

.shcb-open-fadescale .shcb-popup.shcb-closing {
    animation: scb-open-fadescale-kf 200ms ease-in reverse forwards;
}

/* ─── Slide Up Panel ────────────────────────────────── */
@keyframes scb-open-slideuppanel-kf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.shcb-open-slideuppanel .shcb-popup.shcb-popup-visible {
    animation: scb-open-slideuppanel-kf 350ms ease-out forwards;
}

.shcb-open-slideuppanel .shcb-popup.shcb-closing {
    animation: scb-open-slideuppanel-kf 250ms ease-in reverse forwards;
}

/* ─── Spring Pop ────────────────────────────────────── */
@keyframes scb-open-spring-kf {
    from {
        opacity: 0;
        transform: scale(0);
    }

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

.shcb-open-spring .shcb-popup.shcb-popup-visible {
    animation: scb-open-spring-kf 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.shcb-open-spring .shcb-popup.shcb-closing {
    animation: scb-open-spring-kf 250ms ease-in reverse forwards;
}

/* ─── Flip Open ─────────────────────────────────────── */
@keyframes scb-open-flip-kf {
    from {
        opacity: 0;
        transform: perspective(800px) rotateX(-90deg);
    }

    to {
        opacity: 1;
        transform: perspective(800px) rotateX(0);
    }
}

.shcb-open-flip .shcb-popup.shcb-popup-visible {
    animation: scb-open-flip-kf 400ms ease-out forwards;
    transform-origin: bottom center;
}

.shcb-open-flip .shcb-popup.shcb-closing {
    animation: scb-open-flip-kf 300ms ease-in reverse forwards;
    transform-origin: bottom center;
}

/* ─── Unfold ────────────────────────────────────────── */
@keyframes scb-open-unfold-kf {
    from {
        opacity: 0;
        transform: scaleY(0);
    }

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

.shcb-open-unfold .shcb-popup.shcb-popup-visible {
    animation: scb-open-unfold-kf 300ms ease-out forwards;
    transform-origin: bottom center;
}

.shcb-open-unfold .shcb-popup.shcb-closing {
    animation: scb-open-unfold-kf 200ms ease-in reverse forwards;
    transform-origin: bottom center;
}

/* ─── Door Open ─────────────────────────────────────── */
@keyframes scb-open-door-kf {
    from {
        opacity: 0;
        transform: perspective(800px) rotateY(-90deg);
    }

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

.shcb-open-door .shcb-popup.shcb-popup-visible {
    animation: scb-open-door-kf 400ms ease-out forwards;
    transform-origin: left center;
}

.shcb-open-door .shcb-popup.shcb-closing {
    animation: scb-open-door-kf 300ms ease-in reverse forwards;
    transform-origin: left center;
}

/* ─── Balloon ───────────────────────────────────────── */
@keyframes scb-open-balloon-kf {
    0% {
        opacity: 0;
        transform: scale(0);
    }

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

    70% {
        transform: scale(0.98);
    }

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

.shcb-open-balloon .shcb-popup.shcb-popup-visible {
    animation: scb-open-balloon-kf 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.shcb-open-balloon .shcb-popup.shcb-closing {
    animation: scb-open-balloon-kf 300ms ease-in reverse forwards;
}

/* ─── Blur In ───────────────────────────────────────── */
@keyframes scb-open-blurin-kf {
    from {
        opacity: 0;
        filter: blur(10px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

.shcb-open-blurin .shcb-popup.shcb-popup-visible {
    animation: scb-open-blurin-kf 350ms ease-out forwards;
}

.shcb-open-blurin .shcb-popup.shcb-closing {
    animation: scb-open-blurin-kf 250ms ease-in reverse forwards;
}


/* ═══════════════════════════════════════════════════════
   PLATFORM ICON EXPANSION ANIMATIONS
   ═══════════════════════════════════════════════════════ */

/* ─── Fan Out ───────────────────────────────────────── */
@keyframes shcb-platform-fan-kf {
    from {
        opacity: 0;
        transform: scale(0) translateY(10px);
    }

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

.shcb-platform-fan {
    animation: shcb-platform-fan-kf 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─── Cascade Up ────────────────────────────────────── */
@keyframes shcb-platform-cascade-kf {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

.shcb-platform-cascade {
    animation: shcb-platform-cascade-kf 250ms ease-out both;
}

/* ─── Scatter ───────────────────────────────────────── */
@keyframes shcb-platform-scatter-kf {
    from {
        opacity: 0;
        transform: scale(0);
    }

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

.shcb-platform-scatter {
    animation: shcb-platform-scatter-kf 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─── Instant (no animation) ────────────────────────── */
.shcb-platform-instant {
    /* Icons appear immediately without animation. */
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════
   NOTIFICATION BADGE ANIMATIONS
   ═══════════════════════════════════════════════════════ */

/* ─── Badge Count Up ────────────────────────────────── */
@keyframes shcb-badge-countup-kf {
    from {
        transform: scale(0);
    }

    60% {
        transform: scale(1.3);
    }

    to {
        transform: scale(1);
    }
}

.shcb-badge-countup {
    animation: shcb-badge-countup-kf 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Badge Bounce ──────────────────────────────────── */
@keyframes shcb-badge-bounce-kf {

    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }

    60% {
        transform: translateY(-3px);
    }
}

.shcb-badge-bounce {
    animation: shcb-badge-bounce-kf 600ms ease-in-out;
}

/* ─── Badge Pulse ───────────────────────────────────── */
@keyframes shcb-badge-pulse-kf {

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

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

.shcb-badge-pulse {
    animation: shcb-badge-pulse-kf 1.5s ease-in-out infinite;
}