Dă-mi 5 snippet-uri de clase CSS folosind doar transition (fără JS):

1) Un buton care se ridică 2px și primește umbră la hover
2) Un card care scalează la 1.02 și dezvăluie un border-glow la hover
3) Un link de nav cu un underline care alunecă din stânga
4) O imagine care face zoom 1.05 într-un cadru de dimensiune fixă la hover
5) O iconiță de theme-toggle care se rotește 180° la click (cu clasa .is-dark)

Folosește cubic-bezier(0.22, 1, 0.36, 1) și 300ms pentru toate.
Compatibil Tailwind: dă-mi și CSS brut ȘI clase Tailwind unde e posibil.

Folosesc Next.js 14 + Tailwind + Framer Motion.

Generează aceste 5 componente ca fișiere .tsx, fiecare sub 40 de linii:

1) <FadeUp>, învelește copiii, fade + slide up la intrarea în viewport, stagger după index din părinte
2) <NumberCounter value={1234} />, numără crescător când e în vizor, 1.5s, ease-out
3) <MagneticButton>, buton care se trage ușor spre cursor la hover
4) <PageTransition>, wrapper layout.tsx care face fade între rute
5) <TextReveal>, împarte string-ul în cuvinte, face fade up fiecărui cuvânt cu stagger de 50ms

Respectă prefers-reduced-motion în toate.

Proiect Next.js 14, vreau un hero de landing page 'scroll cinema'.
Construiește-mi:

1) Secțiunea 1, hero fixat (pinned). Pe măsură ce utilizatorul dă scroll, un titlu
   se desparte, un gradient de fundal își schimbă nuanța, iar un text capătă adâncime 3D.

2) Secțiunea 2, scroll orizontal. Trei panouri se mișcă de la dreapta la stânga pe măsură
   ce utilizatorul dă scroll în jos. Fiecare panou are un titlu + imagine.

3) Secțiunea 3, pin-uri stivuite. Trei blocuri de text se fixează unul după altul,
   fiecare făcând fade la cel anterior.

Folosește GSAP + ScrollTrigger. Curăță la unmount. Respectă reduced motion.
Păstrează-le pe toate trei ca componente separate pe care le pot pune într-o pagină.