/* Micro-Interactions — FNL Budgets
   Hover lifts, animated progress bars, and page transitions.
   All colors via --theme-* custom properties. */

/* Card hover lift */
.card-hover-lift {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.card-hover-lift:hover,
.card-hover-lift:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .card-hover-lift:hover,
[data-bs-theme="dark"] .card-hover-lift:focus-within {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Animated progress bar for budget bars */
.progress-animated .progress-bar,
.progress-bar.progress-animated {
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Page content fade-in */
.fade-enter {
    animation: fadeEnter 300ms ease forwards;
}

@keyframes fadeEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none; /* 'none' not 'translateY(0)' — avoids creating stacking context that traps modals */
    }
}

.fade-leave {
    animation: fadeLeave 200ms ease forwards;
}

@keyframes fadeLeave {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* Count-up element — starts hidden until JS kicks in */
[data-count-to] {
    display: inline-block;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .card-hover-lift {
        transition: none;
    }

    .card-hover-lift:hover {
        transform: none;
    }

    .progress-animated .progress-bar,
    .progress-bar.progress-animated {
        transition: none;
    }

    .fade-enter {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .fade-leave {
        animation: none;
    }
}