/* Hover pe butonul principal. Un singur gest, nu patru:
   cerneala se deschide din punctul exact in care a intrat cursorul, iar butonul
   se lasa putin dupa el. Amandoua pleaca din acelasi loc, deci se citesc ca un
   singur lucru.

   Au fost taiate literele care se rostogoleau si inelul care pleca din punctul
   de intrare. Nu pentru ca ar fi fost gresite, ci pentru ca fiecare cerea
   atentie separat: patru efecte pe acelasi buton nu se aduna, se anuleaza —
   ochiul nu stie la ce sa se uite si totul pare doar agitat.

   Butonul e randat de Vue si isi ia culorile din variabile inline
   (--background-color, --background-color-hover). Nu le atingem: efectul se
   agata de ele, deci daca schimbi culoarea din builder, efectul o urmeaza. */

.vs-fx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transform: translate3d(var(--vs-tx, 0px), var(--vs-ty, 0px), 0);
  /* Transformarea NU are tranzitie: de miscare se ocupa bucla din JS, care
     apropie butonul de tinta cu putin la fiecare cadru. O tranzitie peste ea ar
     insemna doua netezimi suprapuse — si atunci butonul pare ca inoata, pentru
     ca porneste la fiecare cadru o animatie noua din alt loc. */
  transition: background-color .45s ease;
}

/* Umbra strica gestul: cat timp discul alb acopera butonul, umbra ramane a
   dreptunghiului negru si se vede ca o pata gri sub el. Vine din doua locuri —
   de pe buton (--grid-button-primary-box-shadow-*) si de pe cadrul in care il
   pune builder-ul — deci le taiem pe amandoua. Cadrul il alegem prin :has, ca
   sa nu atingem si celelalte .layout-element din pagina. */
.vs-fx, .vs-fx:hover { box-shadow: none !important; }
.layout-element:has(> .vs-fx) { box-shadow: none !important; }

/* Colturi drepte. Builder-ul le rotunjeste cu 4px, si atunci discul alb —
   taiat de overflow: hidden — nu se suprapune perfect peste fundalul negru
   rotunjit: ramane cate un fir de un pixel de negru in fiecare colt. Se putea
   rotunji si discul, dar la un buton care se plimba prin pagina coltul drept e
   oricum mai ferm decat cel moale. */
.vs-fx { border-radius: 0 !important; }

/* Cerneala. Un disc care porneste exact din punctul in care a intrat cursorul
   si acopera butonul. Diametrul nu e o valoare fixa: JS-ul masoara distanta
   pana la cel mai departat colt si o pune in --vs-d, deci discul acopera si
   cand intri prin colt, si nu creste inutil cand intri prin mijloc.

   Curba e expo-out (.19,1,.22,1): porneste tare si se aseaza lung. Asta face
   diferenta dintre "se umple" si "se deschide". */
.vs-fx__fill {
  position: absolute;
  top: var(--vs-my, 50%);
  left: var(--vs-mx, 50%);
  width: var(--vs-d, 300px);
  height: var(--vs-d, 300px);
  margin: calc(var(--vs-d, 300px) / -2) 0 0 calc(var(--vs-d, 300px) / -2);
  /* Fara rotunjire: pe tot site-ul nu mai exista nicio forma rotunda. */
  background: var(--font-color, #fff);
  transform: scale(0);
  transition: transform .62s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none;
  z-index: -1;
}

.vs-fx.is-on .vs-fx__fill { transform: scale(1); }

/* Textul isi schimba culoarea cu o intarziere mica: discul apuca sa treaca pe
   sub litere inainte ca ele sa se inverseze, deci se citeste ca o acoperire,
   nu ca doua lucruri intamplate deodata. */
.vs-fx__label {
  display: inline-block;
  vertical-align: middle;
  transition: color .2s ease .1s;
}

.vs-fx.is-on .vs-fx__label {
  color: var(--background-color, #121212);
  transition: color .16s ease .06s;
}

.vs-fx__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Cine a cerut mai putina miscare primeste butonul builder-ului, neatins. */
@media (prefers-reduced-motion: reduce) {
  .vs-fx, .vs-fx__ch { transition: none; }
  .vs-fx__fill { display: none; }
}