/* ============================================================
   Animațiile din „Învăț” pentru științele (anim-stiinte.js)
   ============================================================
   Toate clasele încep cu „as-”. Starea de bază a fiecărui element este
   starea de la sfârșitul animației; animațiile pornesc de la starea de
   început (keyframes „from” / 0%) și au fill-mode „both”. Momentul de
   pornire vine din --t, durata din --d (puse din JS).
   ============================================================ */

/* ---------- cadrul ---------- */

.as-desen { width: min(100%, var(--latime, 460px)); }
.as-desen svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 14px; }
:where(.as-desen svg *:not([transform])) { transform-box: fill-box; transform-origin: 50% 50%; }
.as-desen svg .as-vb { transform-box: view-box; }
.as-e { text-anchor: middle; dominant-baseline: central; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.as-txt { text-anchor: middle; dominant-baseline: central; font-size: 22px; font-weight: 800; fill: var(--cerneala); }
.as-txt--dreapta { text-anchor: end; }
.as-txt--alb { fill: #fff; font-size: 18px; }

.as-reluare, .as-cu-etape { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.as-etape { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; max-width: 100%; }
.as-etapa {
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--albastru-pal);
  border: 2px solid var(--linie);
  font-size: 1.05rem;
  font-weight: 800;
  animation: as-apare 0.4s ease-out var(--t, 0s) both, as-evidentiaza 1.4s ease-out var(--t, 0s) both;
}
@keyframes as-evidentiaza { from { background-color: var(--galben); } }

/* ---------- animații generale ---------- */

@keyframes as-apare { from { opacity: 0; } }
@keyframes as-pleaca { from { opacity: 1; } to { opacity: 0; } }
@keyframes as-creste { from { transform: scale(0); } }
@keyframes as-crestey { from { transform: scaleY(0); } }
@keyframes as-deseneaza { from { stroke-dashoffset: 1; } }
@keyframes as-roteste { to { transform: rotate(360deg); } }
@keyframes as-inainteaza-18 { to { stroke-dashoffset: -18; } }
@keyframes as-inainteaza-24 { to { stroke-dashoffset: -24; } }
@keyframes as-urca-fum { 0% { opacity: 0; transform: none; } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }

.as-apare { animation: as-apare var(--d, 0.5s) ease-out var(--t, 0s) both; }
.as-pleaca { opacity: 0; animation: as-pleaca var(--d, 0.5s) var(--t, 0s) both; }
.as-creste { animation: as-creste var(--d, 0.6s) ease-out var(--t, 0s) both; }
.as-creste-sus { transform-origin: 50% 100%; animation: as-crestey var(--d, 0.8s) ease-out var(--t, 0s) both; }
.as-deseneaza { stroke-dasharray: 1; animation: as-deseneaza var(--d, 1s) ease-in-out var(--t, 0s) both; }
.as-o-dreapta { transform-origin: 100% 50%; }
.as-o-stanga { transform-origin: 0% 50%; }

/* ---------- plantele ---------- */

.as-urca { fill: #2f8fe8; opacity: 0; animation: as-urca 3.2s linear var(--t) infinite both; }
@keyframes as-urca {
  0% { opacity: 0; transform: none; }
  8% { opacity: 1; }
  35% { transform: translate(var(--x1), var(--y1)); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x2), var(--y2)); }
}
.as-petala-albastra { fill: #8cc4ff; animation: as-albastru 6s ease-in 0.6s both; }
@keyframes as-albastru { from { fill: #ffffff; } }

.as-ploua { opacity: 0; animation: as-ploua 1.2s ease-in var(--t) 4 both; }
@keyframes as-ploua { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(120px); } }
.as-frunza { fill: #57b947; }
.as-frunza-st { fill: #c9b04a; transform-origin: 100% 50%; transform: rotate(-40deg); animation: as-ofileste 2s ease-in 1s both; }
.as-frunza-dr { fill: #c9b04a; transform-origin: 0% 50%; transform: rotate(40deg); animation: as-ofileste 2s ease-in 1s both; }
@keyframes as-ofileste { from { transform: none; fill: #57b947; } }
.as-varf-cade { transform-origin: 50% 100%; transform: rotate(70deg); animation: as-varf-cade 2s ease-in 1.4s both; }
@keyframes as-varf-cade { from { transform: none; } }
.as-petala-vestejita { fill: #b8927a; animation: as-vestejeste 2s ease-in 1.4s both; }
@keyframes as-vestejeste { from { fill: #f27aa8; } }

.as-umfla { animation: as-umfla 0.8s ease-out both; }
@keyframes as-umfla { from { transform: scale(0.65); } }
.as-floare-trece { opacity: 0; animation: as-creste 0.6s ease-out 3.6s both, as-pleaca 0.6s 5s both; }

.as-fruct { fill: #e0403a; animation: as-creste-mic 1.2s ease-out 1.4s both, as-coace 1.2s 2.6s both; }
@keyframes as-creste-mic { from { transform: scale(0.15); } }
@keyframes as-coace { from { fill: #8fcf4a; } }
.as-petala-cade { opacity: 0; animation: as-petala-cade 1.2s ease-in var(--t) both; }
@keyframes as-petala-cade {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
.as-samanta-cade { transform: translateY(126px); animation: as-samanta-cade 0.8s ease-in var(--t) both; }
@keyframes as-samanta-cade { from { transform: none; opacity: 0; } 10% { opacity: 1; } }

/* ---------- scheletul ---------- */

.as-os { fill: #f7f2e4; stroke: #b9ad8c; stroke-width: 3; }
.as-incheietura { fill: #ffd65a; stroke: #c9a12a; stroke-width: 3; }
.as-gamba { animation: as-genunchi 2.4s ease-in-out 0.4s 3 both; }
@keyframes as-genunchi { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(70deg); } }
.as-antebrat { animation: as-cot 2.4s ease-in-out 0.4s 3 both; }
@keyframes as-cot { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-110deg); } }

.as-muschi { fill: #e98b8b; transform-origin: 0% 50%; animation: as-muschi 3s ease-in-out 0.3s 3 both; }
@keyframes as-muschi { 0%, 15%, 100% { transform: none; } 50%, 65% { transform: scale(1.7, 0.8); } }
.as-ridica { animation: as-ridica 3s ease-in-out 0.3s 3 both; }
@keyframes as-ridica { 0%, 15%, 100% { transform: rotate(0); } 50%, 65% { transform: rotate(-70deg); } }

.as-vertebra { animation: as-apleaca 3.2s ease-in-out 0.4s 2 both; }
@keyframes as-apleaca { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(7deg); } }

.as-copil-creste { transform-origin: 50% 100%; animation: as-copil-creste 4.4s ease-in-out both; }
@keyframes as-copil-creste {
  0%, 20% { transform: scale(0.6); }
  36%, 56% { transform: scale(0.8); }
  72%, 100% { transform: scale(1); }
}

/* ---------- organele ---------- */

.as-sange { fill: #d9342b; opacity: 0; animation: as-drum 1.6s linear var(--t) infinite both; }
@keyframes as-drum {
  0% { opacity: 0; transform: none; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)); }
}
.as-inima { animation: as-bate 0.8s ease-in-out infinite; }
@keyframes as-bate { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }

.as-plaman { animation: as-plaman 4s ease-in-out 0.3s 4 both; }
@keyframes as-plaman { 0%, 100% { transform: none; } 45%, 55% { transform: scale(1.14); } }
.as-coaste { animation: as-coaste 4s ease-in-out 0.3s 4 both; }
@keyframes as-coaste { 0%, 100% { transform: none; } 45%, 55% { transform: translateY(-6px); } }
.as-aer { fill: #4aa3f0; opacity: 0; animation: as-aer 4s linear calc(var(--t) + 0.3s) 4 both; }
@keyframes as-aer {
  0% { opacity: 0; transform: none; }
  5% { opacity: 1; }
  40% { opacity: 1; transform: translateY(134px); }
  45%, 55% { opacity: 0; transform: translateY(134px); }
  60% { opacity: 1; }
  95% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.as-intra-eticheta { fill: #2f6fde; opacity: 0; animation: as-intra-et 4s 0.3s 4 both; }
@keyframes as-intra-et { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
.as-iese-eticheta { fill: #d9534f; opacity: 0; animation: as-iese-et 4s 0.3s 4 both; }
@keyframes as-iese-et { 0%, 48% { opacity: 0; } 53%, 100% { opacity: 1; } }

.as-mar-gura { opacity: 0; animation: as-mar-gura 5s ease-in 0.2s both; }
@keyframes as-mar-gura {
  0% { opacity: 1; transform: none; }
  30% { opacity: 1; transform: translateY(46px) scale(0.4); }
  34%, 100% { opacity: 0; transform: translateY(46px) scale(0.4); }
}
.as-bucata { opacity: 0; animation: as-bucata 5s linear 0.2s both; }
@keyframes as-bucata {
  0%, 30% { opacity: 0; transform: none; }
  34% { opacity: 1; transform: none; }
  55% { transform: translate(0, 80px); }
  68% { transform: translate(14px, 124px); }
  76% { opacity: 1; transform: translate(26px, 140px); }
  100% { opacity: 0; transform: translate(26px, 140px) scale(0.2); }
}
.as-stomac-strange { animation: as-stomac 5s ease-in-out 0.2s both; }
@keyframes as-stomac {
  0%, 76% { transform: none; }
  82% { transform: scale(1.1, 0.9); }
  88% { transform: scale(0.95, 1.05); }
  94% { transform: scale(1.08, 0.92); }
  100% { transform: none; }
}

.as-semnal { opacity: 0; animation: as-semnal 3s linear 0.3s infinite both; }
@keyframes as-semnal {
  0% { opacity: 0; transform: none; }
  4% { opacity: 1; }
  20% { transform: translate(0, 68px); }
  27% { transform: translate(20px, 84px); }
  50% { transform: translate(115px, 118px); }
  64% { opacity: 1; transform: translate(185px, 76px); }
  68%, 100% { opacity: 0; transform: translate(185px, 76px); }
}
.as-creier-aprins { animation: as-creier 3s 0.3s infinite both; }
@keyframes as-creier { 0%, 6% { fill: #ffd65a; } 14%, 100% { fill: #f6b5c6; } }
.as-mana-misca { transform-origin: 50% 100%; animation: as-flutura 3s ease-in-out 0.3s infinite both; }
@keyframes as-flutura {
  0%, 64% { transform: none; }
  72% { transform: rotate(-20deg); }
  80% { transform: rotate(16deg); }
  88% { transform: rotate(-14deg); }
  96%, 100% { transform: none; }
}

.as-puls { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 40px; }
.as-puls__coloana { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.as-puls__coloana--animal { flex-direction: row; gap: 14px; }
.as-puls__cine { font-size: clamp(3.2rem, 10vw, 4.6rem); line-height: 1.1; }
.as-puls__inima { display: inline-block; font-size: clamp(2.2rem, 7vw, 3rem); animation: as-bate var(--d, 0.8s) ease-in-out infinite; }
.as-puls__eticheta { font-size: 1.15rem; }

/* ---------- animalele ---------- */

.as-culoare { display: flex; flex-direction: column; gap: 12px; width: min(100%, 420px); }
.as-culoar { display: flex; flex-direction: column; gap: 4px; }
.as-culoar .as-desen { width: 100%; }
.as-culoar__eticheta { font-size: 1.1rem; }

.as-zbor { animation: as-traverseaza 5s linear infinite; --drum: 300px; }
.as-inot { animation: as-traverseaza 6s linear infinite; --drum: 290px; }
@keyframes as-traverseaza {
  0% { opacity: 0; transform: none; }
  6%, 92% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--drum)); }
}
.as-plutire { animation: as-plutire 1s ease-in-out infinite alternate; }
.as-val { animation: as-plutire 1.5s ease-in-out infinite alternate; }
@keyframes as-plutire { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.as-aripa { transform-origin: 50% 100%; animation: as-bate-aripa 0.3s ease-in-out infinite alternate; }
@keyframes as-bate-aripa { to { transform: scaleY(-0.8); } }
.as-coada { transform-origin: 100% 50%; animation: as-coada 0.4s ease-in-out infinite alternate; }
@keyframes as-coada { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.as-inotatoare { transform-origin: 50% 100%; animation: as-coada 0.6s ease-in-out infinite alternate; }
.as-galop { animation: as-galop 4s linear infinite; }
@keyframes as-galop {
  0% { opacity: 0; transform: none; }
  6%, 92% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-310px); }
}
.as-galop-salt { animation: as-salt-mic 0.35s ease-in-out infinite alternate; }
@keyframes as-salt-mic { to { transform: translateY(-8px); } }

.as-apa-branhii { fill: #2f6fde; opacity: 0; animation: as-branhii 2.4s linear var(--t) infinite both; }
@keyframes as-branhii {
  0% { opacity: 0; transform: none; }
  8% { opacity: 1; }
  30% { transform: translate(-50px, 0); }
  60% { transform: translate(-110px, -6px); }
  80% { opacity: 1; transform: translate(-118px, 40px); }
  100% { opacity: 0; transform: translate(-150px, 80px); }
}
.as-branhie { transform-origin: 0% 50%; animation: as-branhie 1.2s ease-in-out infinite; }
@keyframes as-branhie { 50% { transform: scaleX(1.6); } }

.as-inel { fill: #e58a8a; animation: as-unduire 1s ease-in-out var(--t) infinite; }
@keyframes as-unduire { 50% { transform: translateY(-8px); } }
.as-rama-merge { transform: translateX(120px); animation: as-merge 8s linear both; }
.as-melc-merge { transform: translateX(-50px); animation: as-merge 8s linear both; }
@keyframes as-merge { from { transform: none; } }

.as-salt { transform: translateX(330px); animation: as-salt 4.5s ease-in-out 0.3s both; }
@keyframes as-salt {
  0% { transform: none; }
  16% { transform: translate(55px, -70px); }
  33% { transform: translate(110px, 0); }
  50% { transform: translate(165px, -70px); }
  66% { transform: translate(220px, 0); }
  83% { transform: translate(275px, -70px); }
  100% { transform: translate(330px, 0); }
}

/* ---------- Soarele ---------- */

.as-raza { fill: #ffd65a; opacity: 0; animation: as-raza 2s linear var(--t) infinite both; }
@keyframes as-raza {
  0% { opacity: 0; transform: none; }
  10%, 90% { opacity: 1; }
  100% { opacity: 0; transform: translateX(290px); }
}

.as-cer { fill: #ffc89a; animation: as-cer 7s linear both; }
@keyframes as-cer { 0% { fill: #ffd8a8; } 12% { fill: #fde7c6; } 25% { fill: #cfe9ff; } 50% { fill: #a6d6ff; } 75% { fill: #cfe9ff; } 88% { fill: #fde0bd; } 100% { fill: #ffc89a; } }
.as-soare-drum { transform: translate(440px, 226px); animation: as-soare-drum 7s linear both; }
@keyframes as-soare-drum {
  0% { transform: translate(40px, 226px); }
  25% { transform: translate(130px, 110px); }
  50% { transform: translate(240px, 56px); }
  75% { transform: translate(350px, 110px); }
  100% { transform: translate(440px, 226px); }
}
.as-umbra-copac { transform: scaleX(-2.2); animation: as-umbra 7s linear both; }
@keyframes as-umbra {
  0% { transform: scaleX(2.2); }
  25% { transform: scaleX(0.9); }
  50% { transform: scaleX(0.25); }
  75% { transform: scaleX(-0.9); }
  100% { transform: scaleX(-2.2); }
}

.as-raza-linie { stroke: #ffb400; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 10; fill: none; animation: as-inainteaza-18 0.8s linear var(--t) infinite; }
.as-balta-creste { animation: as-balta-creste var(--d, 3s) ease-out var(--t) both; }
@keyframes as-balta-creste { from { transform: scale(0.05); } }
.as-om-topit { transform-origin: 50% 100%; opacity: 0; transform: scale(0.4, 0.1); animation: as-om-topit var(--d, 3s) ease-in var(--t) both; }
@keyframes as-om-topit { from { opacity: 1; transform: none; } 80% { opacity: 1; } }
.as-tricou, .as-tricou-ud { fill: #9ccfff; animation: as-usuca 3s ease-in var(--t, 0.3s) both; }
.as-tricou-ud { animation-duration: 4s; }
@keyframes as-usuca { from { fill: #1d4fb8; } }
.as-picura-tricou { fill: #4aa3f0; opacity: 0; animation: as-picura 1s ease-in var(--t) 3 both; }
@keyframes as-picura { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(28px); } }

.as-mercur { transform-origin: 50% 100%; animation: as-mercur 2.5s ease-out var(--t) both; }
@keyframes as-mercur { from { transform: scaleY(0.2); } }

/* ---------- apa ---------- */

.as-pahar-toarna { animation: as-toarna 5s ease-in-out 0.3s both; }
@keyframes as-toarna { 0%, 10% { transform: none; } 30%, 70% { transform: rotate(100deg); } 90%, 100% { transform: none; } }
.as-apa-scade { transform-origin: 50% 100%; transform: scaleY(0); animation: as-apa-scade 5s 0.3s both; }
@keyframes as-apa-scade { 0%, 30% { transform: none; } 70%, 100% { transform: scaleY(0); } }
.as-jet { opacity: 0; animation: as-jet 5s 0.3s both; }
@keyframes as-jet { 0%, 28% { opacity: 0; } 32%, 68% { opacity: 1; } 72%, 100% { opacity: 0; } }
.as-castron-umple { transform-origin: 50% 100%; animation: as-castron 5s 0.3s both; }
@keyframes as-castron { 0%, 32% { transform: scaleY(0); } 70%, 100% { transform: none; } }

.as-apa-ingheata { fill: #e6f6ff; animation: as-ingheata 3s ease-in 0.4s both; }
@keyframes as-ingheata { from { fill: #6fb6ff; } }
.as-mercur-coboara { transform-origin: 50% 100%; animation: as-mercur-coboara 3s ease-in 0.4s both; }
@keyframes as-mercur-coboara { from { transform: scaleY(4); } }

.as-cub-topit { transform-origin: 50% 100%; opacity: 0; transform: scale(0.1); animation: as-cub-topit 5s ease-in 0.4s both; }
@keyframes as-cub-topit { from { opacity: 1; transform: none; } 85% { opacity: 1; } }
.as-picura-gheata { fill: #7cc0f5; opacity: 0; animation: as-picura-gheata 1s ease-in var(--t) 3 both; }
@keyframes as-picura-gheata { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(56px); } }

.as-pamant-ud { fill: #7a5230; animation: as-pamant-ud 2s 4s both; }
@keyframes as-pamant-ud { from { fill: #a8784a; } }
.as-balta-trece { opacity: 0; animation: as-balta-trece 4.4s 1s both; }
@keyframes as-balta-trece { 0% { opacity: 1; transform: scale(0); } 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1, 0.6); } }

.as-cub-incet { transform: scale(0.55); animation: as-cub-topit-incet 7s linear 0.4s both; }
@keyframes as-cub-topit-incet { from { transform: none; } }
.as-cub-repede { opacity: 0; transform: scale(0); animation: as-cub-topit-repede 3s linear 0.4s both; }
@keyframes as-cub-topit-repede { from { opacity: 1; transform: none; } 90% { opacity: 1; } }
.as-abur { opacity: 0; animation: as-abur 1.6s ease-out var(--t) infinite both; }
@keyframes as-abur { 0% { opacity: 0; transform: none; } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-16px); } }

.as-vapor { opacity: 0; animation: as-urca-fum 2s ease-out var(--t) 3 both; }
.as-fierbere .as-vapor, .as-oglinda .as-vapor, .as-balta .as-vapor { animation-iteration-count: infinite; }
.as-balta-scade { transform: scale(0.12, 0.5); animation: as-balta-scade 5s ease-in 0.3s both; }
@keyframes as-balta-scade { from { transform: none; } }
.as-bula { fill: #e8f6ff; opacity: 0; animation: as-bula 1.4s ease-in var(--t) infinite both; }
@keyframes as-bula { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 90% { opacity: 1; transform: translateY(-70px); } 100% { opacity: 0; transform: translateY(-76px); } }
.as-flacara { fill: #f08a24; transform-origin: 50% 100%; animation: as-flacara 0.5s ease-in-out var(--t) infinite alternate; }
@keyframes as-flacara { to { transform: scale(1.1, 0.75); } }
.as-vapor-scurt { opacity: 0; animation: as-vapor-scurt 1.5s ease-out var(--t) infinite both; }
@keyframes as-vapor-scurt { 0% { opacity: 0; transform: none; } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.as-picatura-capac { fill: #7cc0f5; animation: as-creste 0.6s ease-out var(--t) both; }
.as-picatura-cade { fill: #7cc0f5; opacity: 0; animation: as-picatura-cade 1.4s ease-in var(--t) 2 both; }
@keyframes as-picatura-cade { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(56px); } }
.as-ceata { opacity: 0.75; animation: as-apare 3s ease-in 0.8s both; }

.as-vapor-ciclu { opacity: 0; animation: as-vapor-ciclu 2.4s ease-out var(--t) infinite both; }
@keyframes as-vapor-ciclu { 0% { opacity: 0; transform: none; } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px); } }
.as-nor-creste { animation: as-creste 1.2s ease-out var(--t) both; }
.as-ploaie { animation: as-ploaie 0.8s linear var(--t) infinite both; }
@keyframes as-ploaie { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(80px); } }
.as-rau-curge { stroke: #bfe2fb; stroke-width: 4; stroke-dasharray: 10 14; animation: as-apare 0.5s var(--t) both, as-inainteaza-24 1s linear var(--t) infinite; }

/* ---------- căderea ---------- */

.as-fruct-cade { transform: translateY(var(--y)); animation: as-cade 0.9s cubic-bezier(0.55, 0, 1, 0.45) var(--t) both; }
@keyframes as-cade { from { transform: none; } }
.as-cade-incet { transform: translateY(236px); animation: as-cade 4.6s linear 0.2s both; }
.as-cade-repede { transform: translateY(236px); animation: as-cade 0.9s cubic-bezier(0.55, 0, 1, 0.45) 0.2s both; }
.as-leagana { animation: as-leagana 2.3s ease-in-out 0.2s 2 both; }
@keyframes as-leagana {
  0%, 100% { transform: none; }
  25% { transform: translateX(-40px) rotate(-18deg); }
  75% { transform: translateX(40px) rotate(18deg); }
}
.as-minge-sus { animation: as-arunca 2.4s 0.4s 2 both; }
@keyframes as-arunca {
  0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  50% { transform: translateY(-200px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  100% { transform: none; }
}
.as-coboara-parasuta { transform: translate(150px, 300px); animation: as-parasuta 6s both; }
@keyframes as-parasuta {
  0% { transform: translate(150px, 40px); animation-timing-function: ease-in; }
  22% { transform: translate(150px, 150px); animation-timing-function: ease-out; }
  30% { transform: translate(150px, 168px); animation-timing-function: linear; }
  100% { transform: translate(150px, 300px); }
}
.as-panza-deschide { transform-origin: 50% 100%; animation: as-creste 0.5s ease-out 1.3s both; }
.as-leagana-mic { transform-origin: 50% 0%; animation: as-leagana-mic 2s ease-in-out 1.8s 2 both; }
@keyframes as-leagana-mic { 0%, 100% { transform: none; } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* ---------- energia ---------- */

.as-curent { stroke: #ffd65a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 16; animation: as-apare 0.3s var(--t) both, as-inainteaza-18 0.9s linear var(--t) infinite; }
.as-curent-circuit { stroke: #ffd65a; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 16; transition: opacity 0.3s; animation: as-inainteaza-18 0.9s linear infinite; }
.as-circuit .as-intrerupator { cursor: pointer; transition: transform 0.3s; }
.as-bec { fill: #fff5b0; transition: fill 0.3s; }
.as-lumina { fill: #ffe066; opacity: 0.45; transition: opacity 0.3s; }
.as-circuit--deschis .as-curent-circuit, .as-circuit--deschis .as-lumina { opacity: 0; }
.as-circuit--deschis .as-intrerupator { transform: rotate(-35deg); }
.as-circuit--deschis .as-bec { fill: #f2f2f2; }

.as-lumina--porneste { animation: as-apare 0.6s var(--t) both; }
.as-bec--porneste { animation: as-aprinde-bec 0.4s var(--t) both; }
@keyframes as-aprinde-bec { from { fill: #f2f2f2; } }
.as-raze-bec { animation: as-apare 0.5s var(--t) both, as-pulseaza 0.9s ease-in-out calc(var(--t) + 0.5s) infinite alternate; }
@keyframes as-pulseaza { to { transform: scale(1.06); } }
.as-caldura { opacity: 0; animation: as-urca-fum 2s ease-out var(--t) infinite both; }

.as-intuneric-strat { opacity: 0; animation: as-stinge-strat 1s ease-in var(--t) both; }
@keyframes as-stinge-strat { from { opacity: 0.88; } }
.as-camera-stinsa { opacity: 0.55; animation: as-apare 0.6s var(--t) both; }
.as-bec--stinge { fill: #e0e0e0; animation: as-stinge-bec 0.3s var(--t) both; }
@keyframes as-stinge-bec { from { fill: #fff5b0; } }
.as-comutator { transform: translateY(8px); animation: as-comutator 0.3s var(--t) both; }
@keyframes as-comutator { from { transform: none; } }
.as-copil-iese { opacity: 0; transform: translateX(-260px); animation: as-copil-iese 5s linear both; }
@keyframes as-copil-iese {
  0% { opacity: 1; transform: none; }
  50%, 60% { transform: translateX(-180px); }
  90% { opacity: 1; transform: translateX(-260px); }
  100% { opacity: 0; transform: translateX(-260px); }
}

/* ---------- sursele de energie ---------- */

.as-fereastra { fill: #ffe066; animation: as-aprinde-fereastra 0.5s var(--t) both; }
@keyframes as-aprinde-fereastra { from { fill: #5a6a80; } }
.as-desen svg .as-elice, .as-desen svg .as-roata { transform-box: view-box; transform-origin: 0 0; animation: as-roteste 2.4s linear infinite; }
.as-desen svg .as-roata { animation-duration: 1.6s; }
.as-desen svg .as-elice--moara { animation-duration: 4s; }
.as-vant { stroke-dasharray: 20 16; animation: as-vant 1s linear var(--t) infinite; }
@keyframes as-vant { to { stroke-dashoffset: -36; } }
.as-apa-conducta { fill: none; stroke: #bfe2fb; stroke-width: 4; stroke-dasharray: 8 10; animation: as-inainteaza-18 0.8s linear infinite; }
.as-fum { fill: #8a8a8a; opacity: 0; animation: as-fum 2.1s ease-out var(--t) infinite both; }
@keyframes as-fum { 0% { opacity: 0.8; transform: none; } 100% { opacity: 0; transform: translate(40px, -40px) scale(2.2); } }
.as-foc { animation: as-flacara 0.5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.as-masina-merge { transform: translateX(-240px); animation: as-cade 4s ease-in 0.6s both; }
.as-fum-masina { fill: #9a9a9a; opacity: 0; animation: as-fum-masina 0.9s ease-out var(--t) infinite both; }
@keyframes as-fum-masina { 0% { opacity: 0.7; transform: none; } 100% { opacity: 0; transform: translate(30px, -14px) scale(2); } }
.as-sac-umple { transform-origin: 50% 100%; animation: as-sac 3s ease-out var(--t) both; }
@keyframes as-sac { from { transform: scaleY(0.2); } }

/* ---------- sunetele ---------- */

.as-unda-mica { fill: none; stroke: #2f6fde; stroke-width: 3; opacity: 0; animation: as-unda-mica 1.2s ease-out var(--t) 2 both; }
@keyframes as-unda-mica { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } }
.as-coarda-vibreaza { transform: scaleY(0); animation: as-coarda 3s linear 0.6s both; }
@keyframes as-coarda {
  0% { transform: scaleY(1); } 5% { transform: scaleY(-0.9); } 10% { transform: scaleY(0.8); } 15% { transform: scaleY(-0.72); }
  20% { transform: scaleY(0.64); } 25% { transform: scaleY(-0.56); } 30% { transform: scaleY(0.5); } 35% { transform: scaleY(-0.44); }
  40% { transform: scaleY(0.38); } 45% { transform: scaleY(-0.33); } 50% { transform: scaleY(0.28); } 55% { transform: scaleY(-0.24); }
  60% { transform: scaleY(0.2); } 65% { transform: scaleY(-0.16); } 70% { transform: scaleY(0.13); } 75% { transform: scaleY(-0.1); }
  80% { transform: scaleY(0.07); } 85% { transform: scaleY(-0.05); } 90% { transform: scaleY(0.03); } 95%, 100% { transform: scaleY(0); }
}
.as-deget { opacity: 0; animation: as-deget 1.1s ease-in both; }
@keyframes as-deget { 0%, 55% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(30px); } }

.as-piele-toba { animation: as-piele 2.5s ease-out 0.4s 3 both; }
@keyframes as-piele {
  0%, 18% { transform: none; } 22% { transform: scaleY(0.7); } 26% { transform: scaleY(1.25); }
  30% { transform: scaleY(0.85); } 34% { transform: scaleY(1.1); } 40%, 100% { transform: none; }
}
.as-bob { animation: as-bob 2.5s ease-out calc(var(--t) - 0.1s) 3 both; }
@keyframes as-bob {
  0%, 20% { transform: none; }
  32% { transform: translateY(var(--h)); }
  44% { transform: none; }
  52% { transform: translateY(calc(var(--h) * 0.4)); }
  60%, 100% { transform: none; }
}
.as-bat { transform: rotate(-25deg); animation: as-bat 2.5s ease-in 0.4s 3 both; }
@keyframes as-bat { 0% { transform: rotate(-25deg); } 18% { transform: none; } 30%, 100% { transform: rotate(-25deg); } }

.as-rigla-vibreaza { animation: as-rigla 3s linear 0.3s both; }
@keyframes as-rigla {
  0% { transform: none; } 15% { transform: rotate(8deg); } 25% { transform: rotate(-7deg); } 30% { transform: rotate(6deg); }
  35% { transform: rotate(-5.2deg); } 40% { transform: rotate(4.5deg); } 45% { transform: rotate(-3.8deg); } 50% { transform: rotate(3.2deg); }
  55% { transform: rotate(-2.6deg); } 60% { transform: rotate(2.1deg); } 65% { transform: rotate(-1.6deg); } 70% { transform: rotate(1.2deg); }
  75% { transform: rotate(-0.9deg); } 80% { transform: rotate(0.6deg); } 85% { transform: rotate(-0.4deg); } 90% { transform: rotate(0.2deg); }
  95%, 100% { transform: none; }
}

.as-sunet-lemn { fill: #ffb400; opacity: 0; animation: as-sunet-lemn 1.8s linear var(--t) infinite both; }
@keyframes as-sunet-lemn { 0% { opacity: 0; transform: none; } 8%, 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(320px); } }
.as-ciocane { animation: as-ciocane 0.6s ease-in-out infinite; }
@keyframes as-ciocane { 50% { transform: translateY(12px); } }

.as-unda-mare { fill: none; stroke: #2f6fde; stroke-width: 5; vector-effect: non-scaling-stroke; opacity: 0; animation: as-unda-mare 2.8s ease-out var(--t) infinite both; }
@keyframes as-unda-mare { 0% { opacity: 1; transform: none; stroke-width: 6; } 100% { opacity: 0; transform: scale(20); stroke-width: 1; } }
.as-clopot { transform-origin: 50% 0%; animation: as-clopot 0.7s ease-in-out infinite alternate; }
@keyframes as-clopot { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.as-unda-voce { opacity: 0; animation: as-unda-voce 1.5s ease-out var(--t) infinite both; }
@keyframes as-unda-voce { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(70px) scale(1.4); } }
.as-gat-vibreaza { animation: as-tremura 0.08s linear infinite alternate; }
@keyframes as-tremura { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }

/* ---------- fără mișcare: direct starea de la sfârșit ---------- */

@media (prefers-reduced-motion: reduce) {
  .as-anim, .as-anim *, .as-anim *::before, .as-anim *::after { animation: none !important; transition: none !important; }
}