/* ===========================================================================
   Cartonasul de portofoliu: aparatele cu saitul clientului deruland
   ---------------------------------------------------------------------------
   Cele trei cartonase de dinainte foloseau capturi pe fundal deschis si arata
   ca trei pete albe pe pagina neagra. Asteptam de la designer aceleasi machete
   pe fond inchis; pe 9 august 2026 Vitalie a hotarat sa nu mai asteptam si sa
   le construim noi, din saitul real al fiecarui client.

   Aparatele sunt DESENATE aici, nu poze de stoc: raman clare pe orice ecran,
   se recoloreaza din variabilele proiectului, si nu arata "de pe internet".
   Imaginile se genereaza cu scripts/captura_sait.py.
   =========================================================================== */

.lucrare {
  /* Se lipeste la derulare, ca sa se suprapuna cu cel de dedesubt - efectul de
     foi asezate una peste alta. `--lipire` creste cu 20px la fiecare cartonas,
     deci ramane o muchie vizibila din cel dinainte. Cu un singur cartonas nu se
     vedea nimic; a redevenit vizibil de cand sunt doua.

     De aici vine si `overflow: hidden` de mai jos: cartonasul de deasupra
     trebuie sa fie opac, altfel se vede prin el. Si tot de aici regula ca
     niciun cartonas nu poarta `data-reveal`: aparitia la derulare misca
     elementul cu `transform`, iar un `transform` pe elementul lipit sau pe
     parintele lui anuleaza lipirea cu totul. */
  position: sticky;
  top: var(--lipire, 110px);
  display: block;
  border-radius: var(--raza-card, 30px);
  overflow: hidden;
  background: linear-gradient(180deg, #0A1020, #000 76%);
  border: 1px solid var(--line-07);
  padding: 56px 46px 0;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
}

/* LIPIREA PE TELEFON: stinsa pe 14 august 2026, APRINSA LA LOC in aceeasi zi,
   cu cartonase micsorate. Ambele hotarari sunt ale lui Vitalie, si a doua o
   stie pe prima.

   DE CE S-A STINS, si motivul era adevarat: pe 375x812, cartonasele aveau 806px
   inaltime si erau lipite la 110, 130 si 150 - deci marginea lor de jos cadea
   la 916, 936 si 956, sub fereastra, oricat ai fi derulat. Butonul „More info"
   de la piciorul lor NU se vedea NICIODATA, la niciun punct de derulare
   (verificat atunci din 40 in 40 de pixeli, pe toata inaltimea sectiunii).

   DE CE SE POATE APRINDE ACUM: fiindca s-a atacat CAUZA, nu simptomul. Un
   cartonas nu incapea sub fereastra; deci se micsoreaza cartonasul, nu se
   renunta la efect. Toata inaltimea vine dintr-un singur loc - telefonul
   desenat, singurul aparat care ramane pe ecran ingust (`.mb` se ascunde la
   767px). El da 528 din cei 806.

   SOCOTEALA, si e o promisiune care se poate verifica: al TREILEA cartonas e
   cel critic, fiindca se lipeste cel mai jos. Are la dispozitie 812 - 150 =
   662px. Telefonul scade de la 246 la 172 de latime (x0.70), deci de la 528 la
   ~370 inaltime; cu 24 sus, 24 intre si ~190 textul, cartonasul iese pe la 620.
   620 + 150 = 770, adica 42px de aer sub buton.

   CE SE PIERDE, spus pe fata: telefonul desenat e mai mic, deci captura de pe
   ecranul lui se citeste mai greu. Asta e pretul efectului pe un ecran de 375,
   si e pretul pe care Vitalie l-a ales cand a zis „pune-o inapoi cu cartele mai
   mici". Pe tableta si pe calculator nu se schimba nimic.

   DACA VREODATA CARTONASUL CRESTE LA LOC - un nume pe doua randuri, o traducere
   mai lunga in rusa - defectul se intoarce exact cum era, si tot tacut.
   Pazit de `tests_portofoliu.CartonaseleLipiteIncapPeTelefon`. */
   MICSORAREA PROPRIU-ZISA NU E AICI, ci mai jos, dupa blocul de 767px. Prima
   varianta a scris-o chiar in locul asta si N-A FACUT NIMIC: blocul de 767px
   vine mai tarziu in fisier si da telefonului 246px inapoi. La putere egala,
   castiga ultimul scris. Se vedea numai masurand - cartonasul ramanea 806. */

/* --- Lumina din spate -----------------------------------------------------
   Doua straturi, nu unul: o singura patura de blur da o ceata plata, fara
   miez. Vitalie a cerut-o mai puternica decat prima varianta. */
.lucrare::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -6%;
  width: min(1000px, 104%);
  aspect-ratio: 1.35;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 45%,
              rgba(0, 97, 254, .95) 0%, rgba(0, 97, 254, .45) 26%,
              rgba(0, 97, 254, .12) 52%, transparent 72%);
  filter: blur(70px);
  opacity: .85;
  pointer-events: none;
}

/* Pe telefon lumina se opreste exact la marginea cartonasului.
   Gasit pe 14 august 2026 la matura finala: cele trei studii de caz cu cartonas
   in cap se trageau in lateral cu 8 pixeli, in toate trei limbile - si nu se
   taia niciun cuvant, fiindca vinovata era chiar lumina asta. `104%` centrat
   inseamna 2% iesiti de fiecare parte; pe un cartonas de 329px, exact cei 7
   pixeli masurati.

   Gasita prin stingere, nu prin citire: niciun element si niciun dreptunghi nu
   depasea marginea, fiindca `getClientRects()` nu vede pseudo-elementele. S-a
   stins `*::before, *::after` - pagina a devenit curata - si apoi s-au stins
   pe rand.

   4% dintr-un gradient neclarizat cu 70px nu se vede lipsind. Pe calculator
   ramane cum a cerut Vitalie. */
@media (max-width: 720px) {
  .lucrare::before { width: 100%; }
}
.lucrare::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 16%;
  width: min(560px, 66%);
  aspect-ratio: 1.9;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(70, 150, 255, .85) 0%,
              rgba(0, 97, 254, .35) 45%, transparent 72%);
  filter: blur(46px);
  opacity: .9;
  pointer-events: none;
}

.lucrare__scena {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Balta de lumina de sub aparate: le aseaza pe o suprafata, altfel plutesc. */
.lucrare__scena::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -30px;
  width: 78%;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 97, 254, .55) 0%,
              rgba(0, 97, 254, .18) 45%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}

/* --- Motorul de derulare --------------------------------------------------
   `--fereastra` e inaltimea ecranului SI capatul derularii. Se scriu impreuna
   dinadins: prima varianta le tinea separat, iar cand ecranul telefonului a
   fost marit de la 396 la 520 fara sa se schimbe si capatul, derularea trecea
   cu 124px peste subsol si se vedea din nou antetul. Vitalie a prins-o. */
.ecran {
  position: relative;
  overflow: hidden;
  background: #0b0b0b;
  height: var(--fereastra);
}
.ecran__img {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  display: block;
  animation: lucrare-derulare var(--durata, 38s) ease-in-out infinite alternate;
}
/* Pauze la capete: un om nu deruleaza la viteza constanta la nesfarsit. Sta
   putin sus, coboara, se opreste la subsol, apoi urca inapoi. */
@keyframes lucrare-derulare {
  0%,  7%   { transform: translateY(0); }
  93%, 100% { transform: translateY(calc(-100% + var(--fereastra))); }
}
/* Se opreste la hover si la focus, ca banda de embleme. Pe prima pagina se
   misca deodata sase dreptunghiuri mari, la nesfarsit; cine are rau de miscare
   n-avea pana pe 13 august 2026 NICIUN fel de a le opri din pagina - doar
   setarea de sistem de mai jos, pe care putini stiu ca o au.

   `:focus-within` nu e de forma: cartonasul intreg e o legatura, deci ajunge
   sub focus mergand cu tastatura. */
.lucrare:hover .ecran__img,
.lucrare:focus-within .ecran__img,
.lucrare__scena:hover .ecran__img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ecran__img { animation: none; }
}

/* --- MacBook -------------------------------------------------------------- */
.mb { position: relative; width: 660px; flex: 0 0 auto; z-index: 1; }
.mb__capac {
  position: relative;
  background: linear-gradient(160deg, #4a4e55, #212429 62%, #15171a);
  border-radius: 16px 16px 6px 6px;
  padding: 12px 12px 16px;
  box-shadow: 0 46px 90px rgba(0, 0, 0, .75),
              inset 0 1px 0 rgba(255, 255, 255, .18),
              0 0 46px rgba(0, 97, 254, .30);
}
.mb__ecran {
  --fereastra: 390px;
  --durata: 38s;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.mb__camera {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0d0f12;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
/* Baza are doua straturi: balamaua, ingusta cat capacul, si talpa, mai lata si
   tesita. Cu o singura dunga nu se citea ca laptop. */
.mb__balama {
  height: 9px;
  margin: 0 6px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #2a2d31, #191b1e);
}
.mb__baza {
  position: relative;
  height: 15px;
  margin: 0 -34px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #43474d 0%, #2a2d32 22%, #16181b 70%, #0b0c0e 100%);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.mb__crestatura {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 6px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #0c0e10, #191b1e);
}

/* --- Monitorul Apple ------------------------------------------------------
   Pentru programele de birou, care n-au versiune de telefon. Norca e sistem de
   notariat: singurul lui ecran mobil e logarea, care nu spune nimic despre
   produs. Un monitor spune adevarul. Cerut de Vitalie pe 9 august 2026.

   Desenat, ca MacBook-ul: rama subtire de aluminiu, gatul ingust si talpa lata
   si tesita. Ecranul e 16:10 - proportia imaginii, deci nu se taie si nu se
   intinde nimic. Sta NEMISCAT: doar MacBook-ul deruleaza. */
.mon {
  position: relative;
  width: 600px;
  flex: 0 0 auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Compozitia „birou": monitorul e aparatul MARE, laptopul sta mic in fata lui,
   ca pe o masa adevarata. Invers fata de celelalte cartonase, unde MacBook-ul
   e cel mare si telefonul cel mic - dar acolo saitul CHIAR are versiune de
   telefon; aici produsul e un program de birou.

   Masurat, nu ghicit: alaturate la marime intreaga, cele doua aparate cereau
   1159px, iar scena are 1068px pe ecranul lui Vitalie (1280) si 832px la
   1024 - deci se taiau. Ansamblul de mai jos cere 823px, exact cat cel cu
   MacBook + iPhone, deci toate trei cartonasele au aceeasi greutate.

   600 - 175 (suprapunere) + (660 + 34) x .55 = 807, masurat 826. Cei 34 sunt talpa
   MacBook-ului, care iese lateral din cutia lui (`margin: 0 -34px`) - din cauza
   ei prima socoteala a iesit cu 23px mai mica decat realitatea. */
.lucrare__scena--birou .mon { margin-right: -175px; }
.lucrare__scena--birou .mb {
  /* `scale` pe MacBook, nu latimi noi: aparatul e desenat in pixeli (rama de
     12px, balamaua de 9px, crestatura de 110px), iar micsorat prin latime ar
     ramane cu rama de laptop mare pe un ecran mic. `transform` NU strica
     lipirea cartonasului - regula aceea e despre `transform` pe elementul lipit
     sau pe parintele lui, nu pe un copil de-al lui. */
  transform: scale(.55);
  transform-origin: bottom left;
  margin-right: -297px;
  z-index: 2;
}
.mon__rama {
  width: 100%;
  background: linear-gradient(158deg, #4a4e55, #212429 58%, #15171a);
  border-radius: 12px;
  padding: 10px 10px 22px;
  box-shadow: 0 46px 90px rgba(0, 0, 0, .75),
              inset 0 1px 0 rgba(255, 255, 255, .18),
              0 0 46px rgba(0, 97, 254, .30);
}
.mon__ecran {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #0b0b0b;
  aspect-ratio: 1.6;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.mon__img { display: block; width: 100%; }

/* --- Demonstratia de pe monitor -------------------------------------------
   Cu doua sau trei imagini, monitorul nu mai arata o poza: ruleaza bazele de
   date una dupa alta, ca si cum cineva ar apasa prin meniu. Cerut de Vitalie pe
   9 august 2026 - „sa iasa ca o prezentare reala".

   Imaginile stau una peste alta si se sting pe rand. Ciclul e de 21s, deci
   fiecare sta 7s: destul cat sa apuci sa citesti titlul si sa vezi tabelul,
   prea putin cat sa devina o reclama care se repeta. Tranzitia e scurta (3%,
   adica ~0.6s) fiindca imita o apasare, nu o estompare artistica.

   `--film` se pune doar cand exista a doua imagine; cu una singura ramane
   asezarea simpla de mai sus, fara pozitionare absoluta. */
.mon__ecran--film .mon__img {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  animation: mon-film 21s linear infinite;
}
.mon__ecran--film .mon__img:nth-child(1) { animation-delay: 0s; }
.mon__ecran--film .mon__img:nth-child(2) { animation-delay: 7s; }
.mon__ecran--film .mon__img:nth-child(3) { animation-delay: 14s; }
@keyframes mon-film {
  0%              { opacity: 0; }
  3%,  30.3%      { opacity: 1; }
  33.3%, 100%     { opacity: 0; }
}
/* Fara miscare: ramane prima baza de date, statica. Nu ascunsa - prima imagine
   e singura cu text alternativ, deci ea trebuie sa ramana. */
@media (prefers-reduced-motion: reduce) {
  .mon__ecran--film .mon__img { animation: none; opacity: 0; }
  .mon__ecran--film .mon__img:first-child { opacity: 1; }
}
/* Gatul si talpa: doua piese, nu una. Cu o singura dunga arata ca un tablou
   agatat, nu ca un monitor asezat. */
.mon__gat {
  width: 84px;
  height: 46px;
  background: linear-gradient(90deg, #2a2d31, #4a4e55 42%, #1c1e21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.mon__talpa {
  width: 210px;
  height: 11px;
  border-radius: 0 0 9px 9px / 0 0 7px 7px;
  background: linear-gradient(180deg, #43474d 0%, #2a2d32 30%, #14161a 100%);
  box-shadow: 0 20px 34px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* --- iPhone ---------------------------------------------------------------
   Suprapunerea e mica dinadins: mai mare, telefonul manca randul de produse
   din ecranul MacBook-ului. Cat sa se atinga, nu cat sa acopere. */
.ip { position: relative; width: 186px; flex: 0 0 auto; margin: 0 0 -26px -26px; z-index: 2; }

/* APARATELE SE MICSOREAZA PE TABLETA. Gasit pe 14 august 2026 de auditul de
   tableta: laptopul are 660px si telefonul 186, cu 26 de suprapunere, deci
   scena cere 820px oricat de ingust ar fi ecranul. La 768 iesea in amandoua
   partile - laptopul incepea la -26, telefonul se termina la 794 si i se taia
   o felie pe verticala. Nu se vedea ca derulare laterala fiindca `body` are
   `overflow-x: clip`; se vedea doar ca aparate ciuntite.

   Se micsoreaza latimile, nu se pune `transform: scale()`: scalarea nu misca
   asezarea, deci ar fi lasat un gol cat felia taiata deasupra scenei. Pastile
   dinauntru (marginea de 12px a capacului, colturile rotunjite) raman fixe si
   ies cu vreo doi la suta mai groase - la 12 pixeli, atat cat nu se vede.

   660 -> 580 si 186 -> 163 e acelasi raport, iar suprapunerea coboara de la 26
   la 23 ca sa nu se lipeasca altfel: 580 + 163 - 23 = 720, deci la 768 raman 24
   de pixeli de fiecare parte. */
@media (min-width: 721px) and (max-width: 879px) {
  .mb { width: 580px; }
  .ip { width: 163px; margin-inline-start: -23px; }
}
.ip__rama {
  background: linear-gradient(155deg, #5a5e65, #212328 46%, #454951);
  border-radius: 34px;
  padding: 4px;
  box-shadow: 0 34px 60px rgba(0, 0, 0, .8),
              inset 0 1px 0 rgba(255, 255, 255, .22),
              0 0 34px rgba(0, 97, 254, .34);
}
.ip__ecran {
  --fereastra: 396px;
  --durata: 34s;
  border-radius: 30px;
  position: relative;
}
.ip__insula {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 16px;
  border-radius: 999px;
  background: #000;
}

/* --- Textul de sub aparate ------------------------------------------------ */
.lucrare__jos {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 44px;
  padding-bottom: 42px;
}
.lucrare__nume {
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Explicit, nu mostenit: pe pagina, cartonasul sta intr-o sectiune care
     coboara textul la 60% alb. Numele proiectului e titlu, nu text de corp. */
  color: var(--text-1);
}
/* Semnul clientului, langa numele proiectului. Inaltimea e legata de marimea
   textului (`em`, nu pixeli), deci ramane potrivit si daca titlul se schimba
   la alta latime de ecran. Latimea se lasa sa curga din raportul SVG-ului. */
.lucrare__marca {
  height: .62em;
  width: auto;
  flex: 0 0 auto;
  opacity: .92;
}
.lucrare__tags { color: var(--text-2); font-size: 14px; margin: 0; }
.lucrare__buton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 0 0 0 var(--blue-35);
  transition: box-shadow .25s, transform .25s;
}
.lucrare:hover .lucrare__buton,
.lucrare:focus-visible .lucrare__buton {
  box-shadow: 0 0 34px 0 var(--blue-35);
  transform: translateY(-1px);
}

/* --- Sub 768px: doar telefonul, mai mare ----------------------------------
   Un MacBook de 660px nu incape la 375px, iar micsorat tot ansamblul devine
   ilizibil. Pe telefon aratam un telefon: omul vede exact ce va vedea el. */
@media (max-width: 767px) {
  .lucrare { padding: 34px 20px 0; }
  .mb { display: none; }
  .ip { width: 246px; margin: 0; }
  .ip__ecran { --fereastra: 520px; }
  .ip__insula { width: 72px; height: 21px; top: 11px; }
  .lucrare__jos {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 34px;
  }
  .lucrare__nume { font-size: 21px; text-wrap: balance; }
  .lucrare__buton { align-self: flex-start; }

  /* Cartonasul „birou" n-are telefon de aratat, iar `.mb` tocmai s-a ascuns mai
     sus - deci ramane monitorul, pe toata latimea. Ecranul iese mic, dar asta E
     adevarul despre produs: Norca se foloseste la birou, nu pe telefon. */
  .lucrare__scena--birou .mon { width: 100%; margin-right: 0; }
  .lucrare__scena--birou .mon__rama { padding: 6px 6px 14px; border-radius: 9px; }
  .lucrare__scena--birou .mon__gat { width: 58px; height: 30px; }
  .lucrare__scena--birou .mon__talpa { width: 146px; height: 8px; }
}

/* --- Sub 721px: aparatele se mai micsoreaza o data, CA SA INCAPA LIPITE ------
   Blocul asta e perechea comentariului lung de la inceputul fisierului, si nu
   se poate citi fara el: acolo scrie de ce lipirea a fost stinsa, si de ce s-a
   putut aprinde la loc.

   TREBUIE SA STEA DUPA blocul de 767px de mai sus, si asta nu e o preferinta de
   asezare. Amandoua au aceeasi putere si amandoua se potrivesc la 375px, deci
   castiga ultimul scris. Prima varianta a comitului asta l-a pus INAINTE, si
   n-a facut absolut nimic: telefonul primea 246px inapoi de la blocul de jos,
   cartonasul ramanea 806, iar efectul se aprindea la loc cu exact defectul
   pentru care fusese stins. Nu se vedea decat masurand.

   Cifrele nu sunt alese din ochi: 172 / 246 = 0.70, si toate celelalte se
   inmultesc cu acelasi 0.70, ca rama, ecranul si insula sa ramana un telefon,
   nu trei piese care nu se mai potrivesc. */
@media (max-width: 720px) {
  .lucrare { padding-top: 24px; }
  .ip { width: 172px; }
  .ip__ecran { --fereastra: 364px; }
  .ip__insula { width: 50px; height: 15px; top: 8px; }
  .lucrare__jos { margin-top: 24px; gap: 14px; }
}

/* Semnul AgroData e o frunza, aproape patrata (42x41), pe cand cel Hyperice e
   o banda lunga si joasa (69x22). La aceeasi inaltime, frunza pare de doua ori
   mai mare. Fiecare semn se potriveste dupa cat "cantareste" optic, nu dupa
   cutia lui. */
.lucrare__marca--inalta { height: 1.05em; }

/* Semnul Norca: balanta justitiei, aproape patrata (238x225). Nu e SVG ca
   celelalte, ci logoul PNG al sistemului taiat ca masca peste `currentColor`,
   deci se recoloreaza in albul numelui pe cartonasul negru. Calea e relativa la
   fisierul asta (static/CSS/redesign/), nu la pagina. Ca frunza AgroData, e
   optic mai plina decat o banda de text, deci sta tot la ~1em, nu la .62em. */
.lucrare__marca--norca {
  display: inline-block;
  height: 1em;
  width: 1.06em;
  background: currentColor;
  -webkit-mask: url(../../IMG/portofoliu/norca-mark.png) center / contain no-repeat;
          mask: url(../../IMG/portofoliu/norca-mark.png) center / contain no-repeat;
}