import { css, keyframes } from '@emotion/react';

const scrollAnimationCSS = css`
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timeline: scroll(root);
  animation-range: 0 calc(200svh - (8 * 48px));
`;

const scaleUpKeyframes = keyframes`
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
`;

const fadeOutKeyframes = keyframes`
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`;

export const fadeOutCSS = css`
  opacity: 0;
  animation-name: ${fadeOutKeyframes};
  ${scrollAnimationCSS};
`;

export const scaleUpKeyframesCSS = css`
  transform: scale(var(--scroll-anim-percentage));
  animation-name: ${scaleUpKeyframes};
  ${scrollAnimationCSS};
`;