/* ============================================================
   Milestones — Midtone Navy (แนวทาง B: #0d1f3c)
   ลึกพอตัด Section ขาวด้านบน แต่ไม่เข้มเท่า Dark Navy
   ============================================================ */

#milestones {
    --ml-accent:     #38bdf8;   /* sky-cyan  */
    --ml-accent-600: #0ea5e9;   /* deeper sky */
    --ml-ink:        #e2f0ff;   /* text on dark */
    --ml-ink-muted:  rgba(186, 230, 255, 0.60);
    --ml-rail-w: 2px;
    --ml-pad-x: clamp(16px,5vw,56px);

    /* ── Section background ── */
    background: linear-gradient(160deg, #091729 0%, #0d1f3c 40%, #102444 75%, #0d1f3c 100%);
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
    overflow: hidden;
}

/* Dot grid overlay — matches dk-section family */
#milestones::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}

/* Ambient glow — subtle, won't compete with dark sections */
#milestones::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(0, 100, 240, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 50%, rgba(0, 180, 255, 0.10) 0%, transparent 55%);
    z-index: 0;
}


    /* 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);
        position: relative;
        z-index: 1;
    }

    #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,
                transparent,
                rgba(56, 189, 248, 0.5) 20%,
                rgba(56, 189, 248, 0.7) 50%,
                rgba(56, 189, 248, 0.5) 80%,
                transparent
            );
            animation: timelineFlow 3s ease-in-out infinite;
            box-shadow: 0 0 14px rgba(56, 189, 248, 0.3);
        }

    /* 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: #0d1f3c;  /* match section bg */
        border: 2px solid var(--ml-accent);
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), 0 0 12px rgba(56, 189, 248, 0.4);
        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 6px rgba(56, 189, 248, 0.25), 0 0 20px rgba(56, 189, 248, 0.5);
    }

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

    #milestones .timeline-item:hover .timeline-content {
        background: rgba(56, 189, 248, 0.06);
    }

    /* Year badge -- replaces the old .small.text-muted */
    #milestones .timeline-year {
        display: inline-block;
        font-family: 'Consolas', monospace;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #38bdf8;
        background: rgba(56, 189, 248, 0.10);
        border: 1px solid rgba(56, 189, 248, 0.22);
        border-radius: 20px;
        padding: 1px 10px;
        margin-bottom: 4px;
        transition: background .25s ease, color .25s ease;
    }
    #milestones .timeline-item:hover .timeline-year {
        background: rgba(56, 189, 248, 0.18);
        color: #7dd3fc;
    }

    /* Timeline title -- replaces .fw-semibold */
    #milestones .timeline-title {
        font-size: .95rem;
        font-weight: 700;
        color: var(--ml-ink);
        line-height: 1.4;
        transition: color .25s ease;
    }
    #milestones .timeline-item:hover .timeline-title { color: #7dd3fc; }

    /* Timeline description */
    #milestones .timeline-desc {
        font-size: 0.8rem;
        color: var(--ml-ink-muted);
        margin-top: 2px;
        line-height: 1.5;
    }

    /* Keep backward compat with old classes */
    #milestones .timeline-content .small.text-muted {
        font-size: .8rem;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--ml-accent) !important;
        font-weight: 700;
        transition: color .25s ease;
    }
    #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: #7dd3fc; }

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

    /* ─── Card: glassmorphism on midtone navy ─── */
    #milestones .opposite-panel .card {
        border: 1px solid rgba(56, 189, 248, 0.18);
        border-top: 2px solid rgba(56, 189, 248, 0.75); /* Cyan top line */
        border-radius: 14px;
        overflow: hidden;
        background: rgba(9, 30, 65, 0.75);
        backdrop-filter: blur(12px);
        transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }
    /* Removed ::before to avoid overflow */
    #milestones .opposite-panel .card::before { content: none; }

        #milestones .opposite-panel .card:hover {
            border-color: rgba(56, 189, 248, 0.4);
            border-top-color: rgba(14, 165, 233, 0.95);
            box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(56, 189, 248, 0.15);
            transform: translateY(-4px);
        }

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

    #milestones .opposite-panel .card:hover .card-title {
        color: #7dd3fc;
    }

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

    #milestones .opposite-panel li {
        position: relative;
        padding-left: 1.25rem;
        color: rgba(186, 230, 255, 0.65);
        font-size: .875rem;
        line-height: 1.5;
        transition: color .25s ease;
    }

        #milestones .opposite-panel li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #38bdf8;
            font-weight: 700;
            opacity: .7;
            transition: opacity .25s ease;
        }

    #milestones .opposite-panel .card:hover li {
        color: rgba(224, 242, 255, 0.85);
    }

        #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 Card (heading area) ─── */
    #milestones .milestones-head {
        display: flex;
        z-index: 1;
        position: relative;
    }

        #milestones .milestones-head .title-card {
            display: inline-flex;
            border-radius: 12px;
            border: 1px solid rgba(56, 189, 248, 0.18);
            background: rgba(9, 30, 65, 0.70);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(56,189,248,0.08);
        }

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

        #milestones .milestones-head .title-accent {
            width: 10px;
            height: 28px;
            border-radius: 8px;
            background: linear-gradient(180deg, #38bdf8, #0062ff);
            box-shadow: 0 0 0 3px rgba(56,189,248,0.15), 0 6px 16px rgba(0,98,255,0.3);
        }

        #milestones .milestones-head h3 {
            margin: 0;
            font-weight: 700;
            letter-spacing: -.2px;
            background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #0ea5e9 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #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: rgba(56, 189, 248, 0.35);
                box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 16px rgba(56,189,248,0.15);
                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;
    }