/* Animațiile din „Învăț” pentru figurile, corpurile, datele și măsurările (invata-masurari.js).
   Toate clasele încep cu „am-”. Fiecare element pornește la momentul din
   --am-i; stilul lui obișnuit este starea de la sfârșitul animației, iar
   cadrele cheie descriu numai începutul. Cu „mișcare redusă” se vede
   direct desenul terminat (blocul de la sfârșitul fișierului). */

/* ---------- comune ---------- */
.am-anim { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.am-desen { display: inline-block; max-width: 100%; }
.am-desen svg { display: block; width: 100%; height: auto; overflow: visible; }
.am-randul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; max-width: 100%; }
.am-eticheta { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 900; color: var(--albastru-inchis); text-align: center; }
.am-eticheta--rosu { color: var(--rosu); }
.am-eticheta--verde { color: var(--verde); }

.am-apare { animation: am-apare 0.45s ease-out var(--am-i, 0s) both; }
@keyframes am-apare { from { opacity: 0; } }
.am-creste { transform-box: fill-box; transform-origin: center; animation: am-creste 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) var(--am-i, 0s) both; }
.am-creste-html { animation: am-creste 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) var(--am-i, 0s) both; }
@keyframes am-creste { from { opacity: 0; transform: scale(0.2); } }
.am-coboara { animation: am-coboara 0.55s ease-out var(--am-i, 0s) both; }
@keyframes am-coboara { from { opacity: 0; transform: translateY(-40px); } }
.am-vine { animation: am-vine 0.6s ease-out var(--am-i, 0s) both; }
@keyframes am-vine { from { opacity: 0; transform: translateX(60px); } }
.am-cade { animation: am-cade 0.45s cubic-bezier(0.5, 0, 0.7, 1.4) var(--am-i, 0s) both; }
@keyframes am-cade { from { opacity: 0; transform: translateY(-70px); } }
/* Linia se desenează de la un capăt la altul (drumul are pathLength="1"). */
.am-linie { stroke-dasharray: 1 1; animation: am-linie var(--am-d, 0.6s) ease-in-out var(--am-i, 0s) both; }
@keyframes am-linie { from { stroke-dashoffset: 1; } }

/* Texte în același loc, unul după altul: fiecare intră la --am-i și
   iese la --am-j; ultimul rămâne. */
.am-succesiune { display: inline-grid; justify-items: center; }
.am-succesiune > * { grid-area: 1 / 1; }
.am-succesiune__pe-rand { opacity: 0; animation: am-intra 0.3s ease-out var(--am-i) both, am-iese 0.3s ease-in var(--am-j) forwards; }
@keyframes am-intra { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-iese { from { opacity: 1; } to { opacity: 0; } }

/* ---------- figuri ---------- */
.am-figura__desen { width: min(100%, 230px); }
.invata-rand .am-figura__desen { width: min(100%, 190px); }
.am-din-obiecte { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.am-din-obiecte__coloana { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; }
.am-din-obiecte__emoji { font-size: 3rem; line-height: 1.1; }
.am-din-obiecte__sageata { font-size: 1.5rem; font-weight: 900; color: var(--cerneala-slaba); }
.am-din-obiecte__figura { width: 70px; }
.am-triunghi { width: clamp(80px, 24vw, 130px); }
.am-intoarce { transform-box: fill-box; transform-origin: center; transform: rotate(var(--am-r)); animation: am-intoarce 1.6s ease-in-out var(--am-i, 0s) both; }
@keyframes am-intoarce { from { transform: rotate(0deg); } }
.am-casa__desen { width: min(100%, 300px); }
.am-casa__piesa { animation: am-coboara 0.6s ease-out var(--am-i) both, am-clipeste 0.9s ease-in-out var(--am-j) both; }
@keyframes am-clipeste { 50% { stroke: #d62828; stroke-width: 7px; } }
.am-casa__legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.am-casa__tip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 12px; background: var(--albastru-pal); border: 2px solid var(--linie); font-size: 1.1rem; }
.am-casa__mic { width: 30px; }

/* ---------- corpuri ---------- */
.am-zar__fete { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.am-zar__fata { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 1.1rem; }
.am-zar__desen { width: clamp(44px, 12vw, 64px); }
.am-urme { gap: 18px; }
.am-urma { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; justify-items: center; column-gap: 8px; }
.am-urma__scena { width: clamp(110px, 30vw, 150px); grid-row: 1 / 3; }
.am-urma__sageata { font-size: 1.8rem; font-weight: 900; color: var(--cerneala-slaba); grid-row: 1 / 3; }
.am-urma__figura { width: clamp(70px, 20vw, 100px); }
.am-urma__nume { grid-column: 3; font-size: 1.2rem; }
.am-apasa { opacity: 0; animation: am-apasa 2s ease-in-out var(--am-i, 0s) both; }
@keyframes am-apasa {
  0% { opacity: 0; transform: translateY(-50px); }
  15% { opacity: 1; transform: translateY(-50px); }
  45%, 62% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-80px); }
}
.am-panta { gap: 6px; width: min(100%, 460px); }
.am-panta__rand { display: flex; flex-direction: column; align-items: center; width: 100%; }
.am-panta__desen { width: 100%; }
.am-panta__text { font-size: 1.15rem; }
.am-muta { transform: translate(var(--am-dx), var(--am-dy)); animation: am-muta var(--am-d, 2.4s) ease-in var(--am-i, 0s) both; }
.am-muta--aluneca { animation-timing-function: ease-out; }
@keyframes am-muta { from { transform: translate(0, 0); } }
.am-rot { transform-box: fill-box; transform-origin: center; transform: rotate(var(--am-r)); animation: am-rot var(--am-d, 2.4s) ease-in var(--am-i, 0s) both; }
@keyframes am-rot { from { transform: rotate(0deg); } }

.am-sortare { width: min(100%, 620px); }
.am-sortare__sursa { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: 16px; background: #fff6e0; border: 2px dashed #e0b44a; font-size: 2rem; }
.am-sortare__pleaca { opacity: 0.18; filter: grayscale(1); animation: am-pleaca 0.4s ease-in var(--am-i) both; }
@keyframes am-pleaca { from { opacity: 1; filter: none; } }
.am-sortare__coloane { display: grid; grid-template-columns: repeat(var(--am-n), minmax(0, 1fr)); gap: 6px; width: 100%; }
.am-sortare__coloana { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 14px; background: var(--albastru-pal); border: 2px solid var(--linie); }
.am-sortare__cap { display: flex; flex-direction: column; align-items: center; font-size: clamp(0.85rem, 2.6vw, 1.1rem); text-align: center; }
.am-sortare__cap .desen--corp { width: clamp(44px, 13vw, 76px); }
.am-sortare__cap .emoji-mare { font-size: clamp(2rem, 7vw, 2.8rem); }
.am-sortare__cutie { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 2.4em; font-size: clamp(1.5rem, 5vw, 2rem); }

/* ---------- date ---------- */
.am-liniute__sir { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 520px; }
.am-liniute__fruct { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; font-size: 1.7rem; background: var(--verde-pal); animation: am-bifat 0.3s ease-out var(--am-i) both; }
@keyframes am-bifat { from { background: transparent; } }
.am-liniute__bifa { position: absolute; right: -4px; bottom: -6px; color: var(--verde); font-size: 1rem; font-weight: 900; }
.am-liniute__tabel td, .am-liniute__tabel th { padding: 6px 10px; }
.am-liniute__bife { min-width: 6.5rem; color: var(--albastru-inchis); font-size: 1.5rem; font-weight: 900; letter-spacing: 4px; }
.am-liniute__linie { display: inline-block; }
.am-liniute__total { min-width: 2rem; font-size: 1.4rem; text-align: center !important; color: var(--verde); }

.am-coloane__grafic { display: flex; align-items: flex-end; justify-content: center; padding: 8px 0 0; }
.am-coloane__coloana { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 0; border-radius: 14px 14px 0 0; }
.am-coloane__coloana > * { padding-inline: clamp(10px, 3.5vw, 20px); }
.am-coloane__coloana--max { background: #fff3c4; animation: am-max 0.5s ease-out var(--am-i) both; }
@keyframes am-max { from { background: transparent; } }
.am-coloane__numar { font-size: 1.6rem; color: var(--albastru-inchis); }
.am-coloane__stiva { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; align-self: stretch; padding-bottom: 4px; border-bottom: 4px solid var(--cerneala); }
.am-coloane__bulina { width: clamp(22px, 6vw, 30px); aspect-ratio: 1; border-radius: 50%; }
.am-coloane__bulina--0 { background: radial-gradient(circle at 35% 30%, #ff9a9a, #d62828 70%); }
.am-coloane__bulina--1 { background: radial-gradient(circle at 35% 30%, #c8f08a, #4c9a1e 70%); }
.am-coloane__bulina--2 { background: radial-gradient(circle at 35% 30%, #fff08a, #d9a400 70%); }
.am-coloane__bulina--3 { background: radial-gradient(circle at 35% 30%, #9ac4ff, #2f6fde 70%); }
.am-coloane__cap { display: flex; flex-direction: column; align-items: center; padding-top: 4px; font-size: 1rem; }
.am-coloane__emoji { font-size: 2rem; line-height: 1.1; }

/* ---------- lungime ---------- */
.am-unitati { width: min(100%, 560px); }
.am-unitati__bara { width: 100%; container-type: inline-size; }
.am-unitati__sir { display: grid; grid-template-columns: repeat(var(--am-n), minmax(0, 1fr)); }
.am-unitati__unitate { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 2px; border: 2px solid var(--albastru); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--albastru-pal); }
.am-unitati__unitate:nth-child(even) { background: var(--albastru-deschis); }
.am-unitati__emoji { display: inline-block; font-size: min(2.6rem, calc(100cqw / var(--am-n) * 0.6)); line-height: 1.1; }
.am-unitati__nr { font-size: 1rem; color: var(--albastru-inchis); }
.am-unitati__obiect { height: 30px; border-radius: 0 0 8px 8px; color: #fff; font-weight: 900; font-size: 1.05rem; line-height: 30px; text-align: center; }

.am-rigla__desen { width: min(100%, 600px); }
.am-rigla__desen svg { overflow: hidden; }
.am-banda { animation: am-banda 1.2s ease-out var(--am-i, 0s) both; }
@keyframes am-banda { from { opacity: 0; transform: translateX(260px); } 20% { opacity: 1; } }

/* ---------- capacitate ---------- */
.am-umple { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.am-umple__desen { width: clamp(150px, 42vw, 240px); }
.am-goleste__desen { width: clamp(100px, 28vw, 150px); }
.am-umple__sir { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; max-width: 240px; min-height: 3.2rem; }
.am-umple__pahar { display: flex; flex-direction: column; align-items: center; font-size: 0.95rem; }
.am-umple__emoji { font-size: 1.6rem; line-height: 1.1; }
.am-umple__emoji--mare { font-size: 2.1rem; }
.am-doua { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 10px 20px; }
.am-doua .am-umple__desen { width: clamp(130px, 40vw, 220px); }
.am-doua .am-goleste__desen { width: clamp(110px, 36vw, 170px); }
.am-doua .am-umple__sir { max-width: min(42vw, 220px); }
.am-doua .am-umple { flex: 1 1 0; min-width: 0; max-width: 260px; }
.am-umple-strat { transform-box: fill-box; transform-origin: bottom; animation: am-umple-strat var(--am-d, 0.4s) ease-out var(--am-i, 0s) both; }
@keyframes am-umple-strat { from { transform: scaleY(0); } }
.am-goleste-strat { opacity: 0; animation: am-goleste-strat 0.5s ease-in var(--am-i, 0s) both; }
@keyframes am-goleste-strat { from { opacity: 1; } to { opacity: 0; } }
/* Paharul se înclină spre vas și revine, o dată pentru fiecare turnare. */
.am-toarna { transform-origin: 80px 16px; animation: am-toarna var(--am-d) ease-in-out var(--am-i, 0s) var(--am-n) both; }
@keyframes am-toarna { 35%, 65% { transform: rotate(105deg); } }
.am-jet { opacity: 0; animation: am-jet var(--am-d) linear var(--am-i, 0s) var(--am-n) both; }
@keyframes am-jet { 0%, 32% { opacity: 0; } 40%, 62% { opacity: 1; } 70%, 100% { opacity: 0; } }

/* ---------- ceasul ---------- */
.am-ceas__desen { width: clamp(170px, 50vw, 220px); }
.am-ceas__digital { font-size: 1.8rem; }
.am-ac { transform-origin: 100px 100px; transform: rotate(var(--am-la)); animation: am-ac var(--am-d) ease-in-out var(--am-i, 0s) both; }
@keyframes am-ac { from { transform: rotate(var(--am-de)); } }
.am-ac--clipeste line { animation: am-ac-clipeste 0.7s ease-in-out var(--am-j) 3; }
@keyframes am-ac-clipeste { 50% { stroke: #f08a24; stroke-width: 12px; } }
.am-ceas__legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.am-ceas__ac { padding: 6px 12px; border-radius: 12px; font-size: 1.15rem; font-weight: 800; }
.am-ceas__ac--ora { background: #e3e8f5; color: #12245a; }
.am-ceas__ac--min { background: var(--rosu-pal); color: #a51d1d; }

/* ---------- calendarul ---------- */
.am-ziua__desen { width: min(100%, 460px); border-radius: 18px; overflow: hidden; }
.am-ziua__cer { fill: #1d2b5a; animation: am-cer 6s linear 0s both; }
@keyframes am-cer {
  0% { fill: #ffd9a8; }
  30% { fill: #bfe3ff; }
  55% { fill: #bfe3ff; }
  70% { fill: #ffb48a; }
  85%, 100% { fill: #1d2b5a; }
}
.am-ziua__umbra { fill: #1d2b5a; }
.am-ziua__fereastra { fill: #ffd65a; animation: am-fereastra 6s linear 0s both; }
@keyframes am-fereastra { 0%, 75% { fill: #9cc7ee; } }
.am-ziua__soare { opacity: 0; transform: translate(300px, 160px); animation: am-soare 6s ease-in-out 0s both; }
@keyframes am-soare {
  0% { opacity: 1; transform: translate(30px, 118px); }
  30% { opacity: 1; transform: translate(160px, 34px); }
  62% { opacity: 1; transform: translate(290px, 112px); }
  78%, 100% { opacity: 0; transform: translate(305px, 165px); }
}
.am-ziua__momente { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 460px); }
.am-ziua__moment { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; background: var(--albastru-pal); font-size: clamp(0.78rem, 2.6vw, 1rem); }
.am-ziua__moment span { font-size: 1.7rem; }

.am-zile { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 640px; }
.am-zi { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; padding: 6px; border-radius: 12px; background: var(--albastru-pal); font-weight: 800; }
.am-zi--libera { background: #fde2ef; }
.am-zi__nr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 0.95rem; }
.am-zi__emoji { font-size: 1.6rem; }
.am-zi__nume { font-size: 1rem; }
.am-zi__semn { min-height: 1.4em; font-size: 1.05rem; }
.am-zi--marcata { animation: am-marcata 0.5s ease-out var(--am-i) both; }
@keyframes am-marcata { from { background: var(--albastru-pal); box-shadow: none; } }
.am-zi.am-zi--azi { background: #fff3c4; box-shadow: 0 0 0 3px #e0a800; }
.am-zi.am-zi--ieri { background: #e3e8f5; box-shadow: 0 0 0 3px #7a8bb5; }
.am-zi.am-zi--maine { background: var(--verde-pal); box-shadow: 0 0 0 3px var(--verde); }
.am-zi__semn.am-zi--azi, .am-zi__semn.am-zi--ieri, .am-zi__semn.am-zi--maine { background: none; box-shadow: none; }

/* ---------- anotimpurile ---------- */
.am-copac__desen { width: clamp(170px, 50vw, 240px); border-radius: 18px; overflow: hidden; }
.am-copac__luni { margin: 0; padding: 0; list-style: none; font-size: 1.35rem; font-weight: 800; }
.am-copac__luni li { position: relative; margin: 4px 0; padding-left: 22px; }
.am-copac__luni li::before { content: '–'; position: absolute; left: 0; }
.am-copac__anotimpuri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 460px); }
.am-copac__anotimp { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; font-size: clamp(0.78rem, 2.6vw, 1rem); }
.am-copac__anotimp span { font-size: 1.6rem; }
.am-strat { opacity: 0; animation: am-intra 0.5s ease-out var(--am-i) both, am-iese 0.5s ease-in var(--am-j) forwards; }
.am-frunza { transform-box: fill-box; transform-origin: center; transform: translate(var(--am-dx), var(--am-dy)) rotate(var(--am-r)); animation: am-frunza 2.2s ease-in var(--am-i, 0s) both; }
@keyframes am-frunza {
  from { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(calc(var(--am-dx) * -0.6), calc(var(--am-dy) * 0.5)) rotate(calc(var(--am-r) * 0.5)); }
}
.am-fulg { transform: translateY(var(--am-dy)); animation: am-fulg 2.4s linear var(--am-i, 0s) both; }
@keyframes am-fulg { from { transform: translate(0, 0); } 50% { transform: translate(8px, calc(var(--am-dy) * 0.5)); } }

/* ---------- banii ---------- */
.am-bani__obiect { display: flex; align-items: center; gap: 10px; }
.am-bani__pret { padding: 4px 12px; border-radius: 10px; background: #fff; border: 2px solid var(--cerneala); font-size: 1.4rem; }
.am-bani__sir { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.am-bani__ban, .am-schimb__ban { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.am-bani__valoare { font-size: 1.3rem; color: var(--albastru-inchis); }
.am-bani__suma { padding: 4px 16px; border-radius: 12px; background: #fff3c4; font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-weight: 900; color: var(--cerneala); }
.am-schimb__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.am-schimb__parte { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 100%; padding: 8px; border-radius: 14px; border: 3px dashed var(--linie); }
.am-schimb__parte--gata { border: 3px solid var(--verde); background: var(--verde-pal); animation: am-gata 0.5s ease-out var(--am-i) both; }
@keyframes am-gata { from { border-color: var(--linie); background: transparent; } }
.am-schimb__semn { font-size: 2.2rem; color: var(--albastru-inchis); }
.am-rest__desen { width: min(100%, 420px); }

@media (max-width: 640px) {
  .am-bani .bancnota, .am-schimb .bancnota { width: 92px; height: 50px; }
  .am-zi { min-width: 0; padding: 5px 6px; }
  .am-zi__nume { font-size: 0.85rem; }
}

/* ---------- mișcare redusă: direct starea finală ---------- */
@media (prefers-reduced-motion: reduce) {
  .am-anim, .am-anim * { animation: none !important; }
}