{% comment %}
Custom Section: Banner with 3D Logo (100vh desktop, reduced height mobile, continuous faster auto-rotate, clickable background only)
{% endcomment %}

<!-- Load model-viewer library -->
<script type="module" src="<https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js>"></script>

<style>
  .bb-3d-banner {
    position: relative;
    width: 100%;
    height: 100vh; /* full screen on desktop */
    overflow: hidden;
  }

  /* Background images wrapped in link */
  .bb-3d-banner a {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .bb-3d-banner a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Desktop background visible by default */
  .bb-3d-banner .bg-desktop { display: block; }
  .bb-3d-banner .bg-mobile { display: none; }

  /* 3D model positioning */
  .bb-3d-banner model-viewer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    background: transparent;
    z-index: 2; /* above background, still interactive */

    --auto-rotate-delay: 0s;
    --auto-rotate-speed: 30deg/s;
  }

  /* Mobile overrides */
  @media(max-width: 767px) {
    .bb-3d-banner {
      height: 70vh; /* reduced height */
    }

    .bb-3d-banner .bg-desktop { display: none; }
    .bb-3d-banner .bg-mobile { display: block; }

    .bb-3d-banner model-viewer {
      width: 110px !important;
      height: 110px !important;
    }
  }
</style>

<div class="bb-3d-banner">
  <!-- Background with link -->
  <a href="<https://badandboujee.in/collections/t-shirts>">
    <img class="bg-desktop" 
         src="//badandboujee.in/cdn/shop/files/Concept_-_2-27_1.webp?v=1754737050" 
         alt="Desktop Banner">

    <img class="bg-mobile" 
         src="<https://cdn.shopify.com/s/files/1/0849/7466/6030/files/Concept_-_2-26.webp?v=1754739081>" 
         alt="Mobile Banner">
  </a>

  <!-- 3D Logo (interactive) -->
  <model-viewer id="bb-3d-logo"
      src="<https://cdn.shopify.com/3d/models/6c3ecc8a9172e3e6/BB_lOGO_New_Low_Poly.glb>"
      alt="3D Animated Logo"
      auto-rotate 
      camera-controls 
      disable-zoom>
  </model-viewer>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const viewer = document.getElementById("bb-3d-logo");

    // Resume auto-rotate after user stops interaction
    viewer.addEventListener("camera-change", () => {
      clearTimeout(viewer._autoRotateTimeout);
      viewer._autoRotateTimeout = setTimeout(() => {
        viewer.autoRotate = true;
      }, 3000);
    });
  });
</script>