/* ============================================================
   EASI - Trasee de circuit animate in hero (homepage + banner pagini + profil)
   ACEEASI regula peste tot: 5 trasee in stanga + 5 in dreapta, aceleasi
   forme, aceeasi grosime/culoare, aceeasi viteza a impulsurilor.
   Desenul e in pixeli reali, legat de marginile ecranului (vezi
   easi_circuit_svg in functions.php). Centrul ramane liber pentru text.
   Hero-ul e inchis la culoare in ambele teme, deci culorile sunt aceleasi.

   Pe dispozitive (aceeasi imagine, doar proportional):
   - calculator (> 1024px): marime normala;
   - tableta (641-1024px): 80%;
   - telefon (<= 640px): 60%.
   Estomparea spre centru se face in procente din latime, deci arata la fel
   pe orice ecran (marginile clare, mijlocul discret, sub text).
   ============================================================ */

.easi-circ{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block; overflow:hidden;
  /* VITEZA impulsurilor (o singura valoare pentru tot site-ul): mareste = mai lent */
  --easi-pulse-scale:3;
  /* traseele sunt clare pe margini si se estompeaza spre mijloc, unde e textul */
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 16%, rgba(0,0,0,.22) 34%, rgba(0,0,0,.22) 66%, #000 84%, #000 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 16%, rgba(0,0,0,.22) 34%, rgba(0,0,0,.22) 66%, #000 84%, #000 100%);
}
/* pe homepage stau peste stratul intunecat al video-ului, sub text */
.easi-hero--video .easi-circ{ z-index:1; }

/* Bannerele cu fotografie: stratul intunecat peste poza e putin mai inalt decat bannerul,
   ca sa nu ramana jos o linie subtire de poza neacoperita (aparea pe ecranele cu
   scalare 125% / 150%, din cauza rotunjirii la jumatate de pixel). */
.easi-hero.easi-hero--photo{
  background-size:100% calc(100% + 4px), cover !important;
  background-position:center, center !important;
  background-repeat:no-repeat, no-repeat !important;
}

/* Profil profesor: partea stanga e desenata in jurul pozei (in interiorul containerului) */
.easi-hero .easi-circ--profile-left{
  inset:auto; left:24px; top:50%; width:1px; height:1px; overflow:visible; z-index:-1;
  -webkit-mask-image:none; mask-image:none;
}
/* pe profil, varianta "ca la toate paginile" e folosita doar pe tableta mica / telefon */
.easi-hero--prof .easi-circ--page{ display:none; }

/* Traseele (statice) - identice pe toate paginile */
.easi-circ__traces path{
  fill:none; stroke:rgba(140,165,240,.22); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.easi-circ__pads circle{
  fill:#0e1830; stroke:rgba(140,165,240,.42); stroke-width:1.2;
}

/* Impulsurile de lumina
   Fiecare impuls traverseaza traseul in ~70% din ciclu, apoi traseul
   ramane liber putin pana la urmatorul. Intarzierile sunt negative, deci
   impulsurile sunt deja in miscare din momentul in care se deschide pagina. */
.easi-circ__pulses path{
  fill:none; stroke:#b4c8ff; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:46 2000; stroke-dashoffset:46; opacity:0;
  animation-name:easiPulse;
  animation-duration:calc(var(--d, 4s) * var(--easi-pulse-scale));
  animation-delay:calc(var(--dl, 0s) * var(--easi-pulse-scale));
  animation-timing-function:cubic-bezier(.4,0,.6,1);
  animation-iteration-count:infinite;
}
@keyframes easiPulse{
  0%   { stroke-dashoffset:46;    opacity:0; }
  5%   { opacity:1; }
  64%  { opacity:1; }
  72%  { stroke-dashoffset:-1000; opacity:0; }
  100% { stroke-dashoffset:-1000; opacity:0; }
}

/* Liniile se aprind langa cursor (doar pe calculator; JS: assets/easi-fx.js).
   Copia luminoasa a traseelor e vizibila doar intr-un cerc moale in jurul mouse-ului. */
.easi-circ__lit{ opacity:0; transition:opacity .45s ease; filter:drop-shadow(0 0 3px rgba(150,180,255,.75)); }
.easi-hero.is-lit .easi-circ__lit{ opacity:1; }
.easi-circ__lit-traces path{ fill:none; stroke:#c3d3ff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.easi-circ__lit-pads circle{ fill:#1c2b52; stroke:#dbe5ff; stroke-width:1.6; }

/* ---------- Tableta (641-1024px): aceleasi trasee, la 80% ---------- */
@media (max-width:1024px){
  .easi-circ__side{ transform:scale(.8); transform-origin:0 0; }
}
/* Tableta mica si telefon: pe profil, poza si textul se aseaza centrat (ca pe restul
   paginilor), deci se folosesc exact traseele de pe celelalte pagini. */
@media (max-width:900px){
  .easi-hero .easi-circ--profile-left,
  .easi-hero--prof .easi-circ--profile{ display:none; }
  .easi-hero--prof .easi-circ--page{ display:block; }
}
/* ---------- Telefon (<= 640px): aceleasi trasee, la 60% ---------- */
@media (max-width:640px){
  .easi-circ__side{ transform:scale(.6); }
}

/* Fara animatii pentru cine le-a dezactivat: raman doar traseele statice */
@media (prefers-reduced-motion: reduce){
  .easi-circ__pulses{ display:none; }
  .easi-circ__lit{ display:none; }
}