/**
 * Reusable image parallax.
 *
 * Usage:
 *   <div class="any-container-with-overflow-hidden">
 *     <img class="kfb-parallax-img" data-kfb-parallax-max="40" src="..." />
 *   </div>
 *
 * The parent must have: position: relative (or absolute/fixed), overflow: hidden,
 * and defined dimensions — the image fills it and shifts vertically on scroll.
 *
 * API (data attributes on the img):
 *   data-kfb-parallax-max     — max shift in px (default: 40)
 *   data-kfb-parallax-trigger — viewport ratio 0..1 at which shift starts (default: 0.6)
 *   data-kfb-parallax-range   — px of scroll over which full shift occurs (default: 300)
 */

.kfb-parallax-img {
    --kfb-parallax-shift: 0px;
    --kfb-parallax-max: 80px;
    position: absolute;
    top: calc(-1 * var(--kfb-parallax-max));
    left: 0;
    width: 100%;
    height: calc(100% + var(--kfb-parallax-max));
    object-fit: cover;
    display: block;
    transform: translateY(var(--kfb-parallax-shift));
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .kfb-parallax-img {
        top: 0;
        height: 100%;
        transform: none;
        will-change: auto;
    }
}