/* =========================
   TIMELINE SECTION
========================= */
.timeline{
    background:#ECDAC6;
    padding: clamp(40px, 8vw, 80px) clamp(15px, 4vw, 40px);
    text-align:center;
    position:relative;
    overflow:hidden;
}

/* decorative flower */
.timeline .timeline-flower{
    position:absolute;
    top:10px;
    right:10px;
    width: clamp(120px, 28vw, 320px);
    opacity:0.30;
    z-index:0;
    pointer-events:none;
}

/* container above flower */
.timeline .container{
    position:relative;
    z-index:2;
}

/* top line */
.timeline .top-line{
    margin:0;
    font-size: clamp(1.6rem, 2vw, 1.2rem);
    font-family:'British', serif;
    letter-spacing:6px;
    color:#401215;
    margin-right:40px;
    margin-bottom:-5px;
}

/* heading */
.timeline h2{
    margin:0 0 25px;
    font-family:'EB Garamond', serif;
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight:200;
    color:#401215;
    margin-left:40px;
}

/* wrapper */
.timeline-wrapper{
    max-width:500px;
    margin:auto;
}

/* remove old side line */
.timeline-wrapper::before{
    display:none;
}

/* each item */
.timeline-item{
    display:block;
    text-align:center;
    margin:20px 0;
    position:relative;
    padding-bottom:28px;
}

/* divider after each item */
.timeline-item::after{
    content:"";
    position:absolute;
    left:15%;
    right:15%;
    bottom:0;
    height:1px;
    background:linear-gradient(
        to right,
        transparent,
        #401215 10%,
        #401215 90%,
        transparent
    );
}

/* remove last divider */
.timeline-item:last-child::after{
    display:none;
}

/* remove old dot */
.timeline-item .dot{
    display:none;
}

/* center icon */
.timeline-item .icon{
    width:60px;
    height:60px;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
}

.timeline-item .icon img{
    max-width:60px;
    max-height:60px;
    object-fit:contain;
}

/* content */
.timeline-item .content{
    text-align:center;
    margin-left:0;
}

/* time */
.timeline-item .time{
    display:block;
    font-family:'EB Garamond', serif;
    font-size:1rem;
    color:#401215;
    font-weight:600;
    margin-bottom:6px;
}

/* divider between time & title */
.event-divider{
    position:relative;
    margin:6px 0 8px;
    height:16px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.event-divider::before{
    content:"";
    position:absolute;
    left:15%;
    right:15%;
    top:50%;
    height:1px;
    transform:translateY(-50%);
    background:linear-gradient(
        to right,
        transparent,
        #401215 10%,
        #401215 90%,
        transparent
    );
}

/* star holder */
.event-divider span{
    position:relative;
    background:#ECDAC6;
    padding:0 8px;
    z-index:1;
}

/* star */
.event-divider i{
    font-style:normal;
    color:#C8A15D;
    font-size:12px;
}

/* title */
.timeline-item .title{
    margin:0;
    font-family:'EB Garamond', serif;
    font-size:1.1rem;
    color:#401215;
    letter-spacing:1px;
}


/* =========================
   TIMELINE ANIMATIONS
========================= */

/* "The" — slides in from the left */
.animate-from-left {
    opacity: 0;
    transform: translateX(-60px);
}
.animate-from-left.anim-slide-left {
    animation: slideFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* "Day" — slides in from the right */
.animate-from-right {
    opacity: 0;
    transform: translateX(60px);
}
.animate-from-right.anim-slide-right {
    animation: slideFromRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Timeline items — hidden by default, revealed on scroll */
.timeline-item-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.85s ease, transform 0.85s ease;
}

.timeline-item-visible {
    opacity: 1;
    transform: translateY(0);
}