*/ document.addEventListener("DOMContentLoaded", function () { var el = document.getElementById("myLottie"); if (!el) return; var started = false; var resizeTimer = null; var RERENDER_DELAY_MS = 350; // Track previous viewport to ignore "scroll-induced" resizes var lastW = window.innerWidth; var lastH = window.innerHeight; function width() { return window.visualViewport ? Math.round(window.visualViewport.width) : window.innerWidth; } function height() { return window.visualViewport ? Math.round(window.visualViewport.height) : window.innerHeight; } function shouldRecreate() { var w = width(); var h = height(); // Consider orientation change if landscape/portrait flipped var orientationChanged = (w > h) !== (lastW > lastH); // Many mobile browsers change only height while address bar hides. // We only react when width changed noticeably (>= 24px) OR orientation actually changed. var widthDelta = Math.abs(w - lastW); var significantWidthChange = widthDelta >= 24; // Update last seen values lastW = w; lastH = h; return orientationChanged || significantWidthChange; } function onReady() { el.classList.add("is-visible"); if (typeof el.play === "function") { try { el.play(); } catch (e) {} } } function attachReadyHandlers() { el.addEventListener("ready", onReady, { once: true }); el.addEventListener("load", onReady, { once: true }); } function recreateLottie() { if (!started || !el || !el.parentNode) return; var parent = el.parentNode; var currentSrc = el.getAttribute("src") || el.getAttribute("data-src"); var cls = el.getAttribute("class") || ""; var speed = el.getAttribute("speed") || "1"; var loop = el.hasAttribute("loop"); var repl = document.createElement("dotlottie-wc"); repl.id = el.id; repl.setAttribute("class", cls); repl.setAttribute("speed", speed); if (loop) repl.setAttribute("loop", ""); repl.setAttribute("autoplay", ""); if (currentSrc) repl.setAttribute("src", currentSrc); parent.replaceChild(repl, el); el = repl; attachReadyHandlers(); } function onViewportChange() { // Debounce and ignore scroll-only resizes clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { if (shouldRecreate()) { recreateLottie(); } }, RERENDER_DELAY_MS); } function showAndStart() { el.classList.add("is-visible"); el.setAttribute("autoplay", ""); var src = el.getAttribute("data-src"); if (src) el.setAttribute("src", src); // Initialize lastW/lastH after first paint lastW = width(); lastH = height(); started = true; attachReadyHandlers(); // Fallback play setTimeout(function () { if (typeof el.play === "function") { try { el.play(); } catch (e) {} } }, 2000); } if (window.customElements && customElements.whenDefined) { customElements.whenDefined("dotlottie-wc") .then(function () { setTimeout(showAndStart, 4500); }); } else { setTimeout(showAndStart, 4500); } // Only react on orientationchange immediately; resize is filtered by width change window.addEventListener("orientationchange", onViewportChange, { passive: true }); window.addEventListener("resize", onViewportChange, { passive: true }); });
.webp)



