/* Animations of Bars */
@keyframes growBar {
    from {
        width: 0%;
    }

    to {
        width: var(--target-width);
    }
}

@keyframes slideIndicator {
    from {
        left: 0%;
        transform: translateX(0);
    }

    to {
        left: var(--target-left);
        transform: translateX(-50%);
    }
}

@keyframes bounceIndicator {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.3);
    }
}

.anim-bar-fill {
    width: 0%;
    animation: growBar 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.5s;
}

.anim-indicator {
    position: absolute;
    top: -10px;
    font-size: 2rem;
    left: 0%;
    animation:
        slideIndicator 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        bounceIndicator 0.4s ease-out 2.1s 1 forwards;
    animation-delay: 0.5s, 2.1s;
}

/* Specific delays for context elements */
.fade-in-delay-1 {
    animation: fadeIn 0.5s ease-out 0.2s forwards;
    opacity: 0;
}

.fade-in-delay-2 {
    animation: fadeIn 0.5s ease-out 0.5s forwards;
    opacity: 0;
}

.fade-in-delay-3 {
    animation: fadeIn 0.5s ease-out 2.2s forwards;
    opacity: 0;
    /* CTA appears last */
}

/* Graph Bars Animation */
.graph-bar-today {
    width: 0% !important;
    animation: growBarToday 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.graph-bar-future {
    width: 0% !important;
    animation: growBarFuture 1.2s ease-out forwards;
    animation-delay: 1.1s;
    /* 0.3s (initial) + 0.8s (prev bar) */
}

@keyframes growBarToday {
    to {
        width: 30%;
    }
}

@keyframes growBarFuture {
    to {
        width: 100%;
    }
}

/* Override existing animations for elements in diagnosis if needed */
.diag-container {
    padding-bottom: 2rem;
}