bt-trader/app/Views/front/page/welcome/partner.php

<style>
    /* ===== Partner Section (oversized bg + scroll drift) ===== */
    .bt-partner {
        --partner-bg: url("https://static.wixstatic.com/media/c837a6_44e3014997b64b829ef10d8761ce79ee~mv2.jpg/v1/fill/w_1903,h_967,al_c,q_85,enc_avif,quality_auto/c837a6_44e3014997b64b829ef10d8761ce79ee~mv2.jpg");
        position: relative;
        min-height: 640px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #08111e;
    }

    /* ✅ 배경을 섹션보다 "조금 크게" 깔아두고, 이동 여유를 만든다 */
    .bt-partner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--partner-bg) center/cover no-repeat;
        transform: translate3d(0, var(--bg-y, 0px), 0) scale(1.12);
        transform-origin: center;
        will-change: transform;
        z-index: 0;
    }

    /* 어두운 오버레이 */
    .bt-partner::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(900px 600px at 22% 30%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, .22) 100%),
            linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 40%, rgba(0, 0, 0, .22) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .bt-partner .bt-wrap {
        position: relative;
        z-index: 2;
        max-width: 1400px;
        width: 100%;
        padding: 0 70px;
    }

    .bt-partner h2 {
        color: #fff;
        font-weight: 300;
        letter-spacing: -0.02em;
        line-height: 1.08;
        font-size: clamp(36px, 3.8vw, 64px);
        margin: 0;
    }

    .bt-partner .right-block {
        max-width: 520px;
        margin-left: auto;
        margin-right: 40px;
        text-align: left;
    }

    .bt-partner .rule {
        height: 1px;
        width: 180px;
        background: rgba(255, 255, 255, .45);
        margin: 0 0 18px 0;
    }

    .bt-partner p {
        color: rgba(255, 255, 255, .82);
        font-size: 14px;
        line-height: 2.05;
        margin: 0 0 18px 0;
        max-width: 520px;
    }

    .bt-partner .btn-outline-light {
        border-radius: 0;
        padding: 14px 40px;
        border-width: 1px;
        font-weight: 500;
        font-size: 14px;
        color: rgba(255, 255, 255, .9);
    }

    .bt-partner .btn-outline-light:hover {
        background: rgba(255, 255, 255, .10);
        color: #fff;
    }

    .bt-partner .row {
        align-items: center;
    }

    @media (max-width: 991.98px) {
        .bt-partner {
            min-height: 740px;
        }

        .bt-partner .bt-wrap {
            padding: 0 22px;
        }

        .bt-partner .right-block {
            margin: 26px 0 0 0;
            max-width: 100%;
        }

        .bt-partner .rule {
            width: 140px;
        }
    }
</style>

<section class="bt-partner" id="partner">
    <div class="container-fluid p-0">
        <div class="bt-wrap">
            <div class="row g-0">
                <div class="col-lg-6">
                    <h2>
                        Your Trusted<br>
                        Partner in Titanium<br>
                        &amp; Specialty Metals
                    </h2>
                </div>

                <div class="col-lg-6">
                    <div class="right-block">
                        <div class="rule"></div>

                        <p>
                            We deliver high-grade titanium and specialty metals through a reliable global network,
                            providing precise sourcing, consistent quality, and responsive support for partners
                            worldwide.
                        </p>

                        <p class="mt-4">
                            We support global manufacturers with reliable access to high-purity titanium and specialty
                            metals,
                            backed by efficient logistics, transparent communication, and a supply network built for
                            long-term partnership.
                        </p>

                        <div class="mt-4">
                            <a href="#contact" class="btn btn-outline-light">Send an Inquiry</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    (() => {
        const el = document.querySelector('.bt-partner');
        if (!el) return;

        // ✅ "이미지가 영역보다 커서 위아래로 살짝 움직이는" 느낌용
        // scale(1.12) 기준으로 위아래 이동은 너무 크지 않게 (20~60px)
        const isCoarse = window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
        const MAX_SHIFT = isCoarse ? 18 : 46; // px (원본 느낌: 30~55 추천)

        let ticking = false;

        const update = () => {
            ticking = false;

            const rect = el.getBoundingClientRect();
            const vh = window.innerHeight || document.documentElement.clientHeight;

            // 화면 밖이면 계산 스킵
            if (rect.bottom < 0 || rect.top > vh) return;

            // 섹션이 뷰포트를 지나가는 정도 (0~1)
            const progress = (vh - rect.top) / (vh + rect.height);

            // 중앙(0.5) 기준으로 위/아래로 이동
            const shift = (progress - 0.5) * (MAX_SHIFT * 2);

            // CSS 변수로 전달
            el.style.setProperty('--bg-y', `${shift.toFixed(2)}px`);
        };

        const onScroll = () => {
            if (ticking) return;
            ticking = true;
            requestAnimationFrame(update);
        };

        window.addEventListener('scroll', onScroll, { passive: true });
        window.addEventListener('resize', onScroll);
        update();
    })();
</script>