:root {
    --timeline-offset: clamp(-25px, -10vw, -120px);
    --timeline-thickness: clamp(2px, 0.5vw, 4px);
    --timeline-border-thk: calc(1 * var(--timeline-thickness));
}

/* =========================
   Main Timeline Container
============================== */
.snake-timeline {
    position: relative;
    width: clamp(90%, 80vw, 1200px);
    margin: auto;
    padding: clamp(60px, 8vw, 100px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
}

/* Main vertical timeline path */
.snake-path {
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--timeline-thickness);
    height: 0;
    background: #9C0002;
    transform: translateX(-50%);
    z-index: 0;
}

/* Each timeline item */
.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin: clamp(40px, 6vw, 80px) 0;
}

/* Space between branch and content/image */
.timeline-item .placeholder {
    width: clamp(8%, 10%, 12%);
}

/* Content section */
.timeline-item .content {
    width: clamp(35%, 40%, 45%);
    font-family: "Noto Serif", serif;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 500;
    line-height: clamp(1.4, 1.6, 1.8);
    opacity: 0;
    transform: translateY(clamp(15px, 3vw, 30px));
    transition: all 0.25s ease-out;
    padding-top: 0;
    text-align: justify !important;
}

/* Content positioning for right and left items */
.timeline-item.right .content {
    margin-top: -14px;
    text-align: justify !important;
    padding-right: clamp(50px, 8vw, 150px);
    padding-left: 5px;
}
.timeline-item.left .content {
    margin-top: -14px;
    text-align: justify !important;
    padding-left: clamp(50px, 8vw, 150px);
    padding-right: 5px;
}

/* Image container with offset */
.timeline-item .image {
    position: relative;
    width: clamp(150px, 40%, 550px);
    max-width: 50%;
    aspect-ratio: 4/3;
    height: auto;
    overflow: visible;
    opacity: 0;
    transform: translateY(clamp(15px, 4vw, 40px));
    transition: all 0.25s ease-out;
    z-index: 2;
    background-color: rgba(156,0,2,0.1);
}

/* Actual image with offset on both sides */
.timeline-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
    position: relative;
    z-index: 2;
}

/* Background shape behind image */
.timeline-item .bg-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Offset for right positioned images */
.timeline-item.right .bg-shape {
    top: var(--timeline-offset);
    right: var(--timeline-offset);
}

.timeline-item.right .image img {
    top: var(--timeline-offset);
    right: var(--timeline-offset);
}

/* Offset for left positioned images */
.timeline-item.left .bg-shape {
    top: var(--timeline-offset);
    left: var(--timeline-offset);
}

.timeline-item.left .image img {
    top: var(--timeline-offset);
    left: var(--timeline-offset);
}

/* Animated border elements */
.timeline-item .border-animation {
    position: absolute;
    z-index: 3;
    background: rgba(156, 0, 2, 0.5);
}

/* Top border - same thickness as branch */
.timeline-item .border-top {
    top: 0;
    height: var(--timeline-border-thk);
    transition: width 0.4s ease-out 0.2s;
}

/* Right border - same thickness as branch */
.timeline-item .border-right {
    top: 0;
    right: 0;
    width: var(--timeline-border-thk);
    height: 0;
    transition: height 0.4s ease-out 0.6s;
}

/* Left border - same thickness as branch */
.timeline-item .border-left {
    top: 0;
    left: 0;
    width: var(--timeline-border-thk);
    height: 0;
    transition: height 0.4s ease-out 0.6s;
}

/* Right positioned images - top border from left to right */
.timeline-item.right .border-top {
    left: 0;
    width: 0;
}

/* Left positioned images - top border from right to left */
.timeline-item.left .border-top {
    right: 0;
    width: 0;
}

/* Show borders when item is visible */
.timeline-item.show-content .border-top {
    width: 100%;
}
.timeline-item.show-content .border-right {
    height: 100%;
}
.timeline-item.show-content .border-left {
    height: 100%;
}

/* Connecting branch line - same thickness as borders */
.timeline-item .branch {
    position: absolute;
    top: calc(var(--timeline-thickness)/2);
    height: var(--timeline-thickness);
    width: 0;
    background: #9C0002;
    z-index: 11;
    transition: all 0.1s ease-out;
}

/* Branch positioning for left and right items */
.timeline-item.left .branch  { 
    left: 50%; 
    transform: translateY(-50%); 
}
.timeline-item.right .branch { 
    right: 50%; 
    transform: translateY(-50%); 
}

/* Circle at the end of branch */
.timeline-item .branch::after {
    content: "";
    position: absolute;
    top: calc(var(--timeline-thickness)/2);
    width: clamp(12px, 1.5vw, 22px);
    height: clamp(12px, 1.5vw, 22px);
    border: 2px solid #9C0002;
    background: #fff;
    transform: translateY(-50%);
}

/* Circle positioning for branches */
.timeline-item.left .branch::after  { 
    right: 0; 
    transform: translate(50%, -50%); 
}
.timeline-item.right .branch::after { 
    left: 0; 
    transform: translate(-50%, -50%); 
}

/* Filled branch */
.timeline-item.filled .branch::after {
    background: #9C0002;
    border-color: #9C0002;
}

/* Show content and image */
.timeline-item.show-content .content,
.timeline-item.show-content .image {
    opacity: 1;
    transform: translateY(0);
    transform: translateX(0);
}

/* Section headings */
.snake-timeline h3 {
    font-size: clamp(16px, 2vw, 26px);
    font-style: italic;
    font-weight: 800;
    font-family: "Noto Serif", serif !important;
    margin-bottom: 8px;
    color: #1a1a1a;
}

/* Cover shape for the last item */
.cover-shape {
    position: absolute;
    top: 4px;
    left: calc(50% - 5px);
    z-index: 10;
    background: #fff;
    width: 20px;
    height: 100%;
}

/* =========================
   Tablet Responsive Styles
============================== */
@media (max-width: 1024px) {
    .snake-timeline { 
        width: 90%; 
    }
    .timeline-item .content {
        width: 45%;
        padding-left: clamp(24px, 5vw, 60px);
        padding-right: clamp(12px, 3vw, 20px);
    }
    .timeline-item .image { 
        max-width: 45%; 
    }
    
    /* Content positioning adjustments - More distance from branch */
    .timeline-item.right .content {
        margin-top: -8px;
        text-align: right;
        padding-right: clamp(85px, 10vw, 180px);
        padding-left: 5px;
    }
    .timeline-item.left .content {
        margin-top: -8px;
        text-align: left;
        padding-left: clamp(85px, 10vw, 180px);
        padding-right: 5px;
    }

    /* Remove border animation on tablet for better performance */
    .timeline-item .border-animation {
        display: none !important;
    }

    /* Reduce offset for images on tablet */
    .timeline-item.right .bg-shape,
    .timeline-item.right .image img {
        top: clamp(-10px, -4vw, -50px);
        right: clamp(-10px, -4vw, -50px);
    }
    
    .timeline-item.left .bg-shape,
    .timeline-item.left .image img {
        top: clamp(-10px, -4vw, -50px);
        left: clamp(-10px, -4vw, -50px);
    }

    .snake-timeline h3 {
        font-size: clamp(10px, 4vw, 22px);
    }

    .cover-shape {
        position: absolute;
        top: 4px;
        left: calc(50% - 5px);
        z-index: 10;
        background: #fff;
        width: 20px;
        height: 100%;
    }
}

/* =========================
   Mobile Responsive Styles
============================== */
@media (max-width: 768px) {
    .timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin: 2px 0;
        padding: 0 22px 12px 22px;
    }
    
    /* Content always first, more distance from branch */
    .timeline-item .content {
        order: 1 !important; 
        font-size: clamp(12px, 3vw, 18px);
        max-width: 100% !important;
        width: 90vw;
        text-align: left !important;
        padding-left: clamp(30px, 5vw, 50px);
        padding-right: 5px;
        padding-top: 0;
        margin-bottom: 12px;
    }
    
    /* Content positioning for mobile */
    .timeline-item.left .content,
    .timeline-item.right .content {
        text-align: left;
        margin-top: -2px;
        padding-left: clamp(12px, 3vw, 20px);
        padding-right: 5px;
    }

    /* Image always second, horizontal rectangle */
    .timeline-item .image {
        order: 2 !important;
        max-width: 100% !important;
        aspect-ratio: 16/9; 
        width: 34vh;
        height: 20vh;
        margin: 0 10px 20px 10px;
    }
    
    .timeline-item .image img {
        object-position: top center !important;
    }
    
    /* Mobile offset for images */
    .timeline-item .bg-shape,
    .timeline-item .image img {
        top: -15px !important;
        right: -15px !important;
        left: -15px !important;
    }
    
    /* Remove border animation on mobile */
    .timeline-item .border-animation {
        display: none !important;
    }
    
    .timeline-item .branch { 
        display: none !important; 
    }
    
    .snake-path { 
        left: 10px !important; 
        transform: none !important; 
    }
    
    .timeline-item::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 0;
        width: 16px;
        height: 16px;
        background: #9C0002;
        border-radius: 0;
        z-index: 5;
    }
    
    .cover-shape {
        position: absolute;
        top: 16px;
        left: 0px;
        z-index: 10;
        background: #fff;
        width: 20px;
        height: 100%;
    }
}