/* public/app/css/copy-flash-motion.css
 * Synopsis: Keyframes flash copie.
 * Objectif: Triple pulse + bannière, reduced-motion.
 */

@keyframes vok-copy-wash {
    0%,
    100% {
        background: var(--dash-input-bg);
        box-shadow: inset 0 0 0 1px rgba(93, 255, 194, 0.04);
        border-color: var(--dash-line);
    }
    12%,
    38%,
    64% {
        background: color-mix(in srgb, var(--dash-accent) 26%, var(--dash-input-bg));
        border-color: color-mix(in srgb, var(--dash-accent) 58%, var(--dash-line));
        box-shadow:
            inset 0 0 0 2px color-mix(in srgb, var(--dash-accent) 42%, transparent),
            0 0 0 5px color-mix(in srgb, var(--dash-accent) 18%, transparent);
    }
    25%,
    51%,
    77% {
        background: color-mix(in srgb, var(--dash-accent) 10%, var(--dash-input-bg));
        border-color: color-mix(in srgb, var(--dash-accent) 34%, var(--dash-line));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dash-accent) 20%, transparent);
    }
}

@keyframes vok-copy-btn {
    0%,
    100% {
        transform: scale(1);
        background: color-mix(in srgb, var(--dash-input-bg) 78%, var(--dash-accent-dim));
        color: color-mix(in srgb, var(--dash-accent) 72%, var(--dash-text));
    }
    12%,
    38%,
    64% {
        transform: scale(1.14);
        background: color-mix(in srgb, var(--dash-accent) 42%, var(--dash-input-bg));
        border-color: color-mix(in srgb, var(--dash-accent) 62%, var(--dash-line));
        color: var(--dash-text);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--dash-accent) 28%, transparent);
    }
}

@keyframes vok-copy-banner {
    0% {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.88);
    }
    10%,
    34%,
    58% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
    }
    22%,
    46% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.98);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -42%) scale(1.02);
    }
}

.dash .dash-copy-flash.dash-copy-flash--on {
    animation: vok-copy-banner 1.45s ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .dash .dash-compose.dash-compose--copied #ws-input.ws-input--copied,
    .dash .dash-compose-ico--copied,
    .dash .dash-copy-flash.dash-copy-flash--on {
        animation: none;
    }

    .dash .dash-compose.dash-compose--copied #ws-input.ws-input--copied {
        background: color-mix(in srgb, var(--dash-accent) 18%, var(--dash-input-bg));
        border-color: color-mix(in srgb, var(--dash-accent) 48%, var(--dash-line));
    }

    .dash .dash-compose-ico--copied {
        background: color-mix(in srgb, var(--dash-accent) 36%, var(--dash-input-bg));
    }

    .dash .dash-copy-flash.dash-copy-flash--on {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}