# bionic-design-system

Sursa unica de design pentru build-urile premium. Acelasi sistem in doua lane-uri:
zero-build HTML (Netlify) si Astro/R3F.

## Reguli baked-in (nu se incalca)
- Neutrale OKLCH, ritm vertical 8px, doar `transform`+`opacity` pe GPU
- Easing custom `--ease: cubic-bezier(.16,1,.3,1)` — fara bounce
- Tipografie: Clash Display (display) + Satoshi (body) — niciodata Inter
- Fara purple gradient, fara cards-in-cards, fara gray text pe color bg

## Continut
- `css/tokens.css` — single source: culori, scala tipografica, spacing, motion
- `css/base.css` — reset, body, nav, .btn, .magnetic, cursor, reveal, grain
- `css/components.css` — hero, rail produse, cinema (video no-cost), features, cta
- `css/fonts.css` — Fontshare (Clash + Satoshi)
- `js/interactions.js` — initCursor, initNav, initMagnetic, initTilt, initRail, initReveal
- `js/hero.js` — initHero (point-cloud 3D, necesita global THREE)
- `js/index.js` — initSystem(opts) ruleaza tot

## Lane A — zero-build HTML (Netlify)
```html
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<!-- inainte de modul: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
<script type="module">
  import { initSystem } from "./js/index.js";
  initSystem();
</script>
```

## Lane B — Astro / React
Importa `tokens.css` + `base.css` global; portul R3F al hero-ului vine in stage urmator.
`initMagnetic` / `initTilt` / `initReveal` se pot apela dintr-un `useEffect`.

## API
`initSystem({ hero:true, heroCanvas:"#scene", heroOpts:{ colorA:0xb5532b, colorB:0xf2c36b } })`

Vezi `demo/index.html` — pagina-proof completa, cablata pe pachet.