/**
 * ANALOGIEAUFGABEN — DIE ABLEITUNG SICHTBAR MACHEN.
 *
 * Zwei Bewegungen, die genau das Phänomen zeigen:
 *   1. die Zahlen der gelösten Reihe fliegen als Klon nach unten (animation-…js),
 *   2. dort wächst die NULL dazu und aus den Einer-Punkten werden Zehnerstangen.
 * Tempo überall aus --anim-speed (Schieberegler im Einstellungsmenü).
 */

/* Fliegender Klon — rechnet in den Koordinaten von .analogy-screen (position:
   relative), damit die Autofit-Skalierung nichts verzieht. */
.flying-clone {
    position: absolute;
    margin: 0 !important;
    pointer-events: none;
    z-index: 50;
}

/* ===== DIE NULL KOMMT DAZU =====
   Sie steht von Anfang an im Kästchen (kein Layout-Sprung), ist aber unsichtbar,
   bis die Reihe „show-zero" bekommt. */
.task-row.derived .ana-zero {
    opacity: 0;
    transform: scale(0.2);
}

.task-row.derived.show-zero .ana-zero {
    animation: ana-zero-pop calc(var(--anim-speed) * 0.45) forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ana-zero-pop {
    0%   { opacity: 0; transform: scale(0.2) translateY(-40%); }
    60%  { opacity: 1; transform: scale(1.25) translateY(0); }
    100% { opacity: 1; transform: none; }
}

/* ===== AUS EINERN WERDEN ZEHNER =====
   Das Bild der Stufe darüber (Punkte) liegt hinter dem eigenen (Stangen): beim
   Wechsel blendet es aus, während die Stangen von unten hochwachsen. */
.task-row.derived .pv-to {
    opacity: 0;
    transform: scaleY(0.12);
    transform-origin: bottom center;
}

.task-row.derived.show-zero .pv-to {
    opacity: 1;
    transform: none;
    transition: opacity calc(var(--anim-speed) * 0.3) ease,
                transform calc(var(--anim-speed) * 0.5) cubic-bezier(0.34, 1.4, 0.64, 1);
}

.task-row.derived .pv-from {
    opacity: 1;
    transition: opacity calc(var(--anim-speed) * 0.3) ease;
}

.task-row.derived.show-zero .pv-from {
    opacity: 0;
}

/* Ein- und Ausblenden der Boxen/Symbole ruckelfrei. */
.task-row .nb-box {
    transition: opacity calc(var(--anim-speed) * 0.25) ease;
}