/**
 * Shois Chat Button — Attention/Idle Animations
 *
 * 12 looping idle animations to draw attention to the widget.
 * All use only transform, opacity, and box-shadow (GPU-friendly).
 *
 * @package ShoisChatButton
 */

/* ─── Pulse Ring ────────────────────────────────────── */
@keyframes scb-idle-pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--scb-primary-rgb, 37, 211, 102), 0.5);
    }

    100% {
        box-shadow: 0 0 0 18px rgba(var(--scb-primary-rgb, 37, 211, 102), 0);
    }
}

.shcb-idle-pulse {
    animation: scb-idle-pulse-ring 1.8s ease-out;
}

/* ─── Bounce ────────────────────────────────────────── */
@keyframes scb-idle-bounce-kf {

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

    50% {
        transform: translateY(-8px);
    }
}

.shcb-idle-bounce {
    animation: scb-idle-bounce-kf 0.6s ease-in-out;
}

/* ─── Shake ─────────────────────────────────────────── */
@keyframes scb-idle-shake-kf {

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

    15% {
        transform: translateX(-4px);
    }

    30% {
        transform: translateX(4px);
    }

    45% {
        transform: translateX(-3px);
    }

    60% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(2px);
    }
}

.shcb-idle-shake {
    animation: scb-idle-shake-kf 0.6s ease-in-out;
}

/* ─── Heartbeat ─────────────────────────────────────── */
@keyframes scb-idle-heartbeat-kf {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.12);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.12);
    }

    70% {
        transform: scale(1);
    }

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

.shcb-idle-heartbeat {
    animation: scb-idle-heartbeat-kf 1.4s ease-in-out;
}

/* ─── Jello ─────────────────────────────────────────── */
@keyframes scb-idle-jello-kf {

    0%,
    100% {
        transform: skewX(0) skewY(0);
    }

    20% {
        transform: skewX(-6deg) skewY(-3deg);
    }

    40% {
        transform: skewX(5deg) skewY(2deg);
    }

    60% {
        transform: skewX(-3deg) skewY(-1deg);
    }

    80% {
        transform: skewX(2deg) skewY(1deg);
    }
}

.shcb-idle-jello {
    animation: scb-idle-jello-kf 0.9s ease-in-out;
}

/* ─── Swing ─────────────────────────────────────────── */
@keyframes scb-idle-swing-kf {

    0%,
    100% {
        transform: rotate(0deg);
        transform-origin: top center;
    }

    20% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-8deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-3deg);
    }
}

.shcb-idle-swing {
    animation: scb-idle-swing-kf 0.8s ease-in-out;
}

/* ─── Tada ──────────────────────────────────────────── */
@keyframes scb-idle-tada-kf {
    0% {
        transform: scale(1) rotate(0deg);
    }

    10% {
        transform: scale(0.9) rotate(-3deg);
    }

    20% {
        transform: scale(0.9) rotate(-3deg);
    }

    30% {
        transform: scale(1.1) rotate(3deg);
    }

    40% {
        transform: scale(1.1) rotate(-3deg);
    }

    50% {
        transform: scale(1.1) rotate(3deg);
    }

    60% {
        transform: scale(1.1) rotate(-3deg);
    }

    70% {
        transform: scale(1.1) rotate(3deg);
    }

    80% {
        transform: scale(1.1) rotate(-3deg);
    }

    90% {
        transform: scale(1.1) rotate(3deg);
    }

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

.shcb-idle-tada {
    animation: scb-idle-tada-kf 1s ease-in-out;
}

/* ─── Neon Glow ─────────────────────────────────────── */
@keyframes scb-idle-neon-kf {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(var(--scb-primary-rgb, 37, 211, 102), 0.4),
            0 0 20px rgba(var(--scb-primary-rgb, 37, 211, 102), 0.2);
    }

    50% {
        box-shadow: 0 0 16px rgba(var(--scb-primary-rgb, 37, 211, 102), 0.7),
            0 0 40px rgba(var(--scb-primary-rgb, 37, 211, 102), 0.4),
            0 0 60px rgba(var(--scb-primary-rgb, 37, 211, 102), 0.15);
    }
}

.shcb-idle-neon {
    animation: scb-idle-neon-kf 2s ease-in-out;
}

/* ─── Float ─────────────────────────────────────────── */
@keyframes scb-idle-float-kf {

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

    50% {
        transform: translateY(-8px);
    }
}

.shcb-idle-float {
    animation: scb-idle-float-kf 3s ease-in-out;
}

/* ─── Wave ──────────────────────────────────────────── */
@keyframes scb-idle-wave-kf {

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

    15% {
        transform: rotate(14deg);
    }

    30% {
        transform: rotate(-8deg);
    }

    45% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(6deg);
    }
}

.shcb-idle-wave {
    animation: scb-idle-wave-kf 2.5s ease-in-out;
    transform-origin: 70% 70%;
}

/* ─── Ripple ────────────────────────────────────────── */
@keyframes scb-idle-ripple-kf-1 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--scb-primary-rgb, 37, 211, 102), 0.35);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(var(--scb-primary-rgb, 37, 211, 102), 0);
    }
}

@keyframes scb-idle-ripple-kf-2 {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--scb-primary-rgb, 37, 211, 102), 0.25);
    }

    100% {
        box-shadow: 0 0 0 30px rgba(var(--scb-primary-rgb, 37, 211, 102), 0);
    }
}

.shcb-idle-ripple {
    animation: scb-idle-ripple-kf-1 1.5s ease-out;
}

/* ─── Flash ─────────────────────────────────────────── */
@keyframes scb-idle-flash-kf {

    0%,
    100% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }
}

.shcb-idle-flash {
    animation: scb-idle-flash-kf 1s ease-in-out;
}