cinny/src/app/components/seasonal/themes/Autumn.css.ts

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

/**
 * Autumn overlay keyframes. Every animation touches ONLY `transform` and
 * `opacity` so the compositor can run them without layout or paint.
 */

/**
 * A leaf falls from above to below the viewport while slowly turning. One tall
 * translateY serves every leaf; per-leaf duration/delay/size give parallax.
 */
export const animLeafFall = keyframes({
  '0%': { transform: 'translate3d(0, -12vh, 0) rotate(-30deg)', opacity: '0' },
  '6%': { opacity: '1' },
  '50%': { transform: 'translate3d(10px, 50vh, 0) rotate(160deg)' },
  '94%': { opacity: '0.9' },
  '100%': { transform: 'translate3d(-6px, 114vh, 0) rotate(340deg)', opacity: '0' },
});

/** Lateral sway on the leaf's wrapper so the descent reads as wind. */
export const animLeafSway = keyframes({
  '0%': { transform: 'translate3d(0, 0, 0)' },
  '50%': { transform: 'translate3d(34px, 0, 0)' },
  '100%': { transform: 'translate3d(0, 0, 0)' },
});

/**
 * Soft flutter on the blade. [#237] Gentler than before (scaleX 0.82 made
 * leaves flatten into slivers mid-flip).
 */
export const animLeafFlutter = keyframes({
  '0%': { transform: 'rotate(-10deg) scaleX(1)' },
  '50%': { transform: 'rotate(10deg) scaleX(0.92)' },
  '100%': { transform: 'rotate(-10deg) scaleX(1)' },
});

/**
 * [#237] A gust: the leaf enters from the left, is blown across and up while
 * spinning, and leaves on the right in ~6 s (14 % of a 42 s cycle). The rest
 * of the cycle it waits off-screen, invisible.
 */
export const animGust = keyframes({
  '0%': { transform: 'translate3d(-12vw, 0, 0) rotate(0deg)', opacity: '0' },
  '1%': { opacity: '1' },
  // Fast in, then carried steadily across and up (linear timing: an eased
  // curve would apply per segment and stop the leaves mid-air).
  '3.5%': { transform: 'translate3d(22vw, -3vh, 0) rotate(200deg)' },
  '8%': { transform: 'translate3d(62vw, -12vh, 0) rotate(420deg)' },
  '12.5%': { opacity: '1' },
  '14%': { transform: 'translate3d(112vw, -24vh, 0) rotate(700deg)', opacity: '0' },
  '100%': { transform: 'translate3d(112vw, -24vh, 0) rotate(700deg)', opacity: '0' },
});

/**
 * Leaf blade. On the dark themes the crimson/russet leaves sank into the
 * background, so they are lifted there.
 */
export const leafBlade = style({
  selectors: {
    'body.dark-theme &, body.butter-theme &': {
      filter: 'brightness(1.6) saturate(1.2)',
    },
  },
});