Add storefront component migration: cards, badges, progress bars, animations, and React wrapper package

Major feature migration from dt-shopify-storefront into the design system:

- Card system: per-card color modes (normal/emphasis/warning/success/other),
  progress bars, full-bleed card body (card-body-flush), image bevel clip-paths,
  and visible structural borders at bevel corners
- Badge system: dt-card-badge with position-aware offsets for cards vs media frames
- Media frames: dt-bevel-media with inner surface fill, image clipping, and
  "MISSING MEDIA" placeholder for empty containers
- Interactive bevel buttons: dt-btn with hover/selected states and pulse animation
- Menu items: dt-menu-item with active states and level indentation
- Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes
- Feature legend: CSS grid for product feature icons with state colors
- Scrollbar styling for DT brand
- New @dangerousthings/react package wrapping web CSS components
- New @dangerousthings/tailwind-preset package
- New @dangerousthings/hex-background package
- Desktop showcase rewritten in React with Tailwind CSS
- Mobile showcase updated with new screens (animations, filters, advanced cards)
- Tokens: added mode color tokens, RGB variants, and selected-state tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/web/src/components/animations.css

@@ -0,0 +1,137 @@
+/* dt-web-theme: Animation Library */
+/* Source: dt-shopify-storefront animation patterns */
+/* Brand-independent — no color references in keyframes */
+
+/* ============================================================================
+   Entrance Animations
+   ============================================================================ */
+
+@keyframes dt-scale-in {
+  from { transform: scale(0); }
+  to   { transform: scale(1); }
+}
+
+@keyframes dt-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes dt-slide-up {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+/* ============================================================================
+   Interactive Animations
+   ============================================================================ */
+
+@keyframes dt-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.5; }
+}
+
+@keyframes dt-ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes dt-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* ============================================================================
+   Utility Classes
+   ============================================================================ */
+
+.dt-animate-scale-in {
+  animation: dt-scale-in 0.33s ease-in-out both;
+}
+
+.dt-animate-fade-in {
+  animation: dt-fade-in 0.3s ease-in-out both;
+}
+
+.dt-animate-slide-up {
+  animation: dt-slide-up 0.3s ease-in-out both;
+}
+
+.dt-animate-pulse {
+  animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.dt-animate-ping {
+  animation: dt-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+.dt-animate-spin {
+  animation: dt-spin 1s linear infinite;
+}
+
+/* ============================================================================
+   Stagger Container
+   Source: storefront framer-motion staggered card entrance
+   Usage: <div class="dt-stagger-container">...</div>
+   Customize: --dt-stagger-duration, --dt-stagger-interval
+   ============================================================================ */
+
+.dt-stagger-container {
+  --dt-stagger-duration: 0.33s;
+  --dt-stagger-interval: 75ms;
+}
+
+.dt-stagger-container > * {
+  animation: dt-scale-in var(--dt-stagger-duration) ease-in-out both;
+}
+
+.dt-stagger-container > :nth-child(1)  { animation-delay: calc(0  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(2)  { animation-delay: calc(1  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(3)  { animation-delay: calc(2  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(4)  { animation-delay: calc(3  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(5)  { animation-delay: calc(4  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(6)  { animation-delay: calc(5  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(7)  { animation-delay: calc(6  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(8)  { animation-delay: calc(7  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(9)  { animation-delay: calc(8  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(10) { animation-delay: calc(9  * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(11) { animation-delay: calc(10 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(12) { animation-delay: calc(11 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(13) { animation-delay: calc(12 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(14) { animation-delay: calc(13 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(15) { animation-delay: calc(14 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(16) { animation-delay: calc(15 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(17) { animation-delay: calc(16 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(18) { animation-delay: calc(17 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(19) { animation-delay: calc(18 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(20) { animation-delay: calc(19 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(21) { animation-delay: calc(20 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(22) { animation-delay: calc(21 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(23) { animation-delay: calc(22 * var(--dt-stagger-interval)); }
+.dt-stagger-container > :nth-child(24) { animation-delay: calc(23 * var(--dt-stagger-interval)); }
+
+.dt-stagger-container > :nth-child(n+25) {
+  animation-delay: calc(24 * var(--dt-stagger-interval));
+}
+
+/* ============================================================================
+   Transition Utilities
+   ============================================================================ */
+
+.dt-transition-accordion {
+  transition: max-height 250ms ease-in-out;
+}
+
+.dt-transition-chevron {
+  transition: transform 250ms ease-in-out;
+}
+
+.dt-transition-chevron[aria-expanded="true"],
+.dt-transition-chevron.is-expanded {
+  transform: rotate(180deg);
+}
+
+.dt-transition-progress {
+  transition: height 300ms ease-out, width 300ms ease-out;
+}