Confetti burst — confetti care sar din card la hover

• Un card patrat cu logo si numele „notch”, in mijlocul ecranului. Cand mouse-ul intra peste card, din centrul lui sar 20 de bucati de confetti (doua poze rotunde, una inchisa si una deschisa).
• Fiecare bucata are marime, viteza si rotatie la intamplare: urca, se imprastie lateral, cade sub gravitatie si se stinge dupa ce a parcurs cam 1000px. La fiecare noua intrare a mouse-ului vine o noua explozie.
• Miscarea e calculata de mana, cadru cu cadru, pe gsap.ticker (nu sunt tween-uri): viteza, gravitatia si rotatia se aduna la fiecare cadru, iar gsap.set asaza fiecare bucata.

• GSAP 3.13.0 — deja global pe site. Nimic altceva: fara plugin-uri, fara Lenis.
• Fontul Bricolage Grotesque, din Google Fonts, cu @import pe primul rand din cssCode.
• Trei PNG-uri: cfb-confetti-dark.png si cfb-confetti-light.png (200×200, din 1000×1000), cfb-logo.png (400px lat).
• Conversie rem → px (tema are baza rem de 10px): 2rem → 32px, 8rem → 128px, titlul clamp(4rem, 8vw, 12rem) → clamp(64px, 8vw, 192px).

O sectiune, un element Code. Markup 0,4 KB, CSS 2 KB, JS 4 KB.

• Radacina e un div.cfb (width: 100%); body-ul primeste cfb-page, cu fundalul #e3e3db. Setari de pagina: headerDisabled, footerDisabled, disableLazyLoad.
• Reglajele sunt in CONFIG, sus in JS: cate bucati, marimea minima si maxima, viteza de pornire, cat de lat se imprastie, gravitatia si dupa cati pixeli incep sa se stinga. Pozele sunt in lista IMAGES.
• Particulele se adauga direct in body, ca in sursa, deci regula lor e body.cfb-page .confetti-particle, nu sub .cfb.
• window.__cfbBurst() porneste o explozie din consola, pentru verificare.

• top: 0; left: 0 pe particule, ca pozitia lor sa porneasca sigur din coltul ecranului: in sursa body-ul era gol, aici nu e.
• max-width: none pe particule, ca tema sa nu le limiteze.
• gsap.ticker.wake() dupa ticker.add.
• Pozele, micsorate la marimea la care se vad.

• Pe telefon nu exista hover. Efectul porneste doar daca browserul trimite mouseenter la atingere (de obicei da, dar nu e garantat). Reparatia: acelasi triggerBurst si pe pointerdown.
• Ticker-ul ruleaza tot timpul, chiar cand nu e nicio particula. Consumul e mic, dar exista.
• letter-spacing: -2% nu e valid, browserul il ignora.

• Tabul ascuns nu misca nimic (cadrele sunt oprite). Verificarea s-a facut intr-o copie locala in Playwright: la hover apar 20 de particule, toate cu poza incarcata, si toate dispar dupa vreo 2,5 secunde; zero overflow la latime mare si la 390px.

1. Micsoreaza si redenumeste pozele (prefix cfb-), urca-le intr-un pachet base64 prin create-upload-link, cu md5 verificat.
2. Pune markup-ul intr-un div.cfb, scopeaza CSS-ul sub .cfb, converteste rem in px; regula particulelor ramane pe body.cfb-page.
3. Aplatizeaza modulul intr-un IIFE (gsap e global), scoate reglajele in CONFIG si pozele in IMAGES.
4. Scrie arborele cu wp_slash() si semnatura, verifica md5 la citire, regenereaza CSS-ul Bricks, goleste cache-ul.
5. Verifica explozia intr-o copie locala (tabul ascuns nu misca nimic).