/* --- 5. TIMELINE ANIMATION CSS (Filtered) --- */

/* This ID is already in your HTML, replacing the placeholder */
#timeline-section {
    padding: 0; /* Timeline wrapper has its own padding */
}

#timeline-wrapper {
    background-color: #fdfdfc; /* --color-bg-section-1 */
    height: 400vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 50vh 0;
    box-sizing: border-box;
    margin-bottom: 200px;
}
.timeline-block {
    height: calc(100% / 6);
    width: 80%;
    box-sizing: border-box;
    position: relative;
}
.timeline-track {
    height: 100%;
    box-sizing: border-box;
}
.timeline-progress {
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
}
.timeline-content-box {
    position: absolute;
    width: 75%; 
    min-height: 230px; 
    background-color: white;
    border: 1px solid #2c5d9f; /* --color-primary */ 
    padding: 25px;
    text-align: left;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
    font-family: 'Montserrat', sans-serif;
}
.timeline-content-box p {
    font-size: 1.1rem; 
    margin-top: 15px;
    color: #555; /* --color-text-body */
    font-weight: 500;
}
.timeline-content-box h3 {
    font-size: 1.6rem; 
    font-weight: 800; /* Match h2 style */
    color: #2c5d9f; /* --color-primary */
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #ddd;
}
.timeline-content-box strong {
    display: block;
    font-weight: 700;
    margin-top: 5px;
    color: #333; /* --color-text-dark */
}
.timeline-content-box span.year {
    display: block;
    font-weight: 700;
    color: #555; /* --color-text-body */
    margin-bottom: 5px;
}
.checkpoint-align-vertical { transform: translateY(-50%); }
.checkpoint-align-vertical-bottom { transform: translateY(50%); }
.box-align-right { right: calc(10% + 100px); left: auto; }
.box-align-left { left: calc(10% + 100px); right: auto; }
.checkpoint-circle {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 10;
    box-sizing: border-box;
    transition: width 0.3s, height 0.3s, border-width 0.3s;
}
.checkpoint-pending {
    background-color: #f9f9f9; /* Match wrapper bg */
    border: 5px solid silver;
}
.checkpoint-reached {
    background-color: white;
    border: 5px solid #2c5d9f; /* --color-primary */
}
#checkpoint-start { top: 0; left: 0; transform: translate(calc(-50% + 2.5px), -50%); }
#checkpoint-1 { top: 0; right: 0; transform: translate(calc(50% - 2.5px), -50%); }
#checkpoint-2 { top: 0; left: 0; transform: translate(calc(-50% + 2.5px), -50%); }
#checkpoint-end { bottom: 0; right: 0; transform: translate(calc(50% - 2.5px), 50%); }

/* Timeline Media Queries (Preserved) */
@media (max-width: 1024px) {
    .timeline-content-box {
        width: 50%; 
        padding: 20px;
        min-height: 230px; 
    }
    .timeline-content-box p { font-size: 1.05rem; } 
    .timeline-content-box h3 { font-size: 1.5rem; } 
    .box-align-right { right: calc(10% + 50px); }
    .box-align-left { left: calc(10% + 50px); }
}
@media (max-width: 768px) {
    .timeline-content-box {
        width: 75%; 
        min-height: 180px; 
        padding: 15px;
    }
    .timeline-content-box p { font-size: 0.9rem; } 
    .timeline-content-box h3 { font-size: 1.3rem; } 
    .box-align-right { right: calc(10% + 30px); }
    .box-align-left { left: calc(10% + 30px); }
    .checkpoint-circle {
        width: 30px; 
        height: 30px; 
        border-width: 4px; 
    }
}

/* Timeline Specific Blocks (Preserved) */
#first-block { display: flex; align-items: baseline; flex-direction: column; }
#first-block .timeline-track { border-left: 5px solid silver; border-bottom: 5px solid silver; border-bottom-left-radius: 15vw; width: 50%; }
#inner-line-1 { border-left: 5px solid #2c5d9f; border-bottom: 5px solid #2c5d9f; border-bottom-left-radius: 15vw; width: 50%; left: 0; clip-path: polygon(0 0, 5px 0, 5px 0, 0 0); will-change: clip-path; }
#second-block { display: flex; align-items: end; flex-direction: column; margin-top: -4.9px; }
#second-block .timeline-track { border-right: 5px solid silver; border-top: 5px solid silver; border-top-right-radius: 15vw; width: calc(50% + 1px); }
#inner-line-2 { border-right: 5px solid #2c5d9f; border-top: 5px solid #2c5d9f; border-top-right-radius: 15vw; width: calc(50% + 1px); right: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); will-change: clip-path; }
#third-block { display: flex; align-items: end; flex-direction: column; }
#third-block .timeline-track { border-right: 5px solid silver; border-bottom: 5px solid silver; border-bottom-right-radius: 15vw; width: calc(50% + 1px); }
#inner-line-3 { border-right: 5px solid #2c5d9f; border-bottom: 5px solid #2c5d9f; border-bottom-right-radius: 15vw; width: calc(50% + 1px); right: 0; clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0); will-change: clip-path; }
#fourth-block { display: flex; align-items: baseline; flex-direction: column; margin-top: -4.9px; }
#fourth-block .timeline-track { border-left: 5px solid silver; border-top: 5px solid silver; border-top-left-radius: 15vw; width: 50%; }
#inner-line-4 { border-left: 5px solid #2c5d9f; border-top: 5px solid #2c5d9f; border-top-left-radius: 15vw; width: 50%; left: 0; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); will-change: clip-path; }
#fifth-block { display: flex; align-items: baseline; flex-direction: column; }
#fifth-block .timeline-track { border-left: 5px solid silver; border-bottom: 5px solid silver; border-bottom-left-radius: 15vw; width: 50%; }
#inner-line-5 { border-left: 5px solid #2c5d9f; border-bottom: 5px solid #2c5d9f; border-bottom-left-radius: 15vw; width: 50%; left: 0; clip-path: polygon(0 0, 5px 0, 5px 0, 0 0); will-change: clip-path; }
#sixth-block { display: flex; align-items: end; flex-direction: column; margin-top: -4.9px; }
#sixth-block .timeline-track { border-right: 5px solid silver; border-top: 5px solid silver; border-top-right-radius: 15vw; width: calc(50% + 1px); }
#inner-line-6 { border-right: 5px solid #2c5d9f; border-top: 5px solid #2c5d9f; border-top-right-radius: 15vw; width: calc(50% + 1px); right: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); will-change: clip-path; }