/* Shake-on-interval: short shake at the start of each period, then idle.
   Usage: add class "shake-on-interval" to any element (e.g. .cardContainer).
   Customize with CSS variables:
     --shake-period   (default 5s)  — full cycle length
     --shake-dist     (default 8px) — horizontal offset for shake
     --shake-rot      (default 1.5deg) — small rotation during shakes
     --shake-offset   (default 0s)  — phase offset (useful to desync)
*/

.shake-on-interval {
    --shake-period: 5s;
    --shake-dist: 8px;
    --shake-rot: 1.5deg;
    --shake-offset: 0s;
    /* Animation runs one short shake then stays still for the remainder of the period */
    animation: shake-interval var(--shake-period) ease-in-out infinite;
    /* Start animation at a phase offset (negative delay to offset within the cycle immediately) */
    animation-delay: calc(var(--shake-offset) * -1);
    animation-fill-mode: both;
    /* Respect user's reduced motion preference */
    will-change: transform;
}

    /* Pause when user hovers / focuses a card */
    .shake-on-interval:hover,
    .shake-on-interval:focus-within {
        animation-play-state: paused;
    }

/* Keyframes: perform the shake within roughly the first 10% of the period, then rest */
@keyframes shake-interval {
    0% {
        transform: none;
    }

    1% {
        transform: translateX(calc(var(--shake-dist) * -1)) rotate(calc(var(--shake-rot) * -1));
    }

    3% {
        transform: translateX(var(--shake-dist)) rotate(var(--shake-rot));
    }

    5% {
        transform: translateX(calc(var(--shake-dist) * -0.6)) rotate(calc(var(--shake-rot) * -0.6));
    }

    7% {
        transform: translateX(calc(var(--shake-dist) * 0.6)) rotate(calc(var(--shake-rot) * 0.6));
    }

    9% {
        transform: translateX(calc(var(--shake-dist) * -0.3)) rotate(calc(var(--shake-rot) * -0.3));
    }

    10% {
        transform: none;
    }

    100% {
        transform: none;
    }
}

/* Accessibility: disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .shake-on-interval {
        animation: none !important;
    }
}