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

/**
 * Clover tumble — a shamrock silhouette drifts down while tumbling on two axes.
 * GPU-only: a single tall translateY plus rotate; per-clover duration/delay and
 * a decoupled sway (below) create organic, non-repeating paths. The horizontal
 * offsets stay small so clovers fall roughly in their column.
 */
export const animCloverTumble = keyframes({
  '0%': { transform: 'translate3d(0, -10vh, 0) rotate(0deg)', opacity: '0' },
  '8%': { opacity: '1' },
  '50%': { transform: 'translate3d(12px, 50vh, 0) rotate(220deg)' },
  '92%': { opacity: '0.8' },
  '100%': { transform: 'translate3d(-8px, 114vh, 0) rotate(420deg)', opacity: '0' },
});

/**
 * Lateral sway applied to a clover's wrapper so the descent reads as a leaf
 * caught by a breeze, decoupled from the fall for an organic combined path.
 */
export const animCloverSway = keyframes({
  '0%': { transform: 'translate3d(0, 0, 0)' },
  '50%': { transform: 'translate3d(20px, 0, 0)' },
  '100%': { transform: 'translate3d(0, 0, 0)' },
});

/**
 * Verdant ambiance breathe — the emerald wash and vignette gently swell so the
 * static tint feels alive without distracting motion. Opacity only.
 */
export const animVerdantBreathe = keyframes({
  '0%': { opacity: '0.8' },
  '50%': { opacity: '1' },
  '100%': { opacity: '0.8' },
});

/**
 * Rainbow shimmer — the soft arc in the corner slowly slides and breathes.
 * Uses translate + scale + opacity (never background-position) so it stays on
 * the compositor.
 */
export const animRainbowShimmer = keyframes({
  '0%': { transform: 'translate3d(-3%, 1%, 0) scale(1)', opacity: '0.45' },
  '50%': { transform: 'translate3d(3%, -1%, 0) scale(1.04)', opacity: '0.7' },
  '100%': { transform: 'translate3d(-3%, 1%, 0) scale(1)', opacity: '0.45' },
});

/**
 * Gold coin glint — a metallic disc tilts and brightens as a struck-light
 * flicker, then settles. Transform + opacity only so it composites cheaply.
 */
export const animCoinGlint = keyframes({
  '0%': { transform: 'scale(0.9) rotate(-8deg)', opacity: '0.35' },
  '20%': { transform: 'scale(1.06) rotate(0deg)', opacity: '0.9' },
  '45%': { transform: 'scale(0.94) rotate(6deg)', opacity: '0.5' },
  '100%': { transform: 'scale(0.9) rotate(-8deg)', opacity: '0.35' },
});

/**
 * Sparkle mote twinkle — a tiny golden point pulses in scale and brightness
 * like a struck spark of luck. Opacity + transform only.
 */
export const animMoteTwinkle = keyframes({
  '0%': { transform: 'scale(0.5)', opacity: '0.1' },
  '50%': { transform: 'scale(1.25)', opacity: '0.95' },
  '100%': { transform: 'scale(0.5)', opacity: '0.1' },
});