{"product_id":"bold-new-test","title":"bold-new-test","description":"\u003cstyle\u003e\n\/* Base setup *\/\n.base-img, .overlay-img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n\/* 🧪 ONLY FOR TESTING: Gives you space to scroll so you can see the effect *\/\n.spacing-block {\n  height:65vh; \n  background: #222;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  font-family: sans-serif;\n}\n\n\/* 📱 MOBILE ONLY STYLES *\/\n@media (max-width: 768px) {\n  .scroll-container-normal {\n    position: relative;\n    width: 100%;\n    margin: 40px auto; \n    background-color: #000;\n  }\n\n  .frame-wrapper-normal {\n    position: relative; \n    width: 100%;\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .overlay-img {\n    position: absolute;\n    top: 35%;\n    left: 18%;\n    width: 65%;\n    height: 65%;\n    object-fit: contain;\n    will-change: opacity; \n    transition: none; \/* Prevents CSS delay from fighting JS updates *\/\n  }\n\n  .img-2 {\n    opacity: 1;\n    z-index: 2;\n  }\n\n  .img-3 {\n    opacity: 0;\n    z-index: 2;\n  }\n}\n\n\/* 💻 DESKTOP COMPATIBILITY *\/\n@media (min-width: 769px) {\n  .overlay-img {\n    display: none; \n  }\n}\n\u003c\/style\u003e\n\n\u003cdiv class=\"spacing-block\"\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/cozy-mob-1.webp?v=1781608369\"\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"scroll-container-normal\"\u003e\n  \u003cdiv class=\"frame-wrapper-normal\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold-Animation-Mobile.webp?v=1782556807\" alt=\"Base Frame\" class=\"base-img\"\u003e\n    \n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold-Animation-1.png?v=1782556849\" alt=\"Animation 1\" class=\"overlay-img img-2\"\u003e\n    \n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Bold-Animation-2.png?v=1782556810\" alt=\"Animation 2\" class=\"overlay-img img-3\"\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"spacing-block\"\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/cozy-mob-1.webp?v=1781608369\"\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\nlet currentOpacity = 0;\nlet targetOpacity = 0;\n\nfunction updateFade() {\n  \/\/ Smoothly approach the target opacity\n  currentOpacity += (targetOpacity - currentOpacity) * 0.08;\n\n  \/\/ Snap when very close\n  if (Math.abs(currentOpacity - targetOpacity) \u003c 0.001) {\n    currentOpacity = targetOpacity;\n  }\n\n  document.querySelector(\".img-2\").style.opacity = 1 - currentOpacity;\n  document.querySelector(\".img-3\").style.opacity = currentOpacity;\n\n  requestAnimationFrame(updateFade);\n}\n\nupdateFade();\n\nfunction handleMobileScrollFade() {\n  if (window.innerWidth \u003e 768) return;\n\n  const container = document.querySelector(\".scroll-container-normal\");\n  if (!container) return;\n\n  const rect = container.getBoundingClientRect();\n  const vh = window.innerHeight;\n\n  let progress = 0;\n\n  if (rect.top \u003c= 0 \u0026\u0026 rect.bottom \u003e= vh) {\n    const total = rect.height - vh;\n    progress = total \u003c= 0 ? 1 : (-rect.top) \/ total;\n  } else if (rect.bottom \u003c vh) {\n    progress = 1;\n  }\n\n  progress = Math.max(0, Math.min(1, progress));\n\n  \/\/ Delay the start a little\n  const start = 0.20;\n  const end = 0.90;\n\n  progress = (progress - start) \/ (end - start);\n  progress = Math.max(0, Math.min(1, progress));\n\n  \/\/ Smooth easing\n  progress = progress * progress * (3 - 2 * progress);\n\n  targetOpacity = progress;\n}\n\nwindow.addEventListener(\"scroll\", handleMobileScrollFade, { passive: true });\nwindow.addEventListener(\"resize\", handleMobileScrollFade);\nwindow.addEventListener(\"DOMContentLoaded\", handleMobileScrollFade);\n\u003c\/script\u003e\n","brand":"ACwO","offers":[{"title":"Default Title","offer_id":53834252157246,"sku":null,"price":0.0,"currency_code":"INR","in_stock":false}],"url":"https:\/\/acwo.com\/products\/bold-new-test","provider":"ACwO","version":"1.0","type":"link"}