/* css/animations.css */

/* --- General Keyframe Animations --- */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.anim-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Fade In Up (Subtle) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.anim-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Fade In Down (Subtle) */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.anim-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
}


/* Fade In Left (Subtle) */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.anim-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

/* Fade In Right (Subtle) */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.anim-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.anim-zoom-in {
    animation: zoomIn 0.7s ease-out forwards;
}


/* --- Hover Animations & Effects --- */

/* Slight Grow Effect for Cards/Interactive Elements */
.hover-grow {
    transition: transform 0.3s ease-in-out;
}
.hover-grow:hover {
    transform: scale(1.03);
}

/* Icon Bobble/Attention Grabber (can be used on CTA icons) */
@keyframes iconBobble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.anim-icon-bobble:hover i, /* If i is direct child */
.anim-icon-bobble:hover .fas, /* If Font Awesome icon */
.anim-icon-bobble:hover .far,
.anim-icon-bobble:hover .fal,
.anim-icon-bobble:hover .fab {
    animation: iconBobble 0.5s ease-in-out infinite;
}


/* Button Hover - Subtle Shine Effect */
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    transition: transform 0.5s ease;
    opacity: 0;
}
.btn-shine:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(-20%, -20%); /* Adjust for shine sweep */
}


/* Pulse animation for important CTAs (use sparingly) */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4); /* var(--secondary-color) with alpha */
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}
.anim-pulse {
    animation: pulse 2s infinite;
    border-radius: var(--border-radius); /* Ensure it matches button's border-radius */
}
/* Example for applying to a specific button color: */
.btn-primary.anim-pulse {
     animation-name: pulse-primary; /* Needs its own keyframe for specific color */
}
@keyframes pulse-primary {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5); } /* Match --secondary-color */
    70% { box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}
.btn-secondary.anim-pulse {
     animation-name: pulse-secondary;
}
@keyframes pulse-secondary {
    0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.5); } /* Match --accent-color */
    70% { box-shadow: 0 0 0 15px rgba(255, 165, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
}


/* --- Utility for Animation Delays --- */
/* You might not need these if AOS handles delays well, but useful for custom sequences */
.anim-delay-100 { animation-delay: 0.1s !important; }
.anim-delay-200 { animation-delay: 0.2s !important; }
.anim-delay-300 { animation-delay: 0.3s !important; }
.anim-delay-400 { animation-delay: 0.4s !important; }
.anim-delay-500 { animation-delay: 0.5s !important; }

/*
   How to use:
   Add the class to your HTML element.
   Example: <div class="feature-item anim-fade-in-up">...</div>
            <a href="#" class="btn btn-primary btn-shine">Invest Now</a>
            <a href="#" class="btn btn-secondary anim-pulse">Urgent CTA!</a>

   Note:
   - 'forwards' in animation-fill-mode means the element will retain the styles of the
     last keyframe after the animation finishes.
   - These are alternatives or complements to AOS. If you use AOS for an element,
     you generally wouldn't apply a custom entrance animation like 'anim-fade-in-up'
     to the same element unless you're trying something very specific.
   - Hover effects can be combined with AOS.
*/

/* css/animations.css - ADD THESE FOR BAR CHARTS */

/* Bar Grow Animation (Vertical) */
@keyframes barGrow {
    from { height: 0%; }
    to { height: var(--target-height, 100%); } /* Fallback to 100% if var not set */
}
.anim-bar-grow {
    /* height will be set by JS or directly if not using JS for trigger */
    /* animation: barGrow 1s ease-out forwards; Applied by JS when in view */
}
.anim-bar-grow.is-visible { /* Class added by JS */
    animation: barGrow 1s 0.3s ease-out forwards; /* Add a slight delay */
}
.anim-bar-grow.is-visible {
    height: var(--target-height); /* Ensure final state is set even if animation is quick */
}


/* Bar Segment Grow Animation (Horizontal) */
@keyframes barSegmentGrow {
    from { width: 0%; }
    to { width: var(--target-width, 100%); }
}
.anim-bar-segment-grow {
    /* width will be set by JS or directly */
}
.anim-bar-segment-grow.is-visible { /* Class added by JS */
    animation: barSegmentGrow 1s 0.3s ease-out forwards;
    width: var(--target-width);
}

/* Add a more pronounced hover effect for benefit items if desired */
.benefit-item.hover-grow:hover {
    transform: scale(1.02) translateX(5px); /* Combine grow with slight shift */
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}