/**
 * Animation Utilities for HomePage
 *
 * Provides reusable animation functions and keyframes for consistent
 * motion design across the HomePage and its components.
 *
 * All animations respect user's reduced motion preferences.
 */
/**
 * Creates a CSS transition string
 * @param property - CSS property or array of properties to transition
 * @param duration - Duration key or milliseconds
 * @param easing - Easing function key
 * @returns CSS transition string
 */
export declare const createTransition: (property: string | string[], duration?: number, easing?: string) => string;
/**
 * Creates animation style object for MUI sx prop
 * @param animationName - Name of the keyframes animation
 * @param duration - Duration in milliseconds
 * @param easing - Easing function
 * @param iterationCount - Number of times to repeat (default 1)
 * @returns Style object with animation properties
 */
export declare const createAnimationStyles: (animationName: string, duration?: number, easing?: string, iterationCount?: number | "infinite") => {
    animationIterationCount?: number | "infinite" | undefined;
    animation: string;
};
/**
 * Slide Down Animation - For TopBar expansion
 */
export declare const getSlideDownAnimation: () => {
    "@keyframes slideDown": {
        "0%": {
            transform: string;
            opacity: number;
        };
        "100%": {
            transform: string;
            opacity: number;
        };
    };
};
/**
 * Fade In Up Animation - For card entrance
 */
export declare const getFadeInUpAnimation: () => {
    "@keyframes fadeInUp": {
        "0%": {
            transform: string;
            opacity: number;
        };
        "100%": {
            transform: string;
            opacity: number;
        };
    };
};
/**
 * Scale Spring Animation - For interactive elements
 */
export declare const getScaleSpringAnimation: () => {
    "@keyframes scaleSpring": {
        "0%": {
            transform: string;
        };
        "50%": {
            transform: string;
        };
        "100%": {
            transform: string;
        };
    };
};
/**
 * Ripple Animation - For touch feedback
 */
export declare const getRippleAnimation: () => {
    "@keyframes ripple": {
        "0%": {
            transform: string;
            opacity: number;
        };
        "100%": {
            transform: string;
            opacity: number;
        };
    };
};
/**
 * Pulse Animation - For avatar and notification badges
 */
export declare const getPulseAnimation: () => {
    "@keyframes pulse": {
        "0%": {
            transform: string;
            opacity: number;
        };
        "30%": {
            transform: string;
            opacity: number;
        };
        "50%": {
            transform: string;
            opacity: number;
        };
        "70%": {
            transform: string;
            opacity: number;
        };
        "100%": {
            transform: string;
            opacity: number;
        };
    };
};
/**
 * Stagger Animation Helper
 * Creates delay for sequential animations
 * @param index - Item index in list
 * @param baseDelay - Base delay in milliseconds
 * @param increment - Delay increment per item
 * @returns Delay in milliseconds
 */
export declare const getStaggerDelay: (index: number, baseDelay?: number, increment?: number) => number;
/**
 * Hook to detect user's reduced motion preference
 * @returns boolean indicating if user prefers reduced motion
 */
export declare const useReducedMotion: () => boolean;
/**
 * Get animation duration respecting reduced motion preference
 * @param duration - Desired duration
 * @param prefersReducedMotion - User preference
 * @returns Duration (0 if reduced motion preferred)
 */
export declare const getAnimationDuration: (duration: number, prefersReducedMotion: boolean) => number;
/**
 * Scroll-based animation helper
 * Returns opacity and transform based on scroll position
 * @param scrollY - Current scroll position
 * @param threshold - Scroll threshold for full effect
 * @returns Style object with opacity and transform
 */
export declare const getScrollBasedTransform: (scrollY: number, threshold?: number) => {
    opacity: number;
    transform: string;
};
/**
 * Spring animation configuration
 * Used with animation libraries like Framer Motion
 */
export declare const SPRING_CONFIG: {
    readonly type: "spring";
    readonly stiffness: 300;
    readonly damping: 30;
    readonly mass: 1;
};
/**
 * Common animation variants for reuse
 */
export declare const ANIMATION_VARIANTS: {
    readonly fadeIn: {
        readonly initial: {
            readonly opacity: 0;
        };
        readonly animate: {
            readonly opacity: 1;
        };
        readonly exit: {
            readonly opacity: 0;
        };
    };
    readonly fadeInUp: {
        readonly initial: {
            readonly opacity: 0;
            readonly y: 20;
        };
        readonly animate: {
            readonly opacity: 1;
            readonly y: 0;
        };
        readonly exit: {
            readonly opacity: 0;
            readonly y: -20;
        };
    };
    readonly slideDown: {
        readonly initial: {
            readonly opacity: 0;
            readonly y: -20;
        };
        readonly animate: {
            readonly opacity: 1;
            readonly y: 0;
        };
        readonly exit: {
            readonly opacity: 0;
            readonly y: -20;
        };
    };
    readonly scaleIn: {
        readonly initial: {
            readonly opacity: 0;
            readonly scale: 0.9;
        };
        readonly animate: {
            readonly opacity: 1;
            readonly scale: 1;
        };
        readonly exit: {
            readonly opacity: 0;
            readonly scale: 0.9;
        };
    };
};
/**
 * Type exports
 */
export type AnimationVariant = keyof typeof ANIMATION_VARIANTS;