Daniel Korr Slider — evantaiul de poze fara capat

• Un evantai de carduri cu poze, pe tot ecranul. Fiecare card e mai la dreapta, mai mic, mai rotit, mai intunecat si mai neclar decat cel dinainte; cardul din fata e clar si drept.
• Rotita mouse-ului sau degetul misca tot evantaiul. Miscarea e netezita (cardurile ajung din urma tinta cu 7,5% din distanta pe cadru), iar dupa 250 ms de liniste evantaiul se aseaza pe cel mai apropiat card.
• Nu se termina niciodata. Exista doar 16 carduri-rama; cand una iese prin stanga, reapare la coada din dreapta si isi schimba poza. Pozele (10 aici) se repeta in ordine, oricate ar fi.
• Ordinea de suprapunere se schimba dupa directie: cardul care pleaca ramane deasupra pana trece de jumatate, apoi coboara sub cel care vine.

• GSAP 3.13.0 — deja global pe site. Nimic altceva: fara ScrollTrigger, fara Lenis.
• Zece fotografii 1200×900, 1,3 MB in total, urcate ca atare (erau deja la marimea potrivita), redenumite korr-01..10.jpg.
• Conversie rem → px: 0.5rem → 8px, 2rem → 32px (tema are baza rem de 10px).

O sectiune, un element Code. Markup 0,4 KB (doar rama goala — scriptul construieste cardurile), CSS 1,4 KB, JS 7 KB.

• Radacina: sectiunea .korr, _padding 0, _width: 100%. Element Code cu noRoot, executeCode, language: html, signature => wp_hash($code).
• Page settings: bodyClasses: korr (cu overflow: hidden — pe pagina asta nu are ce sa se deruleze), headerDisabled, footerDisabled, disableLazyLoad.
• Pozele stau intr-o lista, IMAGES, sus in JS. Sursa compunea calea (/img${n}.jpg) si avea numarul de poze separat, in imageCount; aici numarul vine din lungimea listei, deci la mutare inlocuiesti lista si atat.
• Toate reglajele sunt in CONFIG, cu cate un comentariu: cate carduri se vad, pasul de rotatie, de scalare, de blur, de luminozitate, sensibilitatea rotitei si a degetului, netezirea, intarzierea de asezare.
• Pe o pagina de client, sliderul nu trebuie sa ocupe ecranul: schimbi .slider din position: fixed in position: relative cu o inaltime, si scoti overflow: hidden de pe body. Atentie ca sliderul inghite rotita cat timp cursorul e deasupra lui.

• Ascultatorii touchstart / touchmove sunt declarati passive: true. Nu schimba nimic vizibil (blocarea scroll-ului o face touch-action: none din CSS), dar scoate avertismentul Chrome.
• gsap.ticker.wake() dupa ticker.add, ca miscarea sa porneasca sigur la primul gest.
• max-width: none pe imagini, ca tema sa nu le limiteze.

• Blur pe 16 carduri, la fiecare cadru. filter: blur() e scump. Pe un telefon slab miscarea poate sacada; daca se intampla, pune blurStep: 0 — efectul ramane, doar fara ceata.
• Sliderul opreste rotita (preventDefault). E intentionat, dar pe o pagina care mai are si altceva, utilizatorul nu mai poate derula pagina cu cursorul deasupra sliderului.
• Tabul ascuns: nimic nu se misca la rotita, pentru ca miscarea merge pe cadre. Verificarea s-a facut intr-o copie locala in Playwright (16 carduri, toate cu poza; dupa rotita in jos cardul din fata trece de la korr-01 la korr-05, dupa rotita in sus la korr-10 — adica bucla merge si inapoi).

1. Urca pozele (redenumite cu prefix) cu create-upload-link, zip in base64, md5 verificat la destinatie.
2. Scopeaza CSS-ul sub .korr, converteste rem in px, pune max-width: none pe img.
3. Aplatizeaza scriptul intr-un IIFE cu garda de DOM gata si garda de rulare dubla; scoate pozele intr-o lista sus.
4. Scrie arborele cu wp_slash() si semnatura, verifica md5 la citire, regenereaza CSS-ul Bricks.
5. Verifica: 16 carduri, 16 poze incarcate, 16 transformari diferite, zero overflow orizontal la latime mare si la 390px; miscarea propriu-zisa intr-o copie locala.