/* Feature icons on demo MM Kiosk — soft motions/colors from tablet kiosk UI */

.mm-kiosk-feature-list .mm-kiosk-feat-icon {
    display: inline-flex;
    position: relative;
    transform-origin: center center;
}

/* Drukte: slow color cycle (normal → busy → paused), no bounce */
.mm-kiosk-feat-icon--drukte {
    animation: mm-kiosk-feat-drukte-color 9s ease-in-out infinite;
}

/* Keukentickets: warn yellow ↔ paused blue (.printer-poll-status), soft nudge */
.mm-kiosk-feat-icon--tickets {
    animation:
        mm-kiosk-feat-printer-color 6s ease-in-out infinite,
        mm-kiosk-feat-printer-nudge 3.2s ease-in-out infinite;
}

/* Klantenkaart: light opacity breath, no ripple ring */
.mm-kiosk-feat-icon--scan {
    animation: mm-kiosk-feat-scan-pulse 3.2s ease-in-out infinite;
}

/* Kortingscodes: tiny spring, mostly idle */
.mm-kiosk-feat-icon--codes {
    animation: mm-kiosk-feat-code-pop 4.5s ease-in-out infinite;
}

@keyframes mm-kiosk-feat-drukte-color {
    0%,
    28% {
        color: #16a34a;
        background: #f0fdf4;
    }
    36%,
    62% {
        color: #ca8a04;
        background: #fefce8;
    }
    70%,
    94% {
        color: #dd2c5d;
        background: #fef2f5;
    }
    100% {
        color: #16a34a;
        background: #f0fdf4;
    }
}

/* Yellow = stale/warn, blue = paused (tablet printer status) */
@keyframes mm-kiosk-feat-printer-color {
    0%,
    42% {
        color: #ca8a04;
        background: #fefce8;
        box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.2);
    }
    50%,
    92% {
        color: #0284c7;
        background: #f0f9ff;
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.2);
    }
    100% {
        color: #ca8a04;
        background: #fefce8;
        box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.2);
    }
}

@keyframes mm-kiosk-feat-printer-nudge {
    0%,
    70%,
    100% {
        transform: rotate(0deg);
    }
    78% {
        transform: rotate(-5deg);
    }
    86% {
        transform: rotate(5deg);
    }
    93% {
        transform: rotate(-2deg);
    }
}

@keyframes mm-kiosk-feat-scan-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.78;
    }
}

@keyframes mm-kiosk-feat-code-pop {
    0%,
    72%,
    100% {
        transform: scale(1);
    }
    80% {
        transform: scale(1.06);
    }
    88% {
        transform: scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-kiosk-feature-list .mm-kiosk-feat-icon {
        animation: none !important;
    }

    .mm-kiosk-feat-icon--drukte {
        color: #16a34a;
        background: #f0fdf4;
    }

    .mm-kiosk-feat-icon--tickets {
        color: #ca8a04;
        background: #fefce8;
        box-shadow: none;
    }
}