/* ============================================================
   LUMIO — illustration system animations (Design system v2)

   Keyframes + utility classes for the primitives in illustrations.js.
   Loaded after tokens.css and before styles.css so they're available
   to any consumer (preview HTML, future restyled screens) but never
   affect existing markup that doesn't opt in via these classes.

   Naming: every illustration class is prefixed `lumio-` so the
   namespace stays isolated from the legacy styles.css selectors.
   ============================================================ */

/* ── sparkle twinkle ─────────────────────────────────────────
   Gentle scale + opacity loop — driven entirely on transform +
   opacity so it composites on the GPU and stays cheap even with
   many sparkles in a starField. Add the .lumio-el--twinkle class
   to any element to enable; sparkle({twinkle:true}) adds it for
   you.
*/
.lumio-el--twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: lumio-twinkle var(--dur-idle, 3200ms) ease-in-out infinite;
}
.lumio-el--twinkle > path,
.lumio-el--twinkle > circle,
.lumio-el--twinkle > polygon {
  transform-box: fill-box;
  transform-origin: center;
  animation: lumio-twinkle var(--dur-idle, 3200ms) ease-in-out infinite;
}
@keyframes lumio-twinkle {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.75); }
}

/* Staggered variants — when sparkles are clustered, the same
   keyframe firing in unison across all of them looks artificial.
   Apply one of these to randomise the phase.
*/
.lumio-el--twinkle.lumio-el--twinkle-d1 { animation-delay: 400ms;  }
.lumio-el--twinkle.lumio-el--twinkle-d2 { animation-delay: 1200ms; }
.lumio-el--twinkle.lumio-el--twinkle-d3 { animation-delay: 2000ms; }

/* ── slow drift for clouds (future use) ──────────────────────
   Reserved for cloudWisp opt-in animation. Not enabled by
   default — clouds drifting indefinitely can be visually noisy.
*/
@keyframes lumio-cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(8%); }
}

/* ── gentle idle bob for character (future use) ──────────────
   Reserved for Lucas pose components (Sprint 23.8) so they have
   a touch of life without being distracting.
*/
@keyframes lumio-idle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.2%); }
}