/* Real-time change cues — row highlight + bell.
   Spec: docs/superpowers/specs/2026-05-21-realtime-species-updates-design.md */

/* Row highlight: fast fade-in of a tint, slow fade-out. ~2.5s total. */
@keyframes row-flash {
    0%   { background-color: transparent; }
    12%  { background-color: var(--row-flash-color, rgba(99, 190, 123, 0.45)); }
    100% { background-color: transparent; }
}

.row-flash,
.value-flash {
    animation: row-flash 2.5s ease-out;
}

/* Bell: no fade-in (starts fully visible), slow fade-out near the end.
   On-screen for 7s, matched by the JS removal timer in changeHighlight.js. */
@keyframes bell-fade {
    0%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

.change-bell {
    color: var(--bell-color, #3fa34d);
    margin-left: 0.4em;
    animation: bell-fade 7s ease-out forwards;
}

/* Detail view: the bell sits to the LEFT of the changed value. */
.change-bell--detail {
    margin-left: 0;
    margin-right: 0.4em;
}

/* Reduced motion: no row flash at all. The bell still appears — it is an
   informational cue, not decoration — but with no animation. */
@media (prefers-reduced-motion: reduce) {
    .row-flash,
    .value-flash,
    .change-bell {
        animation: none;
    }
}