/* ============================================================================
   Animation Utilities
   ============================================================================ */

/* Animation Variables */
:root {
    --animation-duration: 700ms;
    --animation-delay: 0ms;
    --animation-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --animation-distance: 50px;
}

/* Hide all animated elements by default to prevent FOUC */
/* This ensures elements are hidden before JavaScript runs */
/* Set initial transform states based on animation direction */
[data-animate] {
    opacity: 0;
    visibility: hidden;
    /* Default to fade position (no transform) - use translate3d for GPU acceleration */
    transform: translate3d(0, 0, 0);
}

/* Set initial transform states for each animation direction */
[data-animate="up"] {
    transform: translate3d(0, 50px, 0);
}

[data-animate="down"] {
    transform: translate3d(0, -50px, 0);
}

[data-animate="left"] {
    transform: translate3d(50px, 0, 0);
}

[data-animate="right"] {
    transform: translate3d(-50px, 0, 0);
}

[data-animate="fade"] {
    transform: translate3d(0, 0, 0);
}

/* Base Animation State - Hidden */
.animate-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Base Animation State - Visible */
.animate-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fade In Animation */
.animate-fade-in {
    animation: fadeIn var(--animation-duration, 700ms) var(--animation-easing) var(--animation-delay, 0ms) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Fly Up Animation */
.animate-fly-up {
    animation: flyUp var(--animation-duration, 700ms) var(--animation-easing) var(--animation-delay, 0ms) forwards;
}

@keyframes flyUp {
    from {
        opacity: 0;
        transform: translate3d(0, var(--animation-distance, 50px), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Fly Down Animation */
.animate-fly-down {
    animation: flyDown var(--animation-duration, 700ms) var(--animation-easing) var(--animation-delay, 0ms) forwards;
}

@keyframes flyDown {
    from {
        opacity: 0;
        transform: translate3d(0, calc(-1 * var(--animation-distance, 50px)), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Fly Left Animation */
.animate-fly-left {
    animation: flyLeft var(--animation-duration, 700ms) var(--animation-easing) var(--animation-delay, 0ms) forwards;
}

@keyframes flyLeft {
    from {
        opacity: 0;
        transform: translate3d(var(--animation-distance, 50px), 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Fly Right Animation */
.animate-fly-right {
    animation: flyRight var(--animation-duration, 700ms) var(--animation-easing) var(--animation-delay, 0ms) forwards;
}

@keyframes flyRight {
    from {
        opacity: 0;
        transform: translate3d(calc(-1 * var(--animation-distance, 50px)), 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Disable entrance animations on mobile
   !important needed to override inline <style> FOUC-prevention transforms */
@media (max-width: 768px) {
    [data-animate] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .animate-fade-in,
    .animate-fly-up,
    .animate-fly-down,
    .animate-fly-left,
    .animate-fly-right {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-fly-up,
    .animate-fly-down,
    .animate-fly-left,
    .animate-fly-right {
        animation: fadeIn 300ms ease forwards;
    }

    :root {
        --animation-duration: 300ms;
        --animation-distance: 20px;
    }
}

/* Performance: only promote to GPU layer during active animation.
   translate3d() in keyframes already triggers hardware acceleration,
   so will-change is only needed briefly during the transition. */
.animate-fade-in,
.animate-fly-up,
.animate-fly-down,
.animate-fly-left,
.animate-fly-right {
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.animate-visible {
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}