/* ============================================================
   ABECEDARUL — mișcarea din „Învăț” (anim-abecedar.js)
   ============================================================
   Starea de bază a fiecărei clase este starea finală a desenului;
   animațiile pornesc din starea de început (`from`) și au
   `animation-fill-mode: both`, cu întârzierea în --intarziere.
   Fără mișcare (prefers-reduced-motion), se vede direct starea finală.
   Toate clasele și animațiile de aici încep cu „aa-”.
   ============================================================ */

/* ---------- animațiile ---------- */
@keyframes aa-apare { from { opacity: 0; } }
@keyframes aa-dispare { from { opacity: 1; } }
@keyframes aa-urca { from { opacity: 0; transform: translateY(0.6em); } }
@keyframes aa-cade { from { opacity: 0; transform: translateY(-1.1em); } }
@keyframes aa-pop { 0% { opacity: 0; transform: scale(0.3); } 70% { opacity: 1; transform: scale(1.12); } }
@keyframes aa-pop-moale { from { opacity: 0; transform: scale(0.92); } }
@keyframes aa-creste { from { opacity: 0; transform: scaleX(0); } }
@keyframes aa-lumineaza { 30% { background-color: var(--galben); } }
@keyframes aa-salt { 40% { transform: translateY(-8px) scale(1.08); } }
@keyframes aa-vin-literele { from { opacity: 0; transform: translateX(calc(var(--d) * 1em)); } }
@keyframes aa-apropie { from { transform: translateX(calc(var(--d) * 1em)); } }
@keyframes aa-desprinde { from { padding-left: 0; padding-right: 0; margin-left: calc(var(--strans) * -1); margin-right: calc(var(--strans) * -1); background-color: transparent; } }
@keyframes aa-evidentiaza { from { color: var(--albastru-inchis); } 50% { transform: scale(1.35); } }
@keyframes aa-scrie { from { clip-path: inset(-40% 100% -40% -20%); } to { clip-path: inset(-40% -20% -40% -20%); } }
@keyframes aa-creion {
  0% { left: 0; opacity: 0; visibility: visible; }
  4% { opacity: 1; }
  95% { left: calc(100% - 0.6em); opacity: 1; visibility: visible; }
  100% { left: calc(100% - 0.6em); opacity: 0; visibility: hidden; }
}
@keyframes aa-iese { from { opacity: 1; transform: none; } }
@keyframes aa-inverseaza {
  from { transform: translateX(calc(var(--d) * 1.2em)); }
  50% { transform: translate(calc(var(--d) * 0.6em), -0.8em); }
}
@keyframes aa-ordoneaza {
  from { transform: translateY(calc(var(--d) * 1.5em)); }
  50% { transform: translate(calc(var(--d) * 0.7em), calc(var(--d) * 0.75em)); }
}
@keyframes aa-din-stanga { from { opacity: 0; transform: translateX(-120px); } }
@keyframes aa-din-dreapta { from { opacity: 0; transform: translateX(120px); } }
@keyframes aa-vine { from { transform: translateX(60vw); } }
@keyframes aa-paseste { 50% { transform: translateY(-7px) rotate(-6deg); } }
@keyframes aa-bate { 0% { transform: none; } 12% { transform: scale(0.78) rotate(-10deg); } 35% { transform: none; } }
@keyframes aa-coloreaza { from { border-color: var(--albastru); background-color: #fff; color: var(--cerneala); } }
@keyframes aa-zboara { from { transform: translate(var(--dx), var(--dy)) scale(1.3); } }
@keyframes aa-linie-citita { from { border-bottom-color: var(--albastru); } }

/* ---------- comune ---------- */
.aa-reluare { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.aa-reluare__loc { display: flex; justify-content: center; max-width: 100%; }
.aa-reluare__buton { align-self: center; }
.aa-zona { display: flex; justify-content: center; width: 100%; max-width: 100%; }
.aa-coloana { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.aa-subtitlu { font-size: 1.15rem; font-weight: 700; color: var(--cerneala-slaba); animation: aa-apare 0.5s ease var(--intarziere) both; }
.aa-pop { animation: aa-pop 0.4s ease-out var(--intarziere) both; }
.aa-cuvant { display: inline-block; animation: aa-urca 0.45s ease-out var(--intarziere) both; }
.aa-desen { animation: aa-pop-moale 0.7s ease-out both; }
.aa-litera-tipar { display: inline-block; animation: aa-cade 0.35s ease-out var(--intarziere) both; }
.aa-tipar { display: inline-block; animation: aa-pop 0.45s ease-out var(--intarziere) both; }

/* Un element ales greșit se scutură și când are o animație de intrare. */
[class^='aa-'].scutura, [class*=' aa-'].scutura { animation: scutura 0.4s !important; }

/* ---------- schema propoziției ---------- */
.schema-prop__linie.aa-linie {
  border-bottom-color: var(--verde);
  transform-origin: left bottom;
  animation: aa-creste 0.4s ease-out var(--intarziere) both, aa-linie-citita 0.3s ease var(--citit) both;
}
.aa-linie__cuvant {
  display: inline-block;
  padding: 0 6px;
  border-radius: 10px;
  animation: aa-cade 0.5s cubic-bezier(0.3, 1.4, 0.6, 1) var(--intarziere) both, aa-lumineaza 0.9s ease calc(var(--intarziere) + 0.15s);
}
.schema-prop__linie.aa-linie--atinsa { animation: aa-salt 0.4s ease; }

/* ---------- toba ---------- */
.aa-silabe-toba { flex-wrap: wrap; justify-content: center; --strans: 5px; }
.silabe-toba__silaba.aa-silaba-toba { animation: aa-desprinde 0.5s ease-out var(--intarziere) both, aa-lumineaza 0.7s ease var(--intarziere); }
.silabe-toba__silaba.aa-bataie { animation: aa-salt 0.4s ease; background: var(--galben); }
.aa-toba__bat { display: inline-block; }
.aa-toba__bat--demo { animation: aa-bate 0.9s ease-out var(--intarziere) var(--batai); }
.aa-toba__bat.aa-bataie { animation: aa-bate 0.6s ease-out; }

/* ---------- schema cuvântului ---------- */
.casute-cuvant__casuta.aa-casuta { animation: aa-pop 0.35s ease-out var(--intarziere) both, aa-lumineaza 0.5s ease var(--citit); }
.casute-cuvant__casuta.aa-casuta--plina { animation: none; }
.casute-cuvant__casuta.aa-casuta--tinta { animation: aa-coloreaza 0.5s ease var(--intarziere) both; }
.aa-casuta__litera { display: inline-block; animation: aa-cade 0.4s ease-out var(--intarziere) both; }

/* ---------- locul sunetului ---------- */
.aa-loc { width: 100%; animation: aa-urca 0.4s ease-out var(--intarziere) both; }
.aa-loc__schema { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.aa-loc__casuta {
  display: grid;
  place-items: center;
  width: clamp(40px, 6vw, 62px);
  height: clamp(46px, 7vw, 70px);
  border: 3px solid var(--albastru);
  border-radius: 10px;
  background: #fff;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  font-weight: 900;
  animation: aa-pop 0.35s ease-out var(--intarziere) both;
}
.aa-loc__casuta--tinta { border-color: var(--rosu); background: var(--rosu-pal); }
.aa-loc__optiune { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-width: 130px; padding: 8px 12px; }
.aa-loc__tinta { display: grid; place-items: center; width: 2.2em; height: 1.8em; border: 3px dashed var(--linie); border-radius: 10px; background: #fff; }
.aa-loc__zbor { display: inline-block; font-size: 1.5rem; }
.aa-loc__zbor--pleaca { animation: aa-zboara 0.8s ease-in-out var(--intarziere) both; }
@media (max-width: 640px) {
  .aa-loc__optiuni { flex-wrap: nowrap; gap: 6px; width: 100%; }
  .aa-loc__optiune { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 0.95rem; }
}

/* ---------- imaginile de atins ---------- */
.aa-card { animation: aa-urca 0.4s ease-out var(--intarziere) both; }

/* ---------- silabe ---------- */
.aa-despartire { display: inline-flex; align-items: center; gap: 12px; }
.aa-despartire__cuvant { display: inline-flex; gap: 8px; --strans: 4px; }
.aa-silaba { padding: 2px 10px; border-radius: 10px; background: #fff; animation: aa-desprinde 0.5s ease-out var(--intarziere) both, aa-lumineaza 0.7s ease var(--intarziere); }
.aa-despartire__numar {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--albastru);
  color: #fff;
  font-size: 0.9em;
  animation: aa-pop 0.4s ease-out var(--intarziere) both;
}

.aa-lipire { display: inline-flex; }
.aa-lipire__litera { display: inline-block; animation: aa-vin-literele 0.55s ease-out var(--intarziere) both; }
.aa-silaba-citita { display: inline-block; font-size: 1.9rem; }

.aa-unire { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.aa-unire__silabe { font-size: 0.8em; color: var(--cerneala-slaba); }
.aa-unire__cuvant { display: inline-flex; font-size: 1.35em; color: var(--albastru-inchis); }
.aa-unire__silaba { display: inline-block; animation: aa-apropie 0.8s ease-in-out var(--intarziere) both; }
/* Până se unesc, silabele a doua, a patra... sunt verzi, ca să se vadă unde se despart. */
.aa-unire__silaba:nth-child(even) { animation: aa-apropie 0.8s ease-in-out var(--intarziere) both, aa-verde calc(var(--intarziere) + 0.8s) step-end; }
@keyframes aa-verde { from, to { color: var(--verde); } }

/* ---------- alfabetarul ---------- */
.aa-zona--coloana { flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px 14px; border-radius: 20px; background: var(--albastru-pal); }
.aa-alfabetar { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }
.aa-alfabetar__cuvant { display: flex; justify-content: center; gap: 4px; }
.aa-alfabetar__silaba {
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 4px solid var(--verde);
  border-radius: 18px;
  background: var(--verde-pal);
  animation: aa-silaba-gata 0.4s ease var(--intarziere) both, aa-apropie 0.6s ease-in-out var(--unire) both;
}
@keyframes aa-silaba-gata { from { border-color: transparent; background-color: transparent; } }
.piesa.aa-alfabetar__litera {
  display: grid;
  place-items: center;
  min-width: clamp(42px, 8vw, 70px);
  height: clamp(50px, 9vw, 78px);
  padding: 0 6px;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  cursor: default;
  animation: aa-vin-literele 0.6s cubic-bezier(0.3, 1.3, 0.6, 1) var(--intarziere) both;
}
.aa-alfabetar__rezultat { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; color: var(--albastru-inchis); animation: aa-urca 0.5s ease-out var(--intarziere) both; }

/* ---------- litera de mână, pe liniatură ---------- */
.aa-liniatura {
  position: relative;
  display: inline-block;
  padding: 0 0.2em;
  background:
    linear-gradient(#b6cdee, #b6cdee) 0 28% / 100% 2px no-repeat,
    linear-gradient(#b6cdee, #b6cdee) 0 48% / 100% 2px no-repeat,
    linear-gradient(#7fa6dd, #7fa6dd) 0 68% / 100% 2px no-repeat,
    linear-gradient(#b6cdee, #b6cdee) 0 88% / 100% 2px no-repeat;
}
.aa-liniatura.litera-mare { font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1.6; }
.aa-liniatura.text-mare { font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.7; }
.aa-scris { display: inline-block; animation: aa-scrie var(--durata) linear var(--intarziere) both; }
.aa-creion {
  position: absolute;
  top: 15%;
  left: calc(100% - 0.6em);
  font-size: 0.5em;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: aa-creion var(--durata) linear var(--intarziere) both;
}

/* ---------- sunetul schimbat ---------- */
.aa-imagini { display: inline-grid; }
.aa-imagini > * { grid-area: 1 / 1; }
.aa-imagine-veche { opacity: 0; animation: aa-dispare 0.6s ease var(--intarziere) both; }
.aa-imagine-noua { animation: aa-apare 0.6s ease var(--intarziere) both; }
.aa-schimb { display: inline-grid; }
.aa-schimb > * { grid-area: 1 / 1; text-align: center; }
.aa-schimb__vechi { opacity: 0; transform: translateY(0.9em); animation: aa-iese 0.5s ease-in var(--intarziere) both; }
.aa-schimb__nou { animation: aa-cade 0.5s ease-out var(--intarziere) both; }
.aa-cuvant-schimbat { font-size: 2.2rem; }

/* ---------- citirea inversă ---------- */
.aa-inversare__cuvant { display: inline-flex; }
.aa-inversare__litera {
  display: inline-block;
  width: 1.2em;
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  color: var(--albastru-inchis);
  animation: aa-inverseaza 1.2s ease-in-out var(--intarziere) both;
}

/* ---------- jocul lanțului ---------- */
.aa-veriga { display: inline-flex; font-size: 1.8rem; font-weight: 900; }

/* ---------- litera mare și semnul de la sfârșit ---------- */
.aa-semne { display: flex; gap: 6px; }
.aa-semne__rand { animation: aa-urca 0.5s ease-out var(--intarziere) both; }
.aa-semne__mare, .aa-semne__semn { display: inline-block; color: var(--rosu); animation: aa-evidentiaza 0.6s ease var(--intarziere) both; }

/* ---------- alfabetul ---------- */
.aa-litere { gap: 8px; }
.aa-litera-alfabet { padding: 4px 10px; border-radius: 10px; background: #fff; font-size: 1.6rem; font-weight: 900; }
.aa-majuscula { display: inline-block; min-width: 0.8em; }

.aa-vecini { display: flex; justify-content: center; gap: 18px; }
.aa-vecini__loc { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.aa-vecini__litera {
  display: grid;
  place-items: center;
  width: 92px;
  height: 104px;
  border-radius: 18px;
  background: var(--albastru-pal);
  color: var(--cerneala-slaba);
  font-size: 4rem;
  font-weight: 900;
}
.aa-vecini--mijloc .aa-vecini__litera { background: var(--albastru); color: #fff; }
.aa-vecini__eticheta { min-height: 1.4em; color: var(--cerneala-slaba); font-size: 1.2rem; font-weight: 800; }
.aa-vecini--stanga { animation: aa-din-stanga 0.7s ease-out var(--intarziere) both; }
.aa-vecini--dreapta { animation: aa-din-dreapta 0.7s ease-out var(--intarziere) both; }
@media (max-width: 640px) {
  .aa-vecini { gap: 10px; }
  .aa-vecini__litera { width: 72px; height: 84px; font-size: 3rem; }
}

.aa-ordine { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.aa-ordine__nume {
  height: 1.5em;
  line-height: 1.5em;
  color: var(--albastru-inchis);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  animation: aa-ordoneaza 1.3s ease-in-out var(--intarziere) both;
}

/* ---------- propoziția în trei forme ---------- */
.aa-schema-mica { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px; }
.aa-linie-mica { display: inline-block; width: min(2.6em, 14vw); height: 0.9em; border-bottom: 5px solid var(--cerneala-slaba); transform-origin: left; animation: aa-creste 0.4s ease-out var(--intarziere) both; }

/* ---------- lecția de început: fetița și pisica ---------- */
.aa-vine { display: inline-block; animation: aa-vine 1.4s ease-out var(--intarziere) both; }
.aa-vine__pas { display: inline-block; animation: aa-paseste 0.28s ease-in-out var(--intarziere) 5; }

/* ---------- telefon ---------- */
@media (max-width: 640px) {
  .prezentare__grupa:has(.aa-liniatura) { padding: 10px 12px; column-gap: 10px; }
  .prezentare__grupa:has(.aa-liniatura) .prezentare__eticheta { white-space: nowrap; }
  .prezentare__grupa:has(.aa-liniatura) .prezentare__rand { gap: 12px; }
  .aa-liniatura { padding: 0 0.08em; }
  .aa-alfabetar__silaba { gap: 2px; padding: 4px; border-width: 3px; border-radius: 14px; }
  .piesa.aa-alfabetar__litera { min-width: 30px; height: 44px; padding: 0 4px; border-radius: 10px; font-size: 1.35rem; box-shadow: 0 3px 0 #1a46a3; }
  .aa-cuvant-schimbat { font-size: 1.8rem; }
  .aa-inversare__litera { font-size: 1.7rem; }
  .aa-silaba-citita { font-size: 1.6rem; }
}

/* ---------- fără mișcare: starea finală ---------- */
@media (prefers-reduced-motion: reduce) {
  [class^='aa-'], [class*=' aa-'] { animation: none !important; }
  .aa-reluare__buton { display: none; }
}