{% comment %}Shopify: Use "Custom Liquid" section to add this snippet{% endcomment %}
{% raw %}
<!-- KANGAROO HOP TO SHED - Shed City Australian Made -->
<!-- Paste this into a Shopify Custom HTML block -->
<!-- The kangaroo hops from the left, approaches a shed silhouette, peeks inside, then hops away -->
<style>
.sc-shed-scene{position:relative;width:100%;max-width:800px;height:220px;margin:30px auto;overflow:hidden;background:linear-gradient(180deg,#87CEEB 0%,#B0E0E6 60%,#90EE90 60%,#228B22 100%);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.sc-shed-scene-shed{position:absolute;right:80px;bottom:40px;width:160px;height:110px}
.sc-shed-scene-roo{position:absolute;bottom:30px;width:75px;height:105px}
.sc-shed-scene-roo.hopping{animation:sc-shb .4s ease-in-out infinite}
@keyframes sc-shb{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.sc-shed-scene-txt{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(0,132,61,.9);color:#fff;padding:6px 16px;border-radius:20px;font:600 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;white-space:nowrap;letter-spacing:.3px}
.sc-shed-scene-aus{position:absolute;top:12px;right:12px;width:40px;height:40px;background:#00843D;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sc-shed-scene-aus span{color:#FFCD00;font-size:18px}
@media(max-width:600px){.sc-shed-scene{height:170px}.sc-shed-scene-shed{width:120px;height:82px;right:40px;bottom:30px}.sc-shed-scene-roo{width:50px;height:70px;bottom:22px}.sc-shed-scene-txt{font-size:11px;padding:5px 12px}}
</style>
<div class="sc-shed-scene" id="scShedScene">
  <div class="sc-shed-scene-txt">🦘 Made Right Here in Kilmore, Victoria</div>
  <div class="sc-shed-scene-aus"><span>★</span></div>
  <!-- Shed SVG -->
  <div class="sc-shed-scene-shed">
    <svg viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg">
      <polygon points="100,5 0,55 200,55" fill="#8B4513" stroke="#654321" stroke-width="2"/>
      <rect x="10" y="55" width="180" height="80" fill="#A0522D" stroke="#654321" stroke-width="2"/>
      <rect x="15" y="60" width="170" height="70" fill="#B8860B" opacity="0.2"/>
      <rect x="60" y="75" width="80" height="60" fill="#2F1810" stroke="#654321" stroke-width="1"/>
      <line x1="100" y1="75" x2="100" y2="135" stroke="#654321" stroke-width="1"/>
      <circle cx="90" cy="108" r="3" fill="#DAA520"/>
      <circle cx="110" cy="108" r="3" fill="#DAA520"/>
      <rect x="25" y="70" width="25" height="20" fill="#87CEEB" stroke="#654321" stroke-width="1" opacity="0.7"/>
      <rect x="150" y="70" width="25" height="20" fill="#87CEEB" stroke="#654321" stroke-width="1" opacity="0.7"/>
      <line x1="37" y1="70" x2="37" y2="90" stroke="#654321" stroke-width="0.5"/>
      <line x1="25" y1="80" x2="50" y2="80" stroke="#654321" stroke-width="0.5"/>
      <line x1="162" y1="70" x2="162" y2="90" stroke="#654321" stroke-width="0.5"/>
      <line x1="150" y1="80" x2="175" y2="80" stroke="#654321" stroke-width="0.5"/>
    </svg>
  </div>
  <!-- Kangaroo -->
  <div class="sc-shed-scene-roo hopping" id="scShedRoo" style="left:-100px">
    <svg viewBox="0 0 140 160" xmlns="http://www.w3.org/2000/svg" id="scShedRooSvg">
      <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>
</div>
<script>
(function(){
  var scene=document.getElementById('scShedScene'),roo=document.getElementById('scShedRoo');if(!scene||!roo)return;
  var triggered=false;
  function playScene(){
    if(triggered)return;triggered=true;
    var sw=scene.offsetWidth,shedLeft=sw-240,stopX=shedLeft-30;
    roo.style.left='-100px';roo.classList.add('hopping');
    var start=Date.now(),dur=2200;
    function hop(){var p=Math.min((Date.now()-start)/dur,1);var e=1-Math.pow(1-p,3);roo.style.left=(-100+(stopX+100)*e)+'px';if(p<1){requestAnimationFrame(hop)}else{
      roo.classList.remove('hopping');
      // Peek at shed then hop away
      setTimeout(function(){
        roo.classList.add('hopping');
        var sx=stopX,ex=sw+120,s2=Date.now(),d2=1800;
        function hopOut(){var p2=Math.min((Date.now()-s2)/d2,1);roo.style.left=(sx+(ex-sx)*(p2*p2))+'px';if(p2<1){requestAnimationFrame(hopOut)}else{roo.classList.remove('hopping');setTimeout(function(){triggered=false},3000)}}
        requestAnimationFrame(hopOut);
      },2000);
    }}
    requestAnimationFrame(hop);
  }
  var obs=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting)playScene()})},{threshold:0.4});
  obs.observe(scene);
})();
</script>
<!-- END KANGAROO HOP TO SHED -->
{% endraw %}