/* ═══════════════════════════════════════════════
   Erin Portfolio — Design System
   Global entry point. Consumers link this file only.
   ═══════════════════════════════════════════════ */
@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/type-styles.css');
@import url('./tokens/spacing.css');

/* ── Sparkle twinkle ─────────────────────────────────────────────────────
   Shared by the Contact page's "Open to Work" status mark and the
   HardestCall component's sparkle. Each of the 3 stars twinkles on its own
   beat. Consumers apply the `ds-sparkle-twinkle` class to a SparkleIcon. */
.ds-sparkle-twinkle path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ds-sparkle-twinkle path { animation: ds-star-spark 3.4s var(--ease-out) infinite; }
  .ds-sparkle-twinkle path:nth-child(1) { animation-delay: 0s;   }
  .ds-sparkle-twinkle path:nth-child(2) { animation-delay: 0.9s; }
  .ds-sparkle-twinkle path:nth-child(3) { animation-delay: 1.8s; }
}
@keyframes ds-star-spark {
  0%, 55%, 100% { transform: scale(1)    rotate(0deg);   opacity: 0.9; }
  22%           { transform: scale(0.65) rotate(-12deg); opacity: 0.5; }
  38%           { transform: scale(1.25) rotate(10deg);  opacity: 1;   }
}