/* ══════════════════════════════════════════════════════════════════════════
   liquid-chrome — bara care se strânge la derulare, flotantele care se
   micșorează, indicatorul lichid. Comun tuturor site-urilor Elevarts.

   Sursa: /opt/elevarts/claude-pack/content/liquid-chrome/ (10.09.2026)
   NU edita copia din site — editează aici și recopiază, altfel site-urile
   diverg tăcut și lecția învățată pe unul nu ajunge la celelalte.

   Culorile NU vin de aici. Fiecare site își păstrează tenta lui: kitul cere
   doar `--lq-accent` pentru indicator. Regula „brand propriu, fără elemente
   Elevarts" rămâne întreagă — iboga stă pe verdele lui, funboy pe al lui.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Lăsarea lentă din Instagram. Fără suprareglaj la capăt: o curbă cu bounce
     face bara să pară de jucărie exact când vrei să pară scumpă. */
  --lq-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --lq-slow: 0.48s;
  --lq-shrink: 0.9;
  --lq-fab-shrink: 0.68;
  --lq-accent: rgba(255, 255, 255, 0.13);
}

/* Se folosește proprietatea `scale`, nu `transform: scale()`: multe navuri au
   deja un transform al lor (`translateX(-50%)` pentru centrare, un `translateY`
   de animație, un `@keyframes` care îl mișcă). `transform` l-ar înlocui și le-ar
   rupe așezarea; `scale` se compune peste el. Aceeași origine, același efect.

   ── Bara ──────────────────────────────────────────────────────────────────
   Se scalează întreagă, nu pe proprietăți. Pe elevarts.com bara e complexă și
   acolo se animă înălțimea, logoul și taburile separat; aici, pe navuri simple
   dintr-un singur rând, scalarea dă același efect cu o linie și fără nicio
   șansă să rupă un aranjament pe care kitul nu-l cunoaște.
   Nu reflowează nimic: cutia rămâne la fel, doar desenul se strânge. */
.lq-bar {
  transform-origin: 50% 0;
  transition: scale var(--lq-slow) var(--lq-ease);
  scale: 1;
}
html[data-chrome="down"] .lq-bar {
  scale: var(--lq-shrink);
}
/* Cine navighează cu tastatura nu derulează: dacă ceva din bară primește focus,
   bara revine la mărime, oricare ar fi steagul. */
html[data-chrome="down"] .lq-bar:focus-within {
  scale: 1;
}
/* Cu sertarul de mobil deschis bara e ecranul întreg — scalată, i-ar tăia capul. */
html[data-chrome="down"] .lq-bar.is-open,
html[data-chrome="down"] .lq-bar[data-open="true"] {
  scale: 1;
}

/* ── Flotantele ────────────────────────────────────────────────────────────
   Colțul din dreapta-jos e cel mai scump loc de pe un telefon. Cât citești,
   WhatsApp rămâne la îndemână dar nu mai stă peste conținut cu 48px. Originea
   e chiar colțul, ca micșorarea să nu le mute de sub deget.
   Fără umbră — sunt deja detașate de pagină, a doua elevație arată ieftin. */
.lq-fabs {
  transform-origin: 100% 100%;
  transition: scale var(--lq-slow) var(--lq-ease);
  scale: 1;
}
html[data-chrome="down"] .lq-fabs {
  scale: var(--lq-fab-shrink);
}

/* ── Indicatorul lichid ────────────────────────────────────────────────────
   Stratul filtrat nu conține text și nu primește niciodată: filtrul aplicat
   peste litere le înmoaie, iar în Safari rupe `backdrop-filter` de sub el.
   Capul merge la ținta, picătura rămâne în urmă, filtrul le ține legate cu o
   punte care se subțiază. Îl umple liquid-chrome.js. */
.lq-ind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: url(#lq-goo);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lq-ind.is-on {
  opacity: 1;
}
.lq-ind i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 34px;
  margin-top: -17px;
  border-radius: 12px;
  background: var(--lq-accent);
  will-change: transform, width;
}
.lq-ind__drop {
  height: 22px;
  margin-top: -11px;
}
/* Elementele de navigare trebuie să stea PESTE stratul filtrat, nu sub el. */
.lq-links > * {
  position: relative;
  z-index: 1;
}
/* Cu indicatorul pe ecran, fundalul propriu al linkului activ ar fi a doua
   pastilă peste prima. Clasa o pune JS-ul, deci fără el nimic nu se pierde. */
.lq-links.has-ind > a.active,
.lq-links.has-ind > a[aria-current="page"] {
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .lq-bar,
  .lq-fabs,
  .lq-ind {
    transition: none;
  }
}