/**
 * celebration-states.css — Subtle wins feedback
 * -----------------------------------------------
 * Provides lightweight micro-feedback for common interactions (button clicks,
 * form submits). Improves perceived responsiveness without heavy animation.
 *
 * Classes:
 *   .celebration-state--active   — temporary highlight pulse on the element
 *   .celebration-state__toast    — ephemeral status pill near the trigger
 *
 * Accessibility:
 *   - Reduced-motion fallback removes animation, keeps opacity feedback only
 *   - Toast uses aria-live="polite" (set in JS)
 *
 * Chunk 213: Celebration States v1
 */

/* ------------------------------------------------------------------ */
/* Keyframes                                                           */
/* ------------------------------------------------------------------ */

@keyframes celebration-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--celebration-rgb, 59, 130, 246), 0.35); }
    50%  { box-shadow: 0 0 0 6px rgba(var(--celebration-rgb, 59, 130, 246), 0.10); }
    100% { box-shadow: 0 0 0 0 rgba(var(--celebration-rgb, 59, 130, 246), 0); }
}

@keyframes celebration-toast-in {
    0%   { opacity: 0; transform: translateY(4px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes celebration-toast-out {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-4px) scale(0.96); }
}

/* ------------------------------------------------------------------ */
/* Active celebration state                                            */
/* ------------------------------------------------------------------ */

.celebration-state--active {
    animation: celebration-pulse 700ms ease-out;
    /* Avoid interfering with existing outlines */
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Toast pill                                                          */
/* ------------------------------------------------------------------ */

.celebration-state__toast {
    position: absolute;
    z-index: 9999;
    padding: 4px 10px;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 500;
    color: #fff;
    background: rgba(var(--celebration-rgb, 59, 130, 246), 0.88);
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
    animation: celebration-toast-in 200ms ease-out forwards;
}

.celebration-state__toast--out {
    animation: celebration-toast-out 250ms ease-in forwards;
}

/* ------------------------------------------------------------------ */
/* Reduced-motion preference                                           */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .celebration-state--active {
        animation: none;
        /* Subtle opacity flash instead of motion */
        outline: 2px solid rgba(var(--celebration-rgb, 59, 130, 246), 0.25);
        transition: outline-color 300ms ease;
    }

    .celebration-state__toast {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .celebration-state__toast--out {
        animation: none;
        opacity: 0;
    }
}