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

/**
 * Halloween overlay keyframes. Every animation touches ONLY `transform` and
 * `opacity` so the compositor can run them on the GPU without layout/paint.
 * keyframes() returns the generated animation-name string, applied inline.
 */

/** Slow breathing of the sickly moon-glow vignette. */
export const animMoonPulse = keyframes({
  '0%': { transform: 'scale(1)', opacity: '0.55' },
  '50%': { transform: 'scale(1.06)', opacity: '0.8' },
  '100%': { transform: 'scale(1)', opacity: '0.55' },
});

/** Low fog band: drifts sideways while gently rising and swelling. */
export const animFogDrift = keyframes({
  '0%': { transform: 'translate3d(-12%, 6%, 0) scale(1.1)', opacity: '0' },
  '15%': { opacity: '0.5' },
  '50%': { transform: 'translate3d(6%, -2%, 0) scale(1.25)', opacity: '0.65' },
  '85%': { opacity: '0.45' },
  '100%': { transform: 'translate3d(18%, 4%, 0) scale(1.1)', opacity: '0' },
});

/** A bat flaps slowly across the sky in a shallow arc. */
export const animBatGlide = keyframes({
  '0%': { transform: 'translate3d(-12vw, 8vh, 0) scale(0.9)', opacity: '0' },
  '10%': { opacity: '0.7' },
  '45%': { transform: 'translate3d(45vw, -4vh, 0) scale(1)' },
  '80%': { transform: 'translate3d(85vw, 6vh, 0) scale(0.95)', opacity: '0.6' },
  '100%': { transform: 'translate3d(112vw, 2vh, 0) scale(0.9)', opacity: '0' },
});

/** The bat's wings beat — fast vertical squash of the wing element. */
export const animWingFlap = keyframes({
  '0%': { transform: 'scaleY(1) scaleX(1)' },
  '50%': { transform: 'scaleY(0.35) scaleX(1.08)' },
  '100%': { transform: 'scaleY(1) scaleX(1)' },
});

/** Will-o'-wisp ember: floats upward, swaying, pulsing in brightness. */
export const animEmberFloat = keyframes({
  '0%': { transform: 'translate3d(0, 0, 0) scale(0.7)', opacity: '0' },
  '12%': { opacity: '0.85' },
  '35%': { transform: 'translate3d(14px, -28vh, 0) scale(1)' },
  '65%': { transform: 'translate3d(-12px, -55vh, 0) scale(0.9)', opacity: '0.7' },
  '90%': { opacity: '0.25' },
  '100%': { transform: 'translate3d(8px, -82vh, 0) scale(0.6)', opacity: '0' },
});

/** Soft twinkle for embers — independent opacity flicker layered on top. */
export const animEmberTwinkle = keyframes({
  '0%': { opacity: '0.6' },
  '50%': { opacity: '1' },
  '100%': { opacity: '0.6' },
});