Collage Art

# Visual style: Collage Art

Magazine collage and mixed-media aesthetics with paper cutouts, multi-layer stacking, torn paper edges, and mixed typography, creating a visually impactful handcrafted creative experience.

## Philosophy
Collage Art style originates from the mixed-media traditions of Dadaism and Pop Art, emphasizing the collision and fusion of different materials, fonts, and images.

Core principles:
- Random rotation: Each element has subtle rotate transforms (0.5-2deg), simulating the imprecision of hand-pasting
- Washi tape decoration: repeating-linear-gradient striped pseudo-elements simulate semi-transparent washi tape
- Mixed typography: Alternating font-serif, font-sans, font-mono on the same page creates a magazine clipping feel
- Torn paper edges: polygon clip-path creates irregular jagged torn paper edges
- Hard offset shadows: shadow-[Npx_Npx_0px] solid offset shadows create physical depth of layered paper scraps
- Paper physicality: On hover, paper scraps lift up (scale-105 + rotation adjustment); on active, pressed down onto the desk (shadow collapses)

## Do
- Use mixed fonts (serif font-serif + sans-serif font-sans + monospace font-mono alternating)
- Use Tailwind arbitrary value rotation rotate-[Ndeg] instead of inline style transform (avoid hover conflicts)
- Use hard offset shadows shadow-[Npx_Npx_0px_color] for layered depth
- Add washi tape decorations: repeating-linear-gradient striped color blocks
- Use polygon clip-path to create torn paper edge effects
- Keep aged paper color bg-[#f5f0e8] as base
- Boldly use contrasting color blocks (red/blue/yellow/purple)
- Use solid and dashed borders to simulate cut marks
- On hover, paper lifts with -translate-y-2 + rotation change + shadow expansion; on active, shadow collapses simulating press-down
- Use group + group-hover:* to make tape decorations respond to card hover, creating parallax effect

## Don't
- No smooth gradients (bg-gradient-to-*)
- No soft rounded corners (rounded-lg or above)
- No frosted glass effects (backdrop-blur)
- No soft shadows (shadow-[0_Npx_Npx])
- No uniform, perfectly aligned layouts
- Never use style={{ transform }} inline property on elements with hover/group-hover Tailwind transforms (causes transform conflicts)

## Rules for the AI
You are a Collage Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Smooth gradients (bg-gradient-to-*)
- Soft rounded corners (rounded-lg, rounded-xl, rounded-2xl, rounded-full)
- Backdrop blur effects (backdrop-blur)
- Soft blur shadows (shadow-[0_Npx_Npx])
- Uniform, perfectly aligned layouts
- Single font family throughout
- NEVER mix style={{ transform: "rotate(Ndeg)" }} with Tailwind hover/group-hover transform classes -- this causes transform conflicts where the inline style overrides Tailwind's CSS variables. Always use rotate-[Ndeg] Tailwind arbitrary class instead.

## Must Follow

- Aged paper background bg-[#f5f0e8]
- Dark charcoal #2d2d2d for borders and text
- Hard offset shadows shadow-[Npx_Npx_0px_#color]
- Sharp corners rounded-sm or rounded-none
- Random rotation via Tailwind arbitrary class rotate-[0.5deg] to rotate-[2deg] (NOT inline style when hover transforms are also applied)
- Mix font families: font-serif, font-sans, font-mono across sections
- Thick borders border-2 border-[#2d2d2d]
- Wrap interactive cards in group div so washi tape can respond via group-hover

## Color Palette

Primary:
- Dark Charcoal: #2d2d2d
- Aged Paper: #f5f0e8
- Cut Red: #e74c3c
- Magazine Blue: #3498db
- Paste Yellow: #f39c12
- Scrap Purple: #9b59b6

## Animation & Interaction Rules

- Paper Lift: On hover, elements should feel physically raised. Use hover:scale-[1.02] combined with a rotation change (e.g., from rotate-[1.5deg] to group-hover:-rotate-[1deg]) and shadow expansion (shadow-[5px_5px] → shadow-[12px_12px]). This simulates a piece of paper being pinched up off a surface.
- Tape Parallax: The washi tape decoration on a card should react slightly differently from the card itself. Wrap the whole component in a group div. The tape div has group-hover:-translate-y-1 group-hover:rotate-[6deg], while the card has group-hover:-translate-y-2 group-hover:-rotate-[1deg]. The tape appears to shift independently, reinforcing the multi-layer physical illusion.
- Desk Press: On :active, the shadow must sharply collapse (shadow-[12px_12px] → shadow-[2px_2px]) and the element shifts slightly down (active:translate-y-1), simulating pressing a paper scrap firmly onto a corkboard.
- Snappy Easing: Use duration-200 ease-out or duration-300 ease-out for all paper interactions. Paper is light and snaps quickly.
- Transform Rules: ALWAYS use Tailwind rotate-[Xdeg] arbitrary class for initial rotation. NEVER use style={{ transform: "rotate(Xdeg)" }} on elements that also use Tailwind hover/group-hover transforms -- they will conflict.

## Unique Elements (Collage-Only)

1. Random rotation: rotate-[0.7deg], -rotate-[1.5deg], rotate-[2deg] etc. (Tailwind arbitrary, not inline style)
2. Washi tape: repeating-linear-gradient(90deg, color 0px, color 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px) strips in a group-hover reactive div
3. Mixed typography: alternate font-serif, font-sans, font-mono across headings, labels, body text
4. Torn paper edges: polygon clip-path with irregular jagged points
5. Dashed borders: border-dashed for stamp/cut-line effects

## Self-Check

After generating code:
1. All initial rotations use rotate-[Xdeg] Tailwind class, not inline style (when hover transforms present)
2. Interactive cards wrapped in group div for tape parallax
3. hover state: scale-105 + rotation change + shadow expansion
4. active state: shadow collapses + slight downward shift
5. Duration 200-300ms ease-out