/* centrala-d1.css — schema vie din hero-ul paginii de acasa, varianta D1
   (aprobata de Ali 30-Sep: „aprob diagrama ta"). Fata de centrala.css:
   FUNDATIA → BRAIN (profilul afacerii) → BOOSTED OS → 4 module „gandeste ·
   creeaza" in stanga + 4 „distribuie · converteste" in dreapta, iar METRICS se
   intoarce in BRAIN pe bucla „INVATA". centrala.css/js raman doar pentru
   en-index.html pana la trecerea EN (oglinda), apoi se sterg.
   ---------------------------------------------------------------------------
   Istoric, din centrala.css:
   ---------------------------------------------------------------------------
   Inlocuieste banda (intra → BOOSTED OS → iese). Ali, 29-Sep: banda „nu e rea,
   dar parca nu e asa impressive"; animatia cu fire de pe boosted-os „are mai
   multa logica". Schema de aici spune povestea intreaga intr-o imagine:
   FUNDATIA (jos) alimenteaza nucleul BOOSTED OS, iar nucleul conduce sase
   module prin trasee de circuit. Ecranul nucleului scrie ce face sistemul chiar
   acum, iar fiecare rand din log aprinde modulul si traseul lui.

   Starea de baza (fara JS, miscare redusa, tiparire) e schema COMPLETA, aprinsa,
   cu logul scris in markup — nimic nu depinde de animatie ca sa fie inteles.
   Tot ce se misca atarna de `.centrala--viu`, pus de centrala.js.
   ------------------------------------------------------------------------- */

/* ---- asezarea hero-ului ----
   Titlul ramane pe toata latimea (e fraza care vinde, nu se strange intr-o
   coloana de 6 randuri); dedesubt, paragraful si butoanele in stanga, schema
   in dreapta — la 1512x900 intra toate deasupra pliului. Sub 980px: una sub
   alta, schema DUPA butoane — pe telefon, fraza si butonul raman pe primul
   ecran, schema e ce gasesti la primul scroll. */
.hero .hero__cap--scena{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  grid-template-areas:"t t" "p s" "c s";
  grid-template-rows:auto auto 1fr; column-gap:clamp(24px,3.4vw,52px); row-gap:24px;
  align-items:start; margin-bottom:0;
}
.hero .hero__cap--scena .hero__titlu{grid-area:t}
.hero .hero__cap--scena .centrala{grid-area:s}
.hero .hero__cap--scena .hero__calificare{grid-area:p; padding-top:6px}
.hero .hero__cap--scena .hero__cta{grid-area:c; margin-top:0; text-align:left}
.hero .hero__cap--scena .hero__cta-row{justify-content:flex-start}
body.wr .hero .hero__cap--scena h1{font-size:clamp(34px,4.3vw,66px); line-height:1}
@media(max-width:980px){
  .hero .hero__cap--scena{grid-template-columns:minmax(0,1fr); grid-template-areas:"t" "p" "c" "s"; grid-template-rows:auto}
  .hero .hero__cap--scena .centrala{margin-top:8px}
  body.wr .hero .hero__cap--scena h1{font-size:clamp(32px,7.4vw,56px)}
}
@media(max-width:520px){
  .hero .hero__cap--scena .hero__cta{text-align:center}
  .hero .hero__cap--scena .hero__cta-row{justify-content:center}
}

/* ---- panoul schemei ---- */
.centrala{margin:0; position:relative; perspective:1600px}
.centrala__plan{
  position:relative; padding:10px 10px 6px;
  background:
    radial-gradient(58% 52% at 50% 46%, rgba(58,114,232,.08), transparent 70%),
    radial-gradient(rgba(237,238,234,.045) 1px, transparent 1.2px) 0 0 / 16px 16px,
    #08090A;
  border:1px solid var(--disprule); border-radius:14px;
  box-shadow:0 2px 18px -6px rgba(0,0,0,.9) inset, 0 40px 70px -34px rgba(0,0,0,.95);
  transform-origin:50% 50%; will-change:transform;
}
.centrala__cap{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:2px 6px 8px; border-bottom:1px solid var(--disprule);
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--dispink2)}
.centrala__cap b{font-weight:500; color:var(--dispink)}
.centrala__live{display:inline-flex; align-items:center; gap:7px}
.centrala__live i{width:7px; height:7px; background:var(--gn); box-shadow:0 0 8px var(--gn)}
.centrala svg.centrala__svg{display:block; width:100%; height:auto; overflow:visible}

/* Doua scheme in markup, una vizibila. Cea lata (640 unitati) coborata la
   latimea unui telefon ar da litere de ~5px; sub 600px o inlocuieste una
   verticala (340 unitati): fundatia sus, nucleul la mijloc, modulele pe doua
   coloane dedesubt — citita de sus in jos, ca pe telefon. centrala.js se
   leaga de cea afisata. */
.centrala svg.centrala__svg--ingust{display:none}
@media(max-width:600px){
  .centrala svg.centrala__svg{display:none}
  .centrala svg.centrala__svg--ingust{display:block}
  .centrala__cap-sub{display:none}
  .centrala__plan{padding:8px 6px 4px}
  .centrala__svg--ingust .c-nod .c-et{font-size:11.5px; letter-spacing:.04em}
  .centrala__svg--ingust .c-nod .c-sub{font-size:10.5px}
  .centrala__svg--ingust .c-fund .c-et{font-size:10px; letter-spacing:.06em}
  .centrala__svg--ingust .c-fund .c-sub{font-size:10px}
  .centrala__svg--ingust .c-log{font-size:10.6px}
  .centrala__svg--ingust .c-miez .c-titlu{font-size:11.5px}
  .centrala__svg--ingust .c-brain .c-et{font-size:11.5px}
  .centrala__svg--ingust .c-brain .c-sub{font-size:10.5px}
}

/* ---- piesele SVG ---- */
.c-traseu{fill:none; stroke:#2A2E33; stroke-width:1.6; stroke-linejoin:round}
.c-flux{fill:none; stroke:var(--fam,var(--or)); stroke-width:1.6; stroke-dasharray:3 7;
  opacity:.5; stroke-linejoin:round}
.c-mag{fill:none; stroke:#4A2A1C; stroke-width:1.6}
.c-mag-flux{fill:none; stroke:var(--or); stroke-width:1.6; stroke-dasharray:2 8; opacity:.6}
.c-pin{fill:#2A2E33}
.c-inel{fill:none; stroke:rgba(237,238,234,.07); stroke-width:1}
.c-inel--d{stroke-dasharray:2 9; stroke:rgba(237,238,234,.13)}

.c-nod .c-corp{fill:#0E1012; stroke:var(--fam); stroke-opacity:.6; stroke-width:1.3}
.c-nod .c-ico{color:var(--fam); filter:drop-shadow(0 0 3px currentColor)}
.c-nod .c-et{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; fill:var(--dispink)}
.c-nod .c-sub{font-family:var(--sans); font-size:10px; fill:var(--dispink2)}
.c-nod .c-led{fill:var(--fam); opacity:.35}
.c-fund .c-corp{fill:#120E0C; stroke:rgba(240,78,35,.5); stroke-width:1.3}
.c-fund .c-ico{color:var(--or); filter:drop-shadow(0 0 3px currentColor)}
.c-fund .c-et{font-family:var(--mono); font-size:9.6px; font-weight:500; letter-spacing:.1em; fill:var(--dispink)}
.c-fund .c-sub{font-family:var(--sans); font-size:9.4px; fill:var(--dispink2)}
.c-eticheta{font-family:var(--mono); font-size:8.6px; letter-spacing:.24em; fill:var(--dispink2)}
.c-eticheta--or{fill:var(--or)}
.c-eticheta--cy{fill:var(--cy)}
.c-eticheta--str{letter-spacing:.1em}

/* BRAIN: cartela lata dintre fundatie si nucleu; magistrala „urca" il leaga de
   nucleu, bucla „invata" aduce inapoi cifrele din METRICS */
.c-brain .c-corp{fill:#140F0C; stroke:var(--or); stroke-opacity:.75; stroke-width:1.4}
.c-brain .c-ico{color:var(--or); filter:drop-shadow(0 0 4px currentColor)}
.c-brain .c-et{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.2em; fill:var(--dispink)}
.c-brain .c-sub{font-family:var(--sans); font-size:10px; fill:var(--dispink2)}
.c-brain .c-led{fill:var(--or); filter:drop-shadow(0 0 4px var(--or))}
.c-urca{fill:none; stroke:#4A2A1C; stroke-width:1.6}
.c-urca-flux{fill:none; stroke:var(--or); stroke-width:1.6; stroke-dasharray:2 8; opacity:.6}
.c-bucla{fill:none; stroke:#173A40; stroke-width:1.6; stroke-linejoin:round}
.c-bucla-flux{fill:none; stroke:var(--cy); stroke-width:1.6; stroke-dasharray:3 7; opacity:.55; stroke-linejoin:round}

.c-miez .c-corp{fill:#0B0C0E; stroke:#3A3F46; stroke-width:1.4}
.c-miez .c-titlu{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.2em; fill:var(--dispink)}
.c-miez .c-ecran{fill:#040506; stroke:#1E2125}
.c-miez .c-led{fill:var(--gn); filter:drop-shadow(0 0 4px var(--gn))}
.c-log{font-family:var(--mono); font-size:9.4px; fill:var(--dispink)}
.c-log .c-ora{fill:#6B7275}
.c-log .c-sag{fill:var(--or)}
.c-cursor{fill:var(--or)}
.c-lampa{fill:#22262A}
.c-lampa.is-on{fill:var(--fam); filter:drop-shadow(0 0 3px var(--fam))}
.c-stare{font-family:var(--mono); font-size:8.4px; letter-spacing:.18em; fill:var(--dispink2)}

.c-pachet{filter:drop-shadow(0 0 4px currentColor)}
.c-pop{filter:drop-shadow(0 0 4px currentColor)}

/* ============ VIU: tot ce urmeaza atarna de clasa pusa de JS ============ */
.centrala--viu .c-nod{transition:opacity .35s ease-out}
.centrala--viu .c-flux{transition:opacity .35s ease-out; opacity:.16}
.centrala--viu .c-nod .c-corp{transition:stroke-opacity .3s ease-out, fill .3s ease-out}
.centrala--viu .c-nod.is-hot .c-corp{stroke-opacity:1; fill:#14171B}
.centrala--viu .c-nod.is-hot .c-led{opacity:1; filter:drop-shadow(0 0 4px var(--fam))}
.centrala--viu .c-flux.is-hot{opacity:.95; animation:c-curge .8s linear infinite}
.centrala--viu .c-mag-flux, .centrala--viu .c-urca-flux{animation:c-curge 1.4s linear infinite}
.centrala--viu .c-bucla-flux{animation:c-curge 1.1s linear infinite; opacity:.22; transition:opacity .35s ease-out}
.centrala--viu .c-bucla-flux.is-hot{opacity:.95}
.centrala .c-fund .c-corp, .centrala .c-brain .c-corp, .centrala .c-miez .c-corp{transition:fill .35s ease-out, stroke .35s ease-out, stroke-opacity .35s ease-out}
.centrala--viu .c-fund.is-hot .c-corp{fill:#21140E; stroke:rgba(240,78,35,1)}
.centrala--viu .c-brain.is-hot .c-corp{fill:#261710; stroke-opacity:1}
.centrala--viu .c-brain.is-hot{filter:drop-shadow(0 0 10px rgba(240,78,35,.45))}
.centrala--viu .c-miez.is-hot .c-corp{stroke:#6A717A}
@keyframes c-curge{to{stroke-dashoffset:-20}}
.centrala--viu .c-inel--d{animation:c-roteste 70s linear infinite}
.centrala--viu .c-inel--d.c-invers{animation-duration:100s; animation-direction:reverse}
@keyframes c-roteste{to{transform:rotate(360deg)}}
.centrala--viu .c-cursor{animation:c-clipeste 1s steps(2,end) infinite}
@keyframes c-clipeste{50%{opacity:0}}

/* hover pe un modul: el si traseul lui ies in fata, restul se retrag */
.centrala--viu.is-focus .c-nod:not(.is-hot){opacity:.38}
.centrala--viu.is-focus .c-flux:not(.is-hot){opacity:.05}

/* PORNIREA: fundatia se aprinde, magistralele urca in BRAIN, BRAIN porneste,
   nucleul porneste, traseele pleaca spre module, modulele si bucla se aprind.
   Fiecare treapta e o clasa pusa de JS; fara ele (fara JS) totul e aprins. */
.centrala--boot .c-fund, .centrala--boot .c-miez, .centrala--boot .c-nod, .centrala--boot .c-brain,
.centrala--boot .c-mag, .centrala--boot .c-mag-flux, .centrala--boot .c-urca, .centrala--boot .c-urca-flux,
.centrala--boot .c-flux, .centrala--boot .c-bucla, .centrala--boot .c-bucla-flux,
.centrala--boot .c-traseu, .centrala--boot .c-pin, .centrala--boot .c-eticheta{opacity:0}
.centrala--boot .c-traseu, .centrala--boot .c-mag, .centrala--boot .c-urca, .centrala--boot .c-bucla{stroke-dasharray:1; stroke-dashoffset:1}
.centrala .c-traseu, .centrala .c-mag, .centrala .c-urca, .centrala .c-bucla{transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1), opacity .2s}
.centrala .c-fund, .centrala .c-miez, .centrala .c-nod, .centrala .c-brain, .centrala .c-pin, .centrala .c-eticheta{transition:opacity .5s steps(5,end)}
.centrala--boot.b-1 .c-fund, .centrala--boot.b-1 .c-eticheta--or{opacity:1}
.centrala--boot.b-2 .c-mag{opacity:1; stroke-dashoffset:0}
.centrala--boot.b-2 .c-mag-flux{opacity:.6}
.centrala--boot.b-3 .c-brain{opacity:1}
.centrala--boot.b-3 .c-urca{opacity:1; stroke-dashoffset:0}
.centrala--boot.b-3 .c-urca-flux{opacity:.6}
.centrala--boot.b-4 .c-miez, .centrala--boot.b-4 .c-eticheta{opacity:1}
.centrala--boot.b-5 .c-traseu{opacity:1; stroke-dashoffset:0}
.centrala--boot.b-5 .c-pin{opacity:1}
.centrala--boot.b-6 .c-nod{opacity:1}
.centrala--boot.b-6 .c-flux{opacity:.16}
.centrala--boot.b-6 .c-bucla{opacity:1; stroke-dashoffset:0}
.centrala--boot.b-6 .c-bucla-flux{opacity:.55}

@media (prefers-reduced-motion: reduce){
  .centrala *{animation:none !important; transition:none !important}
  .centrala__plan{transform:none !important}
}
@media print{.centrala__plan{transform:none !important}}

/* ---- nodurile duc la paginile lor (30-Sep) ----
   Fiecare modul, cartela din fundatie, BRAIN si nucleul sunt <a> in SVG, cu
   tabindex=-1: schema ramane o imagine pentru cititorul de ecran (figure
   role=img, svg aria-hidden), iar aceleasi pagini sunt in navigatie. */
.centrala .c-link{cursor:pointer}
.centrala .c-pop, .centrala .c-pachet{pointer-events:none}
.centrala .c-link:hover .c-corp{stroke-opacity:1}
.centrala .c-link:hover .c-fund .c-corp{fill:#21140E; stroke:rgba(240,78,35,1)}
.centrala .c-link:hover .c-et{fill:#fff}