HUD Brackets

Goal: Create a "HUD Brackets" input focus animation.

Visual behavior: Four L-shaped amber corner brackets frame the input. At rest they sit 4px outside the input corners (offset position) with low opacity. On focus they animate inward to -4px (just inside the corner) and brighten to full amber (#f59e0b), locking the input inside a targeting reticle. The input itself shifts to an amber tint.

Technique:
- Wrapper div with position:relative and padding for bracket space
- Four span elements absolutely positioned at each corner (top-left, top-right, bottom-left, bottom-right)
- Each span has border on two sides (the two arms of the L): e.g. top-left has border-top + border-left
- Bracket position (top/left/bottom/right values) transitions from offset to locked on focus
- Input border color and text color transition to amber on focus
- CSS transition on all bracket properties: 220ms cubic-bezier(0.22,1,0.36,1)

Accessibility: Brackets snap to locked position instantly under prefers-reduced-motion.

My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}

Return a single self-contained component. Do not introduce dependencies beyond what I've listed.

Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK / YOUR_STYLING / YOUR_CONSTRAINTS before sending.