/* ================= Company Snapshot (Blue theme + Hover + Reveal) ================ */
#company-snapshot {
    --snap-accent: #2563eb; /* น้ำเงินหลัก */
    --snap-accent-2: #60a5fa; /* น้ำเงินอ่อน */
    --snap-ink: #111827; /* สีตัวอักษรหลัก */
    --snap-muted: #6b7280; /* สีรอง */
}

    /* ---------- Card base ---------- */
    #company-snapshot .snapshot-card {
        position: relative;
        border: 1px solid rgba(37,99,235,.15);
        border-radius: 14px;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(96,165,250,.04) 100%), #fff;
        box-shadow: 0 6px 18px rgba(37,99,235,.10), 0 1px 0 rgba(255,255,255,.4) inset;
        transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease, background .35s ease, filter .35s ease;
        will-change: transform, box-shadow, background, filter;
    }
        /* เส้นไฮไลต์ด้านบน */
        #company-snapshot .snapshot-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 3px;
            background: linear-gradient(90deg, var(--snap-accent), var(--snap-accent-2));
            opacity: .75;
        }
        /* Hover */
        #company-snapshot .snapshot-card:hover {
            transform: translateY(-4px);
            border-color: rgba(37,99,235,.35);
            box-shadow: 0 14px 36px rgba(37,99,235,.20), 0 2px 0 rgba(255,255,255,.45) inset;
            background: linear-gradient(135deg, rgba(37,99,235,.10) 0%, rgba(96,165,250,.08) 100%), #fff;
            filter: brightness(1.02);
        }

    /* ---------- Icon capsule ---------- */
    #company-snapshot .snapshot-icon {
        width: 2.75rem;
        height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--snap-accent);
        background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(96,165,250,.10));
        border: 1px solid rgba(96,165,250,.25);
        box-shadow: 0 6px 16px rgba(37,99,235,.18);
        transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease, box-shadow .35s ease;
        will-change: transform, filter, box-shadow;
    }

    #company-snapshot .snapshot-card:hover .snapshot-icon {
        transform: translateY(-2px) scale(1.03);
        filter: brightness(1.05);
        box-shadow: 0 12px 26px rgba(37,99,235,.25);
    }

    /* ---------- Text ---------- */
    #company-snapshot .snapshot-card .fw-semibold {
        color: var(--snap-ink);
        letter-spacing: -.2px;
        transition: color .25s ease;
    }

    #company-snapshot .snapshot-card:hover .fw-semibold {
        color: var(--snap-accent);
    }

    #company-snapshot .snapshot-card .text-muted {
        color: var(--snap-muted) !important;
    }

    /* ---------- Image (zoom on hover) ---------- */
    #company-snapshot .ratio {
        position: relative;
        overflow: hidden;
    }

        #company-snapshot .ratio img {
            transform-origin: center;
            transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
        }

    #company-snapshot .snapshot-card:hover .ratio img {
        transform: scale(1.05);
        filter: brightness(1.04);
    }

    /* ---------- Reveal on scroll (smooth + column-aware) ---------- */
    #company-snapshot .reveal {
        opacity: 0;
        transform: translateY(14px) translateZ(0);
        transition: transform .9s cubic-bezier(.22,.70,.28,1), opacity .9s ease-out;
        will-change: transform, opacity;
        --reveal-delay: 0ms; /* default delay; จะถูกปรับด้วย nth-child ด้านล่าง */
    }

        #company-snapshot .reveal.show {
            opacity: 1;
            transform: none;
            transition-delay: var(--reveal-delay);
        }

        /* มือถือ (1 คอลัมน์): fade-up ไล่ delay เบา ๆ */
        #company-snapshot .reveal:nth-child(1) {
            --reveal-delay: 0ms;
        }

        #company-snapshot .reveal:nth-child(2) {
            --reveal-delay: 90ms;
        }

        #company-snapshot .reveal:nth-child(3) {
            --reveal-delay: 180ms;
        }

        #company-snapshot .reveal:nth-child(4) {
            --reveal-delay: 270ms;
        }

        #company-snapshot .reveal:nth-child(5) {
            --reveal-delay: 360ms;
        }

        #company-snapshot .reveal:nth-child(6) {
            --reveal-delay: 450ms;
        }

/* ≥ md (2 คอลัมน์): ซ้ายจากซ้าย / ขวาจากขวา; แถวล่างหน่วงเพิ่มเล็กน้อย */
@media (min-width:768px) {
    /* คอลัมน์ซ้าย: 1,3,5,... */
    #company-snapshot .row > [class*="col-"].reveal:nth-child(2n+1) {
        transform: translateX(-18px);
        --reveal-delay: 0ms;
    }
    /* คอลัมน์ขวา: 2,4,6,... */
    #company-snapshot .row > [class*="col-"].reveal:nth-child(2n) {
        transform: translateX(18px);
        --reveal-delay: 120ms;
    }
    /* แถวล่าง (index ≥ 3) เพิ่ม delay อีกนิด */
    #company-snapshot .row > [class*="col-"].reveal:nth-child(n+3) {
        --reveal-delay: calc(var(--reveal-delay) + 120ms);
    }
}

/* ≥ lg (3 คอลัมน์): ซ้าย=ซ้าย, กลาง=บน/ล่าง, ขวา=ขวา — ตรงเป๊ะสำหรับ 1..6 */
@media (min-width:992px) {
    /* ซ้าย: 1,4,7,... → from left */
    #company-snapshot .row > [class*="col-"].reveal:nth-child(3n+1) {
        transform: translateX(-20px);
        --reveal-delay: 0ms;
    }
    /* กลางบน: 2,8,14,... → from top */
    #company-snapshot .row > [class*="col-"].reveal:nth-child(6n+2) {
        transform: translateY(-16px);
        --reveal-delay: 120ms;
    }
    /* กลางล่าง: 5,11,17,... → from bottom */
    #company-snapshot .row > [class*="col-"].reveal:nth-child(6n+5) {
        transform: translateY(16px);
        --reveal-delay: 120ms;
    }
    /* ขวา: 3,6,9,... → from right */
    #company-snapshot .row > [class*="col-"].reveal:nth-child(3n) {
        transform: translateX(20px);
        --reveal-delay: 240ms;
    }
    /* แถวล่าง (index ≥ 4) เพิ่ม delay เพิ่ม เพื่อเกิดคลื่นต่อเนื่อง */
    #company-snapshot .row > [class*="col-"].reveal:nth-child(n+4) {
        --reveal-delay: calc(var(--reveal-delay) + 120ms);
    }
}

/* ---------- Accessibility: reduce motion ---------- */
@media (prefers-reduced-motion:reduce) {
    #company-snapshot .snapshot-card,
    #company-snapshot .snapshot-icon,
    #company-snapshot .ratio img,
    #company-snapshot .reveal {
        transition: none !important;
        animation: none !important;
    }

    #company-snapshot .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}



/* ---------- =====================================================Fade In R L T B==================================================================== ---------- */

/* ===== Company Snapshot: Header reveal ===== */
#company-snapshot .csnap-head {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.95s ease, transform 0.95s cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity;
}

    /* เล่นเมื่อเข้าจอ */
    #company-snapshot .csnap-head.is-inview {
        opacity: 1;
        transform: none;
    }

    /* สเต็ปย่อย: ให้ title / subtitle / ปุ่ม ค่อยๆ โผล่แบบสลับดีเลย์ */
    #company-snapshot .csnap-head h2,
    #company-snapshot .csnap-head .text-muted,
    #company-snapshot .csnap-head .btn {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
    }

    #company-snapshot .csnap-head.is-inview h2 {
        transition-delay: .08s;
        opacity: 1;
        transform: none;
    }

    #company-snapshot .csnap-head.is-inview .text-muted {
        transition-delay: .18s;
        opacity: 1;
        transform: none;
    }

    #company-snapshot .csnap-head.is-inview .btn {
        transition-delay: .28s;
        opacity: 1;
        transform: none;
    }

    /* ปุ่ม: hover แล้วเด้งนิด ๆ ให้รู้สึกเหมือน popup โผล่ */
    #company-snapshot .csnap-head .btn:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 28px rgba(37,99,235,.22);
        transition-duration: .25s;
    }

/* ลด motion เมื่อผู้ใช้ตั้งค่า */
@media (prefers-reduced-motion: reduce) {
    #company-snapshot .csnap-head,
    #company-snapshot .csnap-head h2,
    #company-snapshot .csnap-head .text-muted,
    #company-snapshot .csnap-head .btn {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ===== Layout spacing เล็กน้อย */
#company-snapshot .csnap-head {
    gap: .75rem;
    align-items: center;
}

    /* ===== ซ้าย: กรอบโค้งมนสวย ๆ ครอบหัวเรื่อง + คำบรรยาย */
    #company-snapshot .csnap-head > div:first-child {
        --b1: #2563eb;
        --b2: #60a5fa;
        padding: .75rem .9rem;
        border-radius: 18px; /* โค้งกำลังสวย */
        background: linear-gradient(135deg, rgba(255,255,255,.92), color-mix(in oklab, var(--b1) 6%, transparent));
        border: 1.5px solid color-mix(in oklab, var(--b1) 22%, transparent);
        box-shadow: 0 8px 20px color-mix(in oklab, var(--b1) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
        position: relative;
        overflow: hidden;
        transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, border-color .28s ease;
    }

        /* แถบไฮไลต์ด้านซ้ายแบบเนียน */
        #company-snapshot .csnap-head > div:first-child::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 6px;
            border-radius: 18px 0 0 18px;
            background: linear-gradient(180deg, var(--b1), var(--b2));
            box-shadow: 0 0 14px color-mix(in oklab, var(--b1) 35%, transparent);
        }

        /* โฮเวอร์ให้ยกนิด ๆ */
        #company-snapshot .csnap-head > div:first-child:hover {
            transform: translateY(-2px);
            border-color: color-mix(in oklab, var(--b1) 38%, #fff 62%);
            box-shadow: 0 14px 30px color-mix(in oklab, var(--b1) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
        }

        /* สีตัวอักษรคมชัด */
        #company-snapshot .csnap-head > div:first-child h2 {
            margin: 0;
            line-height: 1.15;
            background: linear-gradient(135deg, var(--b1) 0%, #3b82f6 50%, #1e3a8a 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #company-snapshot .csnap-head > div:first-child .text-muted {
            color: #6b7280 !important;
            margin-top: .15rem;
        }

    /* ===== ขวา: กล่องปุ่มแบบโค้ง “เยอะ ๆ” (เม็ดถั่ว) */
    #company-snapshot .csnap-head > .d-none.d-md-block {
        padding: 0; /* กันดันพื้นที่ */
        background: none; /* กันบวมจากพื้นหลัง/เส้นขอบ/เงา */
        border: 0;
        box-shadow: none;
    }

        /* ยกนิด ๆ ตอนโฮเวอร์ */
        #company-snapshot .csnap-head > .d-none.d-md-block:hover {
            transform: translateY(-2px);
            border-color: color-mix(in oklab, var(--b1) 40%, #fff 60%);
            box-shadow: 0 14px 30px color-mix(in oklab, var(--b1) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
        }

        /* ปุ่มด้านใน: ทำเป็น pill เต็มธีม */
        #company-snapshot .csnap-head > .d-none.d-md-block > .btn {
            --b1: #2563eb;
            --b2: #60a5fa;
            border-radius: 999px;
            border-width: 1.5px;
            padding: .5rem 1rem;
            border-color: var(--b1);
            color: var(--b1);
            background: transparent;
            box-shadow: none;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
        }

            #company-snapshot .csnap-head > .d-none.d-md-block > .btn:hover {
                background: linear-gradient(135deg, var(--b1), var(--b2));
                color: #fff;
                border-color: transparent;
                box-shadow: 0 10px 24px color-mix(in oklab, var(--b1) 30%, transparent);
                transform: translateY(-1px);
            }
            /* เอฟเฟกต์ยกนิด ๆ เวลาโฮเวอร์ที่ปุ่ม (ไม่ใช่ตัวหุ้ม) */
            #company-snapshot .csnap-head > .d-none.d-md-block > .btn:where(:hover, :focus-visible) {
                will-change: transform, box-shadow;
            }
/* มือถือ: ซ้อนเป็นแนวตั้งและคงความโค้งสวย ๆ */
@media (max-width: 576px) {
    #company-snapshot .csnap-head {
        flex-wrap: wrap;
        gap: .6rem;
    }

        #company-snapshot .csnap-head > .d-none.d-md-block {
            display: block !important;
            width: 100%;
            text-align: right; /* หรือ center ตามชอบ */
        }
}






/* ===== เริ่มแบบซ่อน + ช้าลง ===== */
#company-snapshot .snapshot-card {
    opacity: 0;
    transform: translateY(12px) scale(.985);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--delay, 0s);
    will-change: transform, opacity;
    position: relative;
    z-index: 1;
}

    /* ทิศทางก่อนเข้าจอ (ผูกกับ data-anim ที่การ์ดเอง) */
    #company-snapshot .snapshot-card[data-anim="left"] {
        transform: translateX(-64px) scale(.985);
    }

    #company-snapshot .snapshot-card[data-anim="right"] {
        transform: translateX( 64px) scale(.985);
    }

    #company-snapshot .snapshot-card[data-anim="up"] {
        transform: translateY(-64px) scale(.985);
    }

    #company-snapshot .snapshot-card[data-anim="down"] {
        transform: translateY( 64px) scale(.985);
    }

    /* เข้าจอแล้วค่อย ๆ หยุดตำแหน่งเดิม */
    #company-snapshot .snapshot-card.is-inview {
        opacity: 1;
        transform: none;
    }

    /* Hover: เด้งออกมาเหมือน popup */
    #company-snapshot .snapshot-card:hover {
        transform: translateY(-8px) scale(1.04);
        box-shadow: 0 20px 44px rgba(37,99,235,.26), 0 2px 0 rgba(255,255,255,.6) inset;
        transition-duration: .45s;
        z-index: 3;
    }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    #company-snapshot .snapshot-card {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}