{% comment %}Shopify: Use "Custom Liquid" section to add this snippet{% endcomment %}
{% raw %}
<!-- KANGAROO SCROLL HOPPER - Shed City Australian Made -->
<!-- Paste this into a Shopify Custom HTML block -->
<!-- A small kangaroo hops alongside the page as you scroll, following scroll position -->
<style>
.sc-scroll-roo{position:fixed;left:15px;width:60px;height:85px;z-index:9998;pointer-events:none;transition:top .15s ease-out,opacity .4s}
.sc-scroll-roo.bounce{animation:sc-sb .35s ease-in-out}
@keyframes sc-sb{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-18px) rotate(-5deg)}70%{transform:translateY(-8px) rotate(3deg)}}
@media(max-width:600px){.sc-scroll-roo{width:40px;height:56px;left:5px}}
</style>
<div class="sc-scroll-roo" id="scScrollRoo" style="top:50%;opacity:0">
  <svg viewBox="0 0 140 160" xmlns="https://i.pinimg.com/736x/93/ce/40/93ce407812a2af99f9b04aa510e32c81.jpg">
    <g fill="#DAA520" stroke="#B8860B" stroke-width="1">
      <path d="M 25 95 Q 10 80 5 60 Q 2 50 8 48" fill="none" stroke="#DAA520" stroke-width="7" stroke-linecap="round"/>
      <ellipse cx="65" cy="75" rx="28" ry="30"/>
      <ellipse cx="70" cy="78" rx="16" ry="20" fill="#E8B830" opacity="0.5"/>
      <path d="M 50 95 Q 45 115 40 130 Q 38 142 50 142 L 65 142 Q 62 138 58 130 Q 55 118 55 100" fill="#DAA520" stroke="#B8860B"/>
      <ellipse cx="55" cy="144" rx="14" ry="4" fill="#C4941A"/>
      <path d="M 80 90 Q 82 105 80 120 Q 78 128 82 128" fill="none" stroke="#DAA520" stroke-width="5" stroke-linecap="round"/>
      <path d="M 82 62 Q 88 70 86 78 Q 85 82 88 80" fill="none" stroke="#DAA520" stroke-width="4" stroke-linecap="round"/>
      <path d="M 80 55 Q 90 45 95 35" fill="#DAA520" stroke="none"/>
      <ellipse cx="85" cy="48" rx="12" ry="16" fill="#DAA520"/>
      <ellipse cx="100" cy="30" rx="18" ry="14"/>
      <ellipse cx="115" cy="33" rx="8" ry="6" fill="#C4941A"/>
      <ellipse cx="95" cy="14" rx="5" ry="13" transform="rotate(10 95 14)"/>
      <ellipse cx="95" cy="14" rx="3" ry="9" fill="#C4941A" transform="rotate(10 95 14)"/>
      <circle cx="105" cy="27" r="3" fill="#1a1a1a"/>
      <circle cx="106" cy="26" r="1" fill="white"/>
      <circle cx="120" cy="31" r="2.5" fill="#8B6914"/>
    </g>
  </svg>
</div>
<script>
(function(){
  var el=document.getElementById('scScrollRoo');if(!el)return;
  var lastY=window.scrollY,bounceTimer=null,visible=false;
  function update(){
    var scrollY=window.scrollY,docH=document.documentElement.scrollHeight-window.innerHeight;
    if(docH<=0)return;
    var pct=scrollY/docH;
    var topPos=60+pct*(window.innerHeight-150);
    el.style.top=topPos+'px';
    if(!visible&&scrollY>100){visible=true;el.style.opacity='1'}
    if(visible&&scrollY<50){visible=false;el.style.opacity='0'}
    if(Math.abs(scrollY-lastY)>30){el.classList.remove('bounce');void el.offsetWidth;el.classList.add('bounce');clearTimeout(bounceTimer);bounceTimer=setTimeout(function(){el.classList.remove('bounce')},400)}
    lastY=scrollY;
  }
  window.addEventListener('scroll',update,{passive:true});
  update();
})();
</script>
<!-- END KANGAROO SCROLL HOPPER -->
{% endraw %}