/* Animațiile din „Învăț” pentru adunarea, scăderea și problemele (invata-operatii.js).
   Toate clasele încep cu „ao-”. Momentul fiecărei mișcări vine din JS, în
   proprietățile --t și --t2; animațiile păstrează starea finală (both). */

/* ---------- mișcările de bază ---------- */
@keyframes ao-apare { from { opacity: 0; transform: scale(0.3); } }
@keyframes ao-apare-simplu { from { opacity: 0; } }
@keyframes ao-intra { from { opacity: 0; transform: translateY(14px); } }
@keyframes ao-iese { to { opacity: 0; transform: scale(0.3); } }
@keyframes ao-vine { from { transform: translateX(60vw); } }
@keyframes ao-paseste { 50% { transform: translateY(-7px) rotate(-6deg); } }
@keyframes ao-pleaca { 25% { transform: translateY(-12px); opacity: 1; } to { transform: translate(36px, -80px) rotate(18deg); opacity: 0; } }
@keyframes ao-taie { from { transform: rotate(-35deg) scaleX(0); } to { transform: rotate(-35deg) scaleX(1); } }
@keyframes ao-estompeaza { to { opacity: 0.35; } }
@keyframes ao-cadru { to { box-shadow: 0 0 0 4px var(--verde); background: var(--verde-pal); } }
@keyframes ao-cadru-portocaliu { to { box-shadow: 0 0 0 4px var(--portocaliu); background: #fff2e3; } }
@keyframes ao-uneste { to { background: transparent; } }
@keyframes ao-strange { to { max-width: 0; margin: 0; opacity: 0; } }
@keyframes ao-lumina { to { background: #fff3c4; } }
@keyframes ao-lumina-jeton { to { background: #fff3c4; box-shadow: 0 0 0 3px #f1c40f; } }
@keyframes ao-potrivit { to { background: var(--verde-pal); box-shadow: 0 0 0 3px var(--verde); color: var(--verde); } }
@keyframes ao-clipeste { 0%, 100% { background: transparent; } 20%, 60% { background: #ffd65a; } 40%, 80% { background: #fff3c4; } }
@keyframes ao-muta { from { transform: translate(var(--dx), var(--dy)); } }
@keyframes ao-muta-jeton { from { transform: translate(var(--dx), var(--dy)); color: var(--portocaliu); } }
@keyframes ao-deseneaza { to { stroke-dashoffset: 0; } }
@keyframes ao-nr-axa { to { fill: #d9534f; } }
@keyframes ao-creste { from { transform: scaleX(0); } }
@keyframes ao-plina { to { box-shadow: 0 0 0 4px var(--verde); background: var(--verde-pal); } }

.ao-intra { animation: ao-intra 0.45s ease-out var(--t) both; }
.ao-apare { animation: ao-apare 0.35s ease-out var(--t) both; }

/* ---------- obiectele de numărat ---------- */
.ao-op { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; font-size: clamp(1.7rem, 6.4vw, 2.8rem); }
.ao-op .text-mare, .ao-randuri .text-mare { font-size: clamp(1.7rem, 5.6vw, 2.8rem); }
.ao-op__scena { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 20px; animation: ao-cadru 0.5s var(--t) both; }
.ao-grup { display: flex; flex-direction: column; align-items: center; }
.ao-grup__ob { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 8px; border-radius: 14px; background: var(--albastru-pal); animation: ao-uneste 0.5s var(--t2) both; }
.ao-cinci { display: flex; white-space: nowrap; }
.ao-ob { position: relative; display: inline-block; width: 1.3em; line-height: 1.25; text-align: center; }
.ao-ob__e { display: inline-block; }
.ao-ob--apare { animation: ao-apare 0.35s ease-out var(--t) both; }
.ao-ob--vine { animation: ao-vine 1.2s ease-out var(--t) both; }
.ao-ob--vine .ao-ob__e { animation: ao-paseste 0.28s ease-in-out var(--t) 4; }
/* Obiectul luat pleacă; în locul lui rămâne un cerc punctat. */
.ao-ob--pleaca::before { content: ''; position: absolute; inset: 0.08em 0.1em; border: 3px dashed #9aa9c4; border-radius: 50%; animation: ao-apare-simplu 0.4s var(--t2) both; }
.ao-ob--pleaca .ao-ob__e { animation: ao-pleaca 1s ease-in var(--t2) both; }
/* Obiectul luat se taie cu o linie. */
.ao-ob--taiat::after { content: ''; position: absolute; left: 0; right: 0; top: 48%; height: 4px; border-radius: 2px; background: var(--rosu); animation: ao-taie 0.4s ease-out var(--t2) both; }
.ao-ob--taiat .ao-ob__e { animation: ao-estompeaza 0.4s var(--t2) both; }
.ao-nr { position: absolute; top: -0.25em; right: -0.2em; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 0.85rem; font-weight: 900; line-height: 1; animation: ao-apare 0.3s var(--t) both; }
.ao-semn { display: inline-block; overflow: hidden; max-width: 2em; margin: 0 0.25em; color: var(--albastru-inchis); font-weight: 900; text-align: center; animation: ao-strange 0.5s var(--t2) both; }
.ao-semn__x { display: inline-block; animation: ao-apare 0.35s var(--t) both; }
.ao-gol { min-width: 2.2em; align-items: center; border: 3px dashed #9aa9c4; background: #fff; }
.ao-eticheta { display: block; margin-top: 4px; color: var(--cerneala-slaba); font-size: 1.15rem; font-weight: 800; text-align: center; animation: ao-intra 0.4s var(--t) both; }
.ao-etichete { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }

/* ---------- numele numerelor (termen, sumă, diferență) ---------- */
.ao-etichetat { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 4px 12px; padding: 0 1.4em; }
.ao-etichetat__col { display: flex; flex-direction: column; align-items: center; }
.ao-etichetat__nume { display: flex; flex-direction: column; align-items: center; width: 0; white-space: nowrap; color: var(--portocaliu); font-size: 1.2rem; font-weight: 900; animation: ao-intra 0.45s var(--t) both; }
.ao-etichetat__sageata { font-size: 1.4rem; line-height: 1; }
.ao-jeton { display: inline-block; min-width: 0.7em; padding: 0 0.14em; border-radius: 12px; color: var(--albastru-inchis); font-size: clamp(1.9rem, 6.6vw, 3rem); font-weight: 900; line-height: 1.25; text-align: center; white-space: nowrap; }
.ao-jeton--aratat { animation: ao-lumina-jeton 0.4s var(--t2) both; }
.ao-jeton--card { padding: 0.05em 0.4em; border: 3px solid var(--linie); background: #fff; }

/* ---------- axa numerelor ---------- */
.ao-axa { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.ao-axa__desen { display: block; width: min(100%, 760px); }
.ao-axa__desen svg { display: block; width: 100%; height: auto; }
.ao-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ao-deseneaza 0.6s ease-in-out var(--t) both; }
.ao-svg-apare { transform-box: fill-box; transform-origin: center; animation: ao-apare 0.35s var(--t) both; }
.ao-axa__nr { animation: ao-nr-axa 0.3s var(--t) both; }

/* ---------- schimbarea locului ---------- */
@keyframes ao-schimb-sus { 50% { transform: translate(calc(var(--dx) / 2), -0.8em); } to { transform: translateX(var(--dx)); } }
@keyframes ao-schimb-jos { 50% { transform: translate(calc(var(--dx) / 2), 0.8em); } to { transform: translateX(var(--dx)); } }
@keyframes ao-schimb-drept { to { transform: translateX(var(--dx)); } }
.ao-schimb { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ao-schimb__rand { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.3em; padding: 0.9em 0 0.9em; font-size: clamp(1.4rem, 5.4vw, 2.4rem); }
.ao-schimb__el { animation: ao-schimb-drept 1s ease-in-out var(--t) both; }
.ao-schimb__el--sus { animation: ao-schimb-sus 1s ease-in-out var(--t) both; }
.ao-schimb__el--jos { animation: ao-schimb-jos 1s ease-in-out var(--t) both; }
.ao-schimb__el.ao-evidentiat { animation: ao-schimb-drept 1s ease-in-out var(--t) both, ao-lumina-jeton 0.4s var(--t2) both; }
.ao-schimb__el--sus.ao-evidentiat { animation: ao-schimb-sus 1s ease-in-out var(--t) both, ao-lumina-jeton 0.4s var(--t2) both; }
.ao-schimb__el--jos.ao-evidentiat { animation: ao-schimb-jos 1s ease-in-out var(--t) both, ao-lumina-jeton 0.4s var(--t2) both; }
.ao-schimb .text-mare { font-size: clamp(1.7rem, 5.6vw, 2.8rem); }
.ao-grupmic { flex-direction: column; font-size: 1em; }
.ao-asteapta .ao-schimb__el, .ao-schimb__rand.ao-asteapta > * { animation: none !important; }
.ao-coloana-desene { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

/* ---------- trei termeni ---------- */
.ao-grupare { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: clamp(1.5rem, 5.4vw, 2.4rem); }
.ao-grupare__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25em; }
.ao-grupare__pereche { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 16px; animation: ao-cadru-portocaliu 0.5s var(--t) both; }
.ao-grupare__tot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 20px; animation: ao-cadru 0.5s var(--t) both; }
.ao-grupare__eticheta { color: #b35c00; font-size: 1.35rem; font-weight: 900; }
.ao-grupare__eticheta--tot { color: var(--verde); font-size: 1.6rem; }
.ao-semn-mic { color: var(--albastru-inchis); font-weight: 900; }

/* ---------- rânduri care apar unul sub altul ---------- */
.ao-randuri { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ao-randuri--text .text-mare { font-size: clamp(1.35rem, 4.8vw, 2.2rem); }
.ao-sir { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: clamp(1.4rem, 5vw, 2.1rem); }
.ao-sir__ob { display: flex; align-items: center; padding: 2px 8px; border-radius: 12px; background: var(--albastru-pal); letter-spacing: 2px; }
.ao-sir__bara { width: 3px; height: 1.1em; margin: 0 6px; border-radius: 2px; background: var(--cerneala-slaba); }
.ao-sir__nou { animation: ao-apare 0.4s var(--t) both; }
.ao-sir__calcul { color: var(--albastru-inchis); font-size: 1.05em; font-weight: 900; white-space: nowrap; }

/* ---------- un număr desfăcut în două ---------- */
.ao-desc { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ao-desc__arbore { display: flex; flex-direction: column; align-items: center; }
.ao-desc__linii { display: block; width: 130px; }
.ao-desc__linii svg { display: block; width: 100%; height: auto; }
.ao-desc__jos { display: flex; gap: 46px; }

/* ---------- rama de zece ---------- */
.ao-rama-zece { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.ao-rama-zece__rame { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; }
.ao-rama-zece__col { display: flex; flex-direction: column; align-items: center; }
.ao-rama-zece__col .ao-eticheta { color: var(--verde); font-size: 1.6rem; }
.ao-rama { --c: clamp(30px, 8.4vw, 52px); display: grid; grid-template-columns: repeat(5, var(--c)); gap: 4px; padding: 6px; border: 3px solid var(--cerneala); border-radius: 10px; background: #fff; animation: ao-plina 0.5s var(--t) both; }
.ao-rama__loc { display: grid; place-items: center; width: var(--c); height: var(--c); border: 2px solid var(--linie); border-radius: 6px; }
.ao-bulina { display: block; width: 78%; height: 78%; border-radius: 50%; }
.ao-bulina--rosie { background: radial-gradient(circle at 35% 30%, #ff9a96, var(--rosu)); }
.ao-bulina__fata { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9cc2ff, var(--albastru)); animation: ao-apare 0.35s var(--t) both; }
.ao-bulina--muta { position: relative; z-index: 1; animation: ao-muta 0.6s ease-in-out var(--t) both; }
.ao-asteapta .ao-bulina--muta { visibility: hidden; animation: none; }

/* ---------- bețișoare în tabelul Z | U ---------- */
.ao-zu-op { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ao-zu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); width: min(100%, 600px); border: 3px solid var(--linie); border-radius: 16px; background: #fff; }
.ao-zu__col { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 6px; }
.ao-zu__col + .ao-zu__col { border-left: 3px solid var(--linie); }
.ao-zu__cap { color: var(--cerneala-slaba); font-size: 1.3rem; font-weight: 900; }
.ao-zu__bete { display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 8px 6px; width: 100%; min-height: 84px; padding: 6px 0; }
.ao-zu__cifra { display: grid; justify-items: center; }
.ao-cifra { grid-area: 1 / 1; color: var(--albastru-inchis); font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 900; }
.ao-cifra--veche { animation: ao-iese 0.4s var(--t) both; }
.ao-cifra--noua { color: var(--verde); animation: ao-apare 0.4s var(--t) both; }
.ao-bat { position: relative; display: inline-block; flex: none; width: 12px; height: 60px; }
.ao-bat__lemn { position: absolute; inset: 0 2px; border-radius: 3px; background: #e0a800; }
.ao-bat--apare { animation: ao-apare 0.3s var(--t) both; }
.ao-bat--vine { animation: ao-vine 1.1s ease-out var(--t) both; }
.ao-manunchi { position: relative; display: inline-block; flex: none; padding: 0 3px; }
.ao-manunchi__lemn { position: relative; display: flex; gap: 2px; height: 60px; }
.ao-manunchi__bat { width: 4px; border-radius: 2px; background: #e0a800; }
.ao-manunchi__lemn::after { content: ''; position: absolute; left: -3px; right: -3px; top: 42%; height: 9px; border-radius: 4px; background: var(--rosu); }
.ao-manunchi--apare { animation: ao-apare 0.3s var(--t) both; }
.ao-manunchi--vine { animation: ao-vine 1.1s ease-out var(--t) both; }
@keyframes ao-nou { from { opacity: 0; transform: translateX(60px) scale(0.4); } 70% { box-shadow: 0 0 0 4px var(--verde); } to { box-shadow: 0 0 0 4px var(--verde); border-radius: 6px; } }
.ao-manunchi--nou { border-radius: 6px; animation: ao-nou 0.7s ease-out var(--t) both; }
.ao-plus-unu { position: absolute; top: -0.2em; left: 100%; padding-left: 2px; color: var(--verde); font-size: 1.1rem; font-weight: 900; animation: ao-apare 0.35s var(--t) both; }
/* Zece bețișoare se strâng, se leagă și trec la zeci. */
@keyframes ao-strange-zece { to { gap: 0; background: #fff3c4; } }
@keyframes ao-dispare-zece { to { opacity: 0; max-width: 0; padding: 0; margin: 0; transform: translateX(-40px); } }
.ao-zece-noua { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 6px; max-width: 320px; padding: 2px; border-radius: 6px; animation: ao-strange-zece 0.6s var(--t) both, ao-dispare-zece 0.7s var(--t2) both; }
.ao-zece-noua::after { content: ''; position: absolute; left: 0; right: 0; top: 42%; height: 9px; border-radius: 4px; background: var(--rosu); animation: ao-apare-simplu 0.3s calc(var(--t) + 0.6s) both; }
/* Un mănunchi se desface: legătura dispare, bețișoarele trec la unități. */
@keyframes ao-desfa { to { gap: 6px; } }
.ao-manunchi--desfacut { animation: ao-apare 0.3s var(--t) both, ao-dispare-zece 0.6s calc(var(--t2) + 0.6s) both; }
.ao-manunchi--desfacut .ao-manunchi__lemn { animation: ao-desfa 0.5s var(--t2) both; }
.ao-manunchi--desfacut .ao-manunchi__lemn::after { animation: ao-iese 0.4s var(--t2) both; }
.ao-zece-desfacuta { display: contents; }
/* Bețișoarele luate pleacă; locul lor rămâne marcat punctat. */
.ao-pleaca::before { content: ''; position: absolute; inset: 0; border: 2px dashed #9aa9c4; border-radius: 4px; animation: ao-apare-simplu 0.4s var(--t2) both; }
.ao-pleaca > .ao-bat__lemn, .ao-pleaca > .ao-manunchi__lemn { animation: ao-pleaca 1s ease-in var(--t2) both; }

/* ---------- calculul în coloană ---------- */
.ao-coloana { border-collapse: collapse; font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; }
.ao-coloana td { min-width: 1.3em; padding: 0 8px; text-align: center; }
.ao-cif { display: inline-block; }
.ao-coloana__cap td { color: var(--cerneala-slaba); font-size: 0.55em; }
.ao-coloana__tinut td { color: var(--rosu); font-size: 0.5em; }
.ao-coloana__linie td { border-bottom: 4px solid var(--cerneala); }
.ao-coloana__rezultat td { color: var(--verde); }
.ao-col--lumina { animation: ao-lumina 0.4s var(--t) both; }
.ao-clipeste { animation: ao-clipeste 1.2s var(--t2) both; }
.ao-clipeste-col { animation: ao-clipeste 1s var(--t) both; }

/* ---------- proba: rezultatul trece în operația inversă ---------- */
.ao-intoarce { display: grid; grid-template-columns: repeat(5, auto) 1.3em; align-items: center; justify-content: center; gap: 10px 0.3em; }
.ao-intoarce .ao-jeton { font-size: clamp(1.7rem, 6.2vw, 2.8rem); }
.ao-jeton--muta { position: relative; z-index: 1; animation: ao-muta-jeton 0.8s ease-in-out var(--t) both; }
.ao-asteapta .ao-jeton--muta { visibility: hidden; animation: none !important; }
.ao-jeton.ao-potrivit { animation: ao-apare 0.35s ease-out var(--t) both, ao-potrivit 0.4s var(--t2) both; }
.ao-jeton--muta.ao-potrivit { animation: ao-muta-jeton 0.8s ease-in-out var(--t) both, ao-potrivit 0.4s var(--t2) both; }
.ao-intoarce__semn { display: flex; justify-content: center; }
.ao-bifa { display: inline-block; color: var(--verde); font-size: 2rem; font-weight: 900; }
.ao-necunoscut { display: inline-grid; justify-items: center; }
.ao-necunoscut > * { grid-area: 1 / 1; }
.ao-necunoscut__q { animation: ao-iese 0.4s var(--t) both; }
.ao-necunoscut__v { color: var(--verde); animation: ao-apare 0.4s var(--t) both; }

/* ---------- problemele desenate cu bare ---------- */
.ao-bare { display: flex; flex-direction: column; gap: 12px; width: min(100%, 640px); }
.ao-bare__rand { display: grid; grid-template-columns: minmax(3em, auto) minmax(0, 1fr) 2.4em; align-items: center; gap: 10px; }
.ao-bare__nume { max-width: 7em; font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.ao-bare__cadru { display: flex; height: 48px; }
.ao-bare__seg { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; border: 2px solid var(--albastru); background: #a9c8ff; transform-origin: left center; animation: ao-creste 0.6s ease-out var(--t) both; }
.ao-bare__seg + .ao-bare__seg { border-left-width: 0; }
.ao-bare__seg--b { border-color: var(--verde); background: #9fe2b6; }
@keyframes ao-estompeaza-bara { to { opacity: 0.55; } }
.ao-bare__seg--taiat { animation: ao-creste 0.6s ease-out var(--t) both, ao-estompeaza-bara 0.5s var(--t2) both; }
.ao-bare__seg--taiat::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(217, 83, 79, 0.85) 7px 11px); animation: ao-apare-simplu 0.4s var(--t2) both; }
.ao-bare__seg--gol { border: 3px dashed var(--cerneala-slaba); background: #fff; }
.ao-bare__seg--tot { border: 3px solid #c79a1c; border-radius: 8px; background: #fff3c4; }
.ao-bare__text { position: relative; z-index: 1; display: inline-block; color: var(--cerneala); font-size: 1.25rem; font-weight: 900; }
.ao-bare__val { color: var(--albastru-inchis); font-size: 1.5rem; text-align: left; }
.ao-bare__total { margin: 4px 0 0; color: var(--albastru-inchis); font-size: 1.35rem; font-weight: 900; text-align: center; }

/* ---------- desenul unei probleme ---------- */
.ao-enunt { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; font-size: clamp(1.7rem, 6.2vw, 2.6rem); }
.ao-enunt__texte { display: flex; flex-direction: column; gap: 6px; width: min(100%, 560px); }
.ao-enunt__rand { margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--albastru-pal); font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.ao-enunt__rand--intrebare { background: #fde2ef; font-weight: 900; }
.ao-enunt .text-mare { font-size: clamp(1.7rem, 5.6vw, 2.8rem); }

@media (max-width: 640px) {
  .ao-bat { width: 10px; height: 48px; }
  .ao-manunchi__lemn { gap: 1px; height: 48px; }
  .ao-manunchi__bat { width: 3px; }
  .ao-zu__bete { gap: 6px 4px; min-height: 64px; }
  .ao-zece-noua { gap: 2px; }
  .ao-zece-noua .ao-bat { width: 8px; }
  .ao-op { font-size: clamp(1.45rem, 6vw, 2.8rem); }
  .ao-bare__rand { gap: 6px; }
  .ao-bare__nume { font-size: 1rem; }
  .ao-bare__cadru { height: 42px; }
  .ao-desc__jos { gap: 34px; }
  .ao-etichetat__nume { font-size: 1.05rem; }
}

/* Fără mișcare: se arată direct starea de la sfârșitul animațiilor. */
@media (prefers-reduced-motion: reduce) {
  [class*='ao-'], [class*='ao-']::before, [class*='ao-']::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* Bețișoarele în tabelul Z | U, încet: mișcările durează mai mult. */
.ao-zu-op--lent .ao-bat--apare, .ao-zu-op--lent .ao-manunchi--apare { animation-duration: 0.6s; }
.ao-zu-op--lent .ao-bat--vine, .ao-zu-op--lent .ao-manunchi--vine { animation-duration: 1.8s; }
.ao-zu-op--lent .ao-pleaca > .ao-bat__lemn, .ao-zu-op--lent .ao-pleaca > .ao-manunchi__lemn { animation-duration: 1.8s; }
.ao-zu-op--lent .ao-manunchi--desfacut .ao-manunchi__lemn { animation-duration: 1.2s; }
.ao-zu-op--lent .ao-cifra--veche, .ao-zu-op--lent .ao-cifra--noua { animation-duration: 0.8s; }