Denne side fungerer som komponentens test-surface og dækker hele state-matrixen: rest, hover, un-hover, pressed (visuel no-op), keyboard focus-visible, touch fallback og reduced-motion fallback.
State
Demo
Verifikation
1. Interaktiv demo (primær)
Hold musen over logoet og flyt den væk igen for at se symmetrisk ind/ud.
Dette er den primære interaktive visning og er gjort en smule større end de øvrige states.
2. Rest (Default)
Ringene står i standardposition, og hele wordmarket bruger Green D / White token-farver.
3. Hover (Variant2)
Ringene er byttet diagonalt (samme visuelle mål som hover-prototypen).
4. Pressed (Variant3)
Pressed er bevidst visuel no-op: samme ring-arrangement som hover (kun intern state/timing ændres).
5. Focus-visible
Brug Tab for at flytte fokus til logo-linket.
Fokus genbruger hover/pressed-visualen (swapped rings) og viser samtidig standard outline.
6. Touch fallback
Touch bevarer resting state; swap springes over.
7. Reduced motion
Når reduced motion er aktiv, renderes resting state uden swap-animation, også ved hover.