wwr parallax 2

add_action('wp_footer', function () { ?>

<script>

(function() {

  // Only on Home, skip mobile, respect reduced motion

  if (!document.body.classList.contains('home')) return;

  if (window.matchMedia('(max-width: 767px)').matches) return;

  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  // Prefer your explicit hero block; otherwise fall back to the first cover

  var hero = document.querySelector('.hero-cover.fullbleed') ||

             document.querySelector('.wp-block-cover.alignfull') ||

             document.querySelector('.wp-block-cover');

  if (!hero) return;

  // Try to find an inner image (Gutenberg often uses this element)

  var innerImg = hero.querySelector('.wp-block-cover__image-background, img');

  // Setup: make sure we can animate

  hero.style.willChange = 'background-position';

  if (innerImg) {

    innerImg.style.willChange = 'transform';

    innerImg.style.transformOrigin = 'center center';

  }

  // Apple-style smooth parallax via lerp/inertia

  var ease = 0.08;            // lower = more “floaty”/inertial (try 0.06–0.12)

  var intensity = 0.25;       // how strong the movement feels (0.15–0.35 is nice)

  var current = 0, target = 0;

  var ticking = false;

  function updateTarget() {

    var rect = hero.getBoundingClientRect();

    // When the hero is on screen, rect.top changes with scroll

    target = rect.top * intensity;

    if (!ticking) {

      ticking = true;

      requestAnimationFrame(tick);

    }

  }

  function tick() {

    // Lerp current toward target for smoothness

    current += (target - current) * ease;

    // Apply either background-position or translateY depending on markup

    if (innerImg) {

      // translate image for smoother result (keeps overlay text crisp)

      innerImg.style.transform = 'translateY(' + current + 'px) scale(1.05)';

    } else {

      // fallback: move background position

      hero.style.backgroundPosition = 'center calc(50% + ' + current + 'px)';

    }

    // Keep animating until movement settles

    if (Math.abs(target - current) > 0.1) {

      requestAnimationFrame(tick);

    } else {

      ticking = false;

    }

  }

  // Kick off & listeners

  updateTarget();

  window.addEventListener('scroll', updateTarget, { passive: true });

  window.addEventListener('resize', updateTarget);

  // Re-run after fonts/images load for correct positioning

  window.addEventListener('load', updateTarget);

})();

</script>

<?php });