import { keyframes } from '@vanilla-extract/css';

// Fireflies — a slow, gentle PAN of sparse glowing motes across a warm summer
// dusk. The scene in animFireflies.ts stacks these background layers:
//   1. large bright motes  — tile 227x227, brightest core+halo, drifts FASTEST
//   2. medium motes        — tile 293x293, dimmer, medium drift
//   3. tiny far sparks     — tile 179x179, faintest, drifts SLOWEST (small step)
//   4. center vignette      (100% 100%) — STATIC
//   5. warm dusk wash A     (100% 100%) — STATIC
//   6. warm dusk wash B     (100% 100%) — STATIC
//
// Seamless drift: the single `animation` shorthand shares ONE duration across all
// layers, so the differing apparent speeds come purely from how FAR each layer
// travels. For a jump-free loop every mote layer must translate by an EXACT
// integer multiple of its own tile period in BOTH axes, so the mote re-entering
// at the wrap is identical to the one that left. Each layer moves exactly one
// full tile:
//   large : -227 / -227  (1 x 227)
//   medium: -293 / -293  (1 x 293)  — bigger tile, same 1-tile move => SLOWER look
//   far   : -179 / -179  (1 x 179)  — smallest tile, damped by low opacity so it
//                                     reads as the calm distant layer
// Because tile sizes differ, one shared 1-tile translation yields three distinct
// apparent speeds — the wandering-firefly parallax — while every layer lands back
// on an identical phase at 100% for a perfectly seamless repeat.
//
// The diagonal component (both x and y shift) makes motes feel like they wander
// through the meadow rather than slide flatly. The three static layers (vignette
// and the two dusk washes) are pinned at '0 0' every frame so the warm ambient
// glow and the calm reading center never move under the text.
//
// The '0%' frame MUST match the static backgroundPosition authored in
// animFireflies.ts, so when getChatBg STRIPS this animation for
// prefers-reduced-motion the finished scene of glowing motes shows without a jump.
export const firefliesDrift = keyframes({
  '0%': {
    // large, medium, far, vignette, wash A, wash B
    backgroundPosition: '0 0, 83px 47px, 131px 101px, 0 0, 0 0, 0 0',
  },
  '100%': {
    // large: 0-227 / 0-227
    // medium: 83-293 / 47-293
    // far: 131-179 / 101-179
    backgroundPosition: '-227px -227px, -210px -246px, -48px -78px, 0 0, 0 0, 0 0',
  },
});