.learning-timeline-module {
    font-family: 'Circe Slab A', serif;
    margin: 40px 0;
    max-width: 800px;
    padding: 40px;
}

.learning-timeline-module .timeline-svg {
    width: 100%;
    height: auto;
    /* Prevent layout shifts during animation */
    min-height: 328px;
    display: block;
    font-size: 20px;
}

.learning-timeline-module .green-bar {
    transform-origin: left center;
    transform: scaleX(0);
    transition: none;
    /* Ensure the element maintains its space */
    will-change: transform;
}

.learning-timeline-module .arrow-shape {
    clip-path: inset(0 100% 0 0);
    transition: none;
    /* Ensure the element maintains its space */
    will-change: clip-path;
}

.learning-timeline-module .arrow-lines {
    opacity: 0;
    transition: none;
}

.learning-timeline-module .year-text {
    font-size: 1em;
    font-weight: 500;
    text-anchor: middle;
    opacity: 0;
    transition: none;
}

.learning-timeline-module .main-text {
    font-size: 1em;
    font-weight: 500;
    opacity: 0;
    transition: none;
}

/* Forward animation classes */
.learning-timeline-module.animate .green-bar {
    animation: growBar 1.25s ease-out forwards;
}

.learning-timeline-module.animate .arrow-shape {
    animation: growArrow 1.75s ease-out 0.5s forwards;
}

.learning-timeline-module.animate .arrow-lines {
    animation: fadeInText 0.8s ease-out 0.1s forwards;
}

.learning-timeline-module.animate .year-text {
    animation: fadeInText 0.8s ease-out 0.2s forwards;
}

.learning-timeline-module.animate .main-text {
    animation: fadeInText 0.8s ease-out 1.5s forwards;
}

/* Reverse animation classes */
.learning-timeline-module.reverse .green-bar {
    animation: shrinkBar 1s ease-out forwards;
}

.learning-timeline-module.reverse .arrow-shape {
    animation: shrinkArrow 1.3s ease-out forwards;
}

.learning-timeline-module.reverse .arrow-lines {
    animation: fadeOutText 0.6s ease-out forwards;
}

.learning-timeline-module.reverse .year-text {
    animation: fadeOutText 0.6s ease-out forwards;
}

.learning-timeline-module.reverse .main-text {
    animation: fadeOutText 0.6s ease-out forwards;
}

/* Forward animations */
@keyframes growBar {
    0% { 
        transform: scaleX(0); 
    }
    100% { 
        transform: scaleX(1); 
    }
}

@keyframes growArrow {
    0% { 
        clip-path: inset(0 100% 0 0); 
    }
    100% { 
        clip-path: inset(0 0% 0 0); 
    }
}

@keyframes fadeInText {
    0% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}

/* Reverse animations - maintain same timing structure */
@keyframes shrinkBar {
    0% { 
        transform: scaleX(1); 
    }
    100% { 
        transform: scaleX(0); 
    }
}

@keyframes shrinkArrow {
    0% { 
        clip-path: inset(0 0% 0 0); 
    }
    100% { 
        clip-path: inset(0 100% 0 0); 
    }
}

@keyframes fadeOutText {
    0% { 
        opacity: 1; 
    }
    100% { 
        opacity: 0; 
    }
}

/* Fallback for browsers that don't support clip-path */
@supports not (clip-path: inset(0 0 0 0)) {
    .learning-timeline-module .arrow-shape {
        transform-origin: left center;
        transform: scaleX(0);
        clip-path: none;
    }
    
    .learning-timeline-module.animate .arrow-shape {
        animation: growBarFallback 2.5s ease-out 0.5s forwards;
    }
    
    .learning-timeline-module.reverse .arrow-shape {
        animation: shrinkBarFallback 1.8s ease-out forwards;
    }
    
    @keyframes growBarFallback {
        0% { transform: scaleX(0); }
        100% { transform: scaleX(1); }
    }
    
    @keyframes shrinkBarFallback {
        0% { transform: scaleX(1); }
        100% { transform: scaleX(0); }
    }
}


@media (max-width: 768px) {
    .learning-timeline-module {
        font-family: 'Circe Slab A', serif;
        margin: 0;
        max-width: 800px;
        padding: 0;
    }
    .learning-timeline-module .timeline-svg {
        margin-top: 20px;
        width: 100%;
        height: auto;
        min-height: 0;
        display: block;
        font-size: 25px;
    }
}