.order-banner {
        position: relative;
        width: 100%;
        height: 520px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #f8f5f0;
        margin: 5px 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .order-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0.1;
        z-index: 1;
        /* ให้พื้นหลังเองค่อย ๆ โผล่ */
        transform: scale(1.02);
        transition: opacity .8s ease, transform .8s ease;
    }

    .order-content {
        text-align: end;
        z-index: 2;
        position: relative;
    }

    .order-title {
        --glint-duration: 1200ms;
        font-family: 'Brunson';
        font-size: 7rem;
        letter-spacing: 1.5px;
        font-weight: 500;
        color: #FFC600;
        text-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
        margin: 0;
        text-transform: uppercase;
        position: relative;
        overflow: hidden;
        /* สำหรับ glint */
    }

    /* ---------- REVEAL ANIMATIONS ---------- */
    /* สถานะเริ่มต้น: ซ่อนเล็กน้อย + เลื่อนลง */
    [data-reveal] {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity .8s cubic-bezier(.2, .65, .2, 1),
            transform .8s cubic-bezier(.2, .65, .2, 1);
        will-change: opacity, transform;
    }

    /* เมื่อเข้ามาใน viewport */
    .in-view[data-reveal] {
        opacity: 1;
        transform: translateY(0);
    }

    /* ให้แต่ละชิ้นค่อย ๆ ทยอยขึ้น (stagger) */
    .order-banner.in-view .order-content[data-reveal] {
        transition-delay: .08s;
    }

    .order-banner.in-view .order-title[data-reveal] {
        transition-delay: .16s;
    }

    .order-banner.in-view .order-subtitle[data-reveal] {
        transition-delay: .24s;
    }

    /* พื้นหลังค่อยชัดขึ้นด้วย */
    .order-banner.in-view::before {
        opacity: .18;
        transform: scale(1);
    }

    /* ---------- GLINT (วิบวับเบา ๆ หลังโผล่) ---------- */
    .order-title.in-view::after {
        content: '';
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(75deg, transparent 0%, rgba(255, 255, 255, .35) 45%, transparent 90%);
        transform: skewX(-20deg);
        animation: glint var(--glint-duration) ease-out .25s 1 both;
        pointer-events: none;
        filter: blur(6px);

    }

    @keyframes glint {
        from {
            left: -120%;
        }

        to {
            left: 140%;
        }
    }

    @media (max-width: 3000px) {
        .order-banner {
            height: 820px;
        }
    }

    @media (max-width: 2559px) {
        .order-banner {
            height: 700px;
        }
    }


    @media (max-width: 2300px) {
        .order-banner {
            height: 520px;
        }
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1024px) {
           .order-banner {
            height: 300px;
        }
        .order-title {
            font-size: 2.5rem;
            letter-spacing: 2px;
        }

        .order-subtitle {
            font-size: 1rem;
            letter-spacing: 1px;
            padding: 10px 16px;
            border-width: 2px;
        }
    }

    @media (max-width: 768px) {
        .order-banner {
            height: 220px;
        }

        .order-title {
            font-size: 2.5rem;
            letter-spacing: 2px;
        }

        .order-subtitle {
            font-size: 1rem;
            letter-spacing: 1px;
            padding: 10px 16px;
            border-width: 2px;
        }
    }

    @media (max-width: 480px) {
        .order-banner {
            height: 175px;
            margin: 0 auto;
        }

        .order-title {
            font-size: 2rem;
            letter-spacing: 1px;
        }

        .order-subtitle {
            font-size: .9rem;
            padding: 8px 12px;
            border-width: 2px;
        }
    }

    /* ผู้ใช้ที่ตั้งค่าลดแอนิเมชัน */
    @media (prefers-reduced-motion: reduce) {

        [data-reveal],
        .order-banner::before {
            transition: none !important;
            transform: none !important;
        }

        .order-title::after {
            display: none !important;
        }
    }