/*====================================================================Milestones==================================================================================*/


/* ===================== Milestones (cleaned) ===================== */
/* Variables */
#milestones {
    --ml-accent: #2563eb;
    --ml-accent-600: #1d4ed8;
    --ml-ink: #1f2937;
    --ml-ink-muted: #6b7280;
    --ml-rail-w: 2px;
    --ml-pad-x: clamp(16px,5vw,56px);
}

    /* Layout */
    #milestones.container {
        max-width: 100%;
        margin-left: 0;
        margin-right: auto;
        padding-left: var(--ml-pad-x);
    }

    #milestones > .row {
        padding-left: 0;
        margin-left: 0;
        --bs-gutter-x: 0;
    }

    /* ===== Left rail ===== */
    #milestones .timeline-col {
        padding-left: 0;
        padding-right: clamp(12px,3vw,24px);
    }

    #milestones .timeline.timeline-left {
        position: relative;
        padding-left: .75rem;
        margin-left: 0;
    }

        #milestones .timeline.timeline-left::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: var(--ml-rail-w);
            background: linear-gradient(to bottom, color-mix(in oklab,var(--ml-accent) 20%,transparent), color-mix(in oklab,var(--ml-accent) 40%,transparent), color-mix(in oklab,var(--ml-accent) 20%,transparent));
            animation: timelineFlow 3s ease-in-out infinite;
            box-shadow: 0 0 12px color-mix(in oklab,var(--ml-accent) 25%,transparent);
        }

    /* Items */
    #milestones .timeline-item {
        position: relative;
        padding-left: 1.25rem;
        margin-bottom: 1.5rem;
        opacity: 0;
        will-change: transform,opacity;
        animation: slideInFromLeft .6s ease-out forwards;
        animation-delay: calc(var(--i,0)*120ms);
        transition: padding-left .3s cubic-bezier(.34,1.56,.64,1);
    }

        #milestones .timeline-item:hover {
            padding-left: 1.5rem;
        }

    /* Dot */
    #milestones .timeline-dot {
        position: absolute;
        left: -7px;
        top: .2rem;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--ml-accent);
        box-shadow: 0 0 0 4px color-mix(in oklab,var(--ml-accent) 15%,transparent);
        transition: all .3s cubic-bezier(.34,1.56,.64,1);
        animation: dotPulse 2s ease-in-out infinite;
    }

    #milestones .timeline-item:hover .timeline-dot {
        width: 18px;
        height: 18px;
        left: -10px;
        box-shadow: 0 0 0 8px color-mix(in oklab,var(--ml-accent) 20%,transparent), 0 0 16px color-mix(in oklab,var(--ml-accent) 40%,transparent);
    }

    /* Content */
    #milestones .timeline-content {
        padding: .75rem .875rem .5rem;
        border-radius: 8px;
        background: transparent;
        transition: background .25s ease,color .25s ease;
    }

    #milestones .timeline-item:hover .timeline-content {
        background: color-mix(in oklab,var(--ml-accent) 6%,transparent);
    }

    #milestones .timeline-content .small.text-muted {
        font-size: .8rem;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--ml-accent) !important;
        font-weight: 600;
        transition: color .25s ease;
    }

    #milestones .timeline-item:hover .timeline-content .small.text-muted {
        color: var(--ml-accent-600) !important;
    }

    #milestones .timeline-content .fw-semibold {
        font-size: .95rem;
        color: var(--ml-ink);
        margin: .375rem 0;
        transition: color .25s ease;
    }

    #milestones .timeline-item:hover .timeline-content .fw-semibold {
        color: var(--ml-accent);
    }

    /* ===== Right side ===== */
    #milestones .opposite-col {
        padding-left: clamp(12px,3.5vw,32px);
        opacity: 0;
        will-change: transform,opacity;
        animation: slideInFromRight .8s ease-out .2s forwards;
    }

    #milestones .opposite-panel .card {
        border: 1px solid color-mix(in oklab,var(--ml-accent) 10%,transparent);
        border-radius: 12px;
        background: linear-gradient(135deg,rgba(255,255,255,.85) 0%,color-mix(in oklab,var(--ml-accent) 2%,transparent) 100%);
        backdrop-filter: blur(10px);
        transition: transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease,border-color .35s ease;
        box-shadow: 0 4px 20px color-mix(in oklab,var(--ml-accent) 8%,transparent);
    }

        #milestones .opposite-panel .card:hover {
            border-color: color-mix(in oklab,var(--ml-accent) 30%,transparent);
            box-shadow: 0 12px 40px color-mix(in oklab,var(--ml-accent) 15%,transparent);
            transform: translateY(-4px);
        }

    #milestones .opposite-panel .card-title {
        color: var(--ml-ink);
        font-weight: 700;
        letter-spacing: -.3px;
        transition: color .25s ease;
    }

    #milestones .opposite-panel .card:hover .card-title {
        color: var(--ml-accent);
    }

    /* List */
    #milestones .opposite-panel ul {
        display: flex;
        flex-direction: column;
        gap: .375rem;
    }

    #milestones .opposite-panel li {
        position: relative;
        padding-left: 1.25rem;
        color: var(--ml-ink-muted);
        font-size: .875rem;
        line-height: 1.5;
        transition: color .25s ease;
    }

        #milestones .opposite-panel li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--ml-accent);
            font-weight: 700;
            opacity: .6;
            transition: opacity .25s ease;
        }

    #milestones .opposite-panel .card:hover li {
        color: #374151;
    }

        #milestones .opposite-panel .card:hover li::before {
            opacity: 1;
        }

    /* Images */
    #milestones .opposite-panel .ratio {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        border-bottom: 3px solid var(--ml-accent);
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        transition: transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;
    }

    #milestones .opposite-panel img {
        object-fit: cover;
        transition: transform .5s cubic-bezier(.34,1.56,.64,1),filter .5s ease;
        filter: brightness(1);
    }

    #milestones .opposite-panel .ratio:hover {
        box-shadow: 0 6px 20px color-mix(in oklab,var(--ml-accent) 12%,transparent);
        transform: translateY(-3px);
    }

        #milestones .opposite-panel .ratio:hover img {
            transform: scale(1.05);
            filter: brightness(1.08);
        }

    /* ===== Title: make it NOT full width, no markup change ===== */
    #milestones .milestones-head {
        display: flex;
    }

        #milestones .milestones-head .title-card {
            display: inline-flex; /* กว้างเท่าคอนเทนต์ */
            border-radius: 14px;
            border: 1px solid color-mix(in oklab,var(--ml-accent) 15%,transparent);
            background: linear-gradient(135deg,rgba(255,255,255,.9) 0%,color-mix(in oklab,var(--ml-accent) 6%,transparent) 100%);
            backdrop-filter: blur(8px);
            box-shadow: 0 6px 18px color-mix(in oklab,var(--ml-accent) 10%,transparent);
        }

        #milestones .milestones-head .card-body {
            padding: .75rem 1rem;
        }

        #milestones .milestones-head .title-accent {
            width: 10px;
            height: 28px;
            border-radius: 8px;
            background: linear-gradient(180deg,#3b82f6,var(--ml-accent));
            box-shadow: 0 0 0 4px color-mix(in oklab,var(--ml-accent) 10%,transparent), 0 8px 18px color-mix(in oklab,var(--ml-accent) 25%,transparent);
        }

        #milestones .milestones-head h3 {
            margin: 0;
            font-weight: 700;
            letter-spacing: -.2px;
            background: linear-gradient(135deg,var(--ml-accent) 0%,#3b82f6 50%,#1e3a8a 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        /* hover */
        #milestones .milestones-head .title-card {
            transition: transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease,border-color .28s ease;
        }

            #milestones .milestones-head .title-card:hover {
                border-color: color-mix(in oklab,var(--ml-accent) 30%,transparent);
                box-shadow: 0 10px 28px color-mix(in oklab,var(--ml-accent) 18%,transparent);
                transform: translateY(-2px);
            }

    /* ===== Milestones: Images (Stable + Smooth + Hover works) ===== */

    /* กล่องรูป: คืนพร็อพพื้นฐาน + เส้นน้ำเงิน + เตรียมตัวแปรยก */
    #milestones .opposite-col .ratio {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        border-bottom: 3px solid var(--ml-accent);
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        /* ตัวแปรสำหรับผสมเอฟเฟกต์ */
        --lift: 0px; /* ยกตอน hover */
        --enter-scale: .988; /* scale ตอนเข้าจอ */
        --enter-offset: 16px; /* ระยะเลื่อนตอนเข้าจอ (แก้ด้วย data-distance ด้านล่างได้) */

        will-change: transform, opacity, filter;
        backface-visibility: hidden;
        transition: transform .95s cubic-bezier(.22,1,.36,1), box-shadow .95s ease, opacity .95s ease, filter .95s ease;
    }

        /* รูปข้างใน: นุ่มขึ้น */
        #milestones .opposite-col .ratio img {
            object-fit: cover;
            transform-origin: center;
            will-change: transform, filter;
            backface-visibility: hidden;
            transition: transform 1.05s cubic-bezier(.22,1,.36,1), filter .9s ease;
        }

        /* ===== Reveal base (ก่อนโผล่) ===== */
        #milestones .opposite-col .ratio.reveal {
            opacity: 0;
            filter: blur(2px);
            transform: translateY(var(--enter-offset)) scale(var(--enter-scale));
            transition-duration: 1.05s;
        }

/* โผล่จริง */
.reveal-ready #milestones .opposite-col .ratio.reveal.show {
    opacity: 1;
    filter: none;
    /* ใช้ตัวแปร --lift เท่านั้น ห้ามตั้ง transform ทับที่อื่น */
    transform: translateY(var(--lift)) scale(1);
}

/* ระยะเข้าแบบสั้น/ยาว (อย่าเซ็ต transform ตรง ๆ แล้ว) */
.reveal-ready #milestones .opposite-col .ratio.reveal[data-distance="sm"] {
    --enter-offset: 10px;
    --enter-scale: .992;
}

.reveal-ready #milestones .opposite-col .ratio.reveal[data-distance="lg"] {
    --enter-offset: 22px;
    --enter-scale: .986;
}

/* ===== Hover: ยกนิด ๆ + ซูมภาพ (ใช้ตัวแปรแทน transform ตรง ๆ) ===== */
#milestones .opposite-col .ratio:hover {
    --lift: -3px;
    box-shadow: 0 8px 22px color-mix(in oklab,var(--ml-accent) 12%,transparent);
}

    #milestones .opposite-col .ratio:hover img {
        transform: scale(1.045);
        filter: brightness(1.06);
    }

/* ออปชัน: ไม่อยากให้เบลอตอนเริ่ม (เช่นภาพมีข้อความ) */
#milestones .opposite-col .ratio.no-blur {
    filter: none !important;
}

    #milestones .opposite-col .ratio.no-blur img {
        filter: none !important;
    }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    #milestones .opposite-col .ratio,
    #milestones .opposite-col .ratio img {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}



/* ===== Animations ===== */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes dotPulse {
    0%,100% {
        box-shadow: 0 0 0 4px color-mix(in oklab,var(--ml-accent) 15%,transparent);
    }

    50% {
        box-shadow: 0 0 0 6px color-mix(in oklab,var(--ml-accent) 25%,transparent);
    }
}

@keyframes timelineFlow {
    0%,100% {
        opacity: .2
    }

    50% {
        opacity: .4
    }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce) {
    #milestones * {
        animation: none !important;
        transition: none !important;
    }
}

/* Responsive */
@media (max-width:991.98px) {
    #milestones .timeline-col {
        padding-right: 12px;
    }

    #milestones .opposite-col {
        padding-left: 12px;
    }

    #milestones .timeline-item:hover {
        padding-left: 1.25rem;
    }
}




/* ===========================================================================FADE============================================================================= */
/* เห็นได้เป็นค่าเริ่มต้น (กันกรณี JS ไม่ทำงาน) */
/* ===== Reveal on scroll (smooth fade + gentle float-up) ===== */
#milestones .reveal {
    /* ลด blur และการย่อให้พอดีตา */
    opacity: 0;
    transform: translateY(14px) scale(.992);
    filter: blur(2px);
    transition: transform .75s cubic-bezier(.2,.8,.3,1), opacity .75s ease-out, filter .75s ease-out;
    will-change: transform, opacity, filter;
}

/* เมื่อ JS ใส่ .reveal-ready ให้เริ่มจากระยะสั้นลง */
.reveal-ready #milestones .reveal {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(2px);
}

    /* โผล่จริง */
    .reveal-ready #milestones .reveal.show {
        opacity: 1;
        transform: none;
        filter: none;
    }

    /* ปรับทิศ/ระยะให้นุ่มลง */
    .reveal-ready #milestones .reveal[data-reveal="left"] {
        transform: translateX(14px);
    }

    .reveal-ready #milestones .reveal[data-reveal="right"] {
        transform: translateX(-14px);
    }

    .reveal-ready #milestones .reveal[data-reveal="down"] {
        transform: translateY(-12px);
    }

    .reveal-ready #milestones .reveal[data-distance="sm"][data-reveal="up"] {
        transform: translateY(8px);
    }

    .reveal-ready #milestones .reveal[data-distance="sm"][data-reveal="left"] {
        transform: translateX(10px);
    }

    .reveal-ready #milestones .reveal[data-distance="sm"][data-reveal="right"] {
        transform: translateX(-10px);
    }

    .reveal-ready #milestones .reveal[data-distance="sm"][data-reveal="down"] {
        transform: translateY(-8px);
    }

    .reveal-ready #milestones .reveal[data-distance="lg"][data-reveal="up"] {
        transform: translateY(18px);
    }

    .reveal-ready #milestones .reveal[data-distance="lg"][data-reveal="left"] {
        transform: translateX(18px);
    }

    .reveal-ready #milestones .reveal[data-distance="lg"][data-reveal="right"] {
        transform: translateX(-18px);
    }

    .reveal-ready #milestones .reveal[data-distance="lg"][data-reveal="down"] {
        transform: translateY(-18px);
    }

/* ปิด keyframe เดิมของ .timeline-item เวลาใช้ .reveal */
#milestones .timeline-item.reveal {
    animation: none !important;
}

/* เคารพ reduce motion */
@media (prefers-reduced-motion: reduce) {
    #milestones .reveal,
    .reveal-ready #milestones .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ตัวช่วย: ถ้าอยากตัด blur ออกจากบางชิ้น (เช่นการ์ด/ข้อความยาว) ให้เติม .no-blur */
#milestones .reveal.no-blur {
    filter: none !important;
}

/* ทางเลือก: ลด blur แค่กับข้อความ ภาพยังเบลอได้ (ทำให้อ่านหัวข้อชัดขึ้น) */
#milestones .reveal .card-title,
#milestones .reveal .fw-semibold,
#milestones .reveal .text-muted,
#milestones .reveal .small {
    filter: none; /* override filter จากพ่อ */
}

/* ===== Pop-in (warp) effect for reveal ===== */
#milestones .reveal[data-effect="pop"] {
    opacity: 0;
    transform: translateY(12px) scale(.97);
    filter: blur(3px);
    /* ใช้ timing นุ่ม ๆ และเงาโตขึ้นตอนโผล่ */
    transition: transform .75s cubic-bezier(.16,.84,.44,1), opacity .75s ease-out, filter .75s ease-out, box-shadow .75s ease-out;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    will-change: transform, opacity, filter, box-shadow;
}

/* เมื่อโผล่ */
.reveal-ready #milestones .reveal.show[data-effect="pop"] {
    opacity: 1;
    transform: none; /* scale กลับ 1 และยกขึ้นพอดี */
    filter: none; /* เอา blur ออก */
    box-shadow: 0 12px 28px rgba(0,0,0,.10); /* เงานุ่มขึ้นตอนโผล่ */
}

    /* เพิ่มลูกเล่น overshoot เล็กน้อย (ทางเลือก) */
    .reveal-ready #milestones .reveal.show[data-effect="pop"].with-overshoot {
        transition: transform .9s cubic-bezier(.2,1.1,.2,1), /* เด้งเบาๆ */
        opacity .9s ease-out, filter .9s ease-out, box-shadow .9s ease-out;
    }