const year = document.getElementById("year"); if (year) year.textContent = new Date().getFullYear(); const themeToggle = document.querySelector("[data-theme-toggle]"); const themeColor = document.querySelector('meta[name="theme-color"]'); function setTheme(theme, { persist = true } = {}) { const isLight = theme === "light"; document.documentElement.dataset.theme = theme; if (persist) { localStorage.setItem("haon-theme", theme); } if (themeColor) themeColor.setAttribute("content", isLight ? "#f6f2ea" : "#020408"); if (themeToggle) { themeToggle.setAttribute("aria-pressed", String(isLight)); themeToggle.setAttribute("aria-label", isLight ? "Alternar para tema escuro" : "Alternar para tema claro"); } } const currentTheme = document.documentElement.dataset.theme === "light" ? "light" : "dark"; setTheme(currentTheme, { persist: false }); if (themeToggle) { themeToggle.addEventListener("click", () => { const persist = document.documentElement.dataset.themePersist !== "false"; setTheme(document.documentElement.dataset.theme === "light" ? "dark" : "light", { persist }); }); } const menuButton = document.querySelector(".menu-toggle"); const navigation = document.querySelector(".main-nav"); if (menuButton && navigation) { const servicesMenus = navigation.querySelectorAll("[data-services-menu]"); function closeServicesMenus() { servicesMenus.forEach((menu) => { menu.classList.remove("is-open"); const toggle = menu.querySelector("[data-services-menu-toggle]"); if (toggle) toggle.setAttribute("aria-expanded", "false"); }); } function closeMenu() { closeServicesMenus(); navigation.classList.remove("open"); menuButton.classList.remove("active"); menuButton.setAttribute("aria-expanded", "false"); document.body.classList.remove("menu-open"); document.body.style.overflow = ""; } function openMenu() { navigation.classList.add("open"); menuButton.classList.add("active"); menuButton.setAttribute("aria-expanded", "true"); document.body.classList.add("menu-open"); document.body.style.overflow = "hidden"; } menuButton.addEventListener("click", () => { if (navigation.classList.contains("open")) { closeMenu(); return; } openMenu(); }); servicesMenus.forEach((menu) => { const toggle = menu.querySelector("[data-services-menu-toggle]"); if (!toggle) return; toggle.addEventListener("click", () => { const willOpen = !menu.classList.contains("is-open"); closeServicesMenus(); menu.classList.toggle("is-open", willOpen); toggle.setAttribute("aria-expanded", String(willOpen)); }); }); navigation.querySelectorAll("a").forEach((link) => { link.addEventListener("click", closeMenu); }); document.addEventListener("keydown", (event) => { if (event.key === "Escape") closeMenu(); }); window.addEventListener("resize", () => { if (window.innerWidth > 1100) closeMenu(); }); } const revealObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("visible"); revealObserver.unobserve(entry.target); } }); }, { threshold: 0.08 }); document.querySelectorAll(".reveal").forEach((element) => revealObserver.observe(element)); const hero = document.querySelector(".hero"); const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); let heroFrame; const heroCountUp = document.querySelector("[data-count-up]"); function formatCountValue(value) { return String(value).padStart(3, "0"); } function animateCountUp(element) { if (!element || element.dataset.countAnimated === "true") return; const targetValue = Number.parseInt(element.dataset.countUp || "0", 10); if (!Number.isFinite(targetValue) || targetValue <= 0) return; element.dataset.countAnimated = "true"; if (reduceMotion.matches) { element.textContent = formatCountValue(targetValue); return; } const duration = 3000; const startTime = performance.now(); function step(now) { const progress = Math.min((now - startTime) / duration, 1); const easedProgress = 1 - Math.pow(1 - progress, 3); const currentValue = Math.round(targetValue * easedProgress); element.textContent = formatCountValue(currentValue); if (progress < 1) { requestAnimationFrame(step); } } requestAnimationFrame(step); } const heroCopyRotator = document.querySelector(".hero-copy-rotator"); if (heroCopyRotator && !reduceMotion.matches) { const heroCopyPhrases = [ { one: "Transformamos empresas comuns em marcas", two: "líderes do seu mercado", }, { one: "Criamos marcas que aumentam a confiança do cliente", two: "antes mesmo da primeira reunião.", }, { one: "Criamos presença, estratégia e design para marcas", two: "que procuram ser desejadas", }, ]; let activePhrase = heroCopyRotator.querySelector('[data-copy-slot="current"]'); let inactivePhrase = heroCopyRotator.querySelector('[data-copy-slot="next"]'); let heroCopyIndex = 0; let isHeroCopyChanging = false; function setHeroPhrase(phraseElement, phrase) { phraseElement.querySelector('[data-copy-line="one"]').textContent = phrase.one; phraseElement.querySelector('[data-copy-line="two"]').textContent = phrase.two; } window.setInterval(() => { if (isHeroCopyChanging) return; isHeroCopyChanging = true; heroCopyIndex = (heroCopyIndex + 1) % heroCopyPhrases.length; setHeroPhrase(inactivePhrase, heroCopyPhrases[heroCopyIndex]); activePhrase.classList.add("is-exiting"); activePhrase.classList.remove("is-active"); activePhrase.setAttribute("aria-hidden", "true"); inactivePhrase.classList.add("is-active"); inactivePhrase.setAttribute("aria-hidden", "false"); window.setTimeout(() => { activePhrase.classList.remove("is-exiting"); [activePhrase, inactivePhrase] = [inactivePhrase, activePhrase]; isHeroCopyChanging = false; }, 900); }, 3600); } function setHeroDepth(normalizedX = 0, normalizedY = 0) { hero.style.setProperty("--hero-texture-x", `${normalizedX * 16}px`); hero.style.setProperty("--hero-texture-y", `${normalizedY * 12}px`); hero.style.setProperty("--hero-content-x", `${normalizedX * -4}px`); hero.style.setProperty("--hero-content-y", `${normalizedY * -3}px`); hero.style.setProperty("--hero-orb-one-x", `${normalizedX * -28}px`); hero.style.setProperty("--hero-orb-one-y", `${normalizedY * -22}px`); hero.style.setProperty("--hero-orb-two-x", `${normalizedX * 20}px`); hero.style.setProperty("--hero-orb-two-y", `${normalizedY * 16}px`); } if (hero) { if (heroCountUp) { const heroCountObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; animateCountUp(entry.target); heroCountObserver.unobserve(entry.target); }); }, { threshold: 0.6 }); heroCountObserver.observe(heroCountUp); } hero.addEventListener("pointermove", (event) => { if (reduceMotion.matches || event.pointerType === "touch") return; cancelAnimationFrame(heroFrame); heroFrame = requestAnimationFrame(() => { const bounds = hero.getBoundingClientRect(); const normalizedX = ((event.clientX - bounds.left) / bounds.width - .5) * 2; const normalizedY = ((event.clientY - bounds.top) / bounds.height - .5) * 2; setHeroDepth(normalizedX, normalizedY); }); }); hero.addEventListener("pointerleave", () => setHeroDepth()); } const scrollScenes = Array.from(document.querySelectorAll("[data-scroll-scene]")); let sceneFrame = null; function clampSceneProgress(value, min, max) { return Math.min(Math.max(value, min), max); } function updateScrollScenes() { sceneFrame = null; scrollScenes.forEach((scene) => { const rect = scene.getBoundingClientRect(); const sceneHeight = Math.max(rect.height - window.innerHeight, 1); const progress = clampSceneProgress(-rect.top / sceneHeight, 0, 1); scene.style.setProperty("--scene-progress", progress.toFixed(4)); }); } function requestSceneUpdate() { if (sceneFrame !== null) return; sceneFrame = requestAnimationFrame(updateScrollScenes); } if (scrollScenes.length > 0 && !reduceMotion.matches) { updateScrollScenes(); window.addEventListener("scroll", requestSceneUpdate, { passive: true }); window.addEventListener("resize", requestSceneUpdate); } const portfolioTrack = document.querySelector(".portfolio-track"); const portfolioControls = document.querySelector(".portfolio-controls"); const portfolioPrevious = document.querySelector(".portfolio-prev"); const portfolioNext = document.querySelector(".portfolio-next"); const desktopPortfolio = window.matchMedia("(min-width: 761px)"); function portfolioStep() { const firstCard = portfolioTrack.querySelector(".portfolio-card"); const gap = Number.parseFloat(getComputedStyle(portfolioTrack).gap) || 0; return firstCard.getBoundingClientRect().width + gap; } function updatePortfolioControls() { const hasOverflow = portfolioTrack.scrollWidth > portfolioTrack.clientWidth + 1; portfolioControls.hidden = !desktopPortfolio.matches || !hasOverflow; if (!hasOverflow) return; const maxScroll = portfolioTrack.scrollWidth - portfolioTrack.clientWidth; portfolioPrevious.disabled = portfolioTrack.scrollLeft <= 1; portfolioNext.disabled = portfolioTrack.scrollLeft >= maxScroll - 1; } if (portfolioTrack && portfolioControls && portfolioPrevious && portfolioNext) { portfolioPrevious.addEventListener("click", () => { portfolioTrack.scrollBy({ left: -portfolioStep(), behavior: "smooth" }); }); portfolioNext.addEventListener("click", () => { portfolioTrack.scrollBy({ left: portfolioStep(), behavior: "smooth" }); }); portfolioTrack.addEventListener("scroll", updatePortfolioControls, { passive: true }); window.addEventListener("resize", updatePortfolioControls); updatePortfolioControls(); } const clientStrip = document.querySelector(".client-strip"); if (clientStrip) { let isDraggingClients = false; let clientDragStartX = 0; let clientDragStartScroll = 0; clientStrip.querySelectorAll("img").forEach((image) => { image.setAttribute("draggable", "false"); }); clientStrip.addEventListener("pointerdown", (event) => { if (event.button !== 0) return; isDraggingClients = true; clientDragStartX = event.clientX; clientDragStartScroll = clientStrip.scrollLeft; clientStrip.classList.add("is-dragging"); clientStrip.setPointerCapture(event.pointerId); }); clientStrip.addEventListener("pointermove", (event) => { if (!isDraggingClients) return; event.preventDefault(); const distance = event.clientX - clientDragStartX; clientStrip.scrollLeft = clientDragStartScroll - distance; }); function stopClientDrag(event) { if (!isDraggingClients) return; isDraggingClients = false; clientStrip.classList.remove("is-dragging"); if (clientStrip.hasPointerCapture(event.pointerId)) { clientStrip.releasePointerCapture(event.pointerId); } } clientStrip.addEventListener("pointerup", stopClientDrag); clientStrip.addEventListener("pointercancel", stopClientDrag); clientStrip.addEventListener("lostpointercapture", () => { isDraggingClients = false; clientStrip.classList.remove("is-dragging"); }); } const errorPage = document.querySelector("[data-error-page]"); const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); let errorFrame; if (errorPage && !reducedMotion.matches) { errorPage.addEventListener("pointermove", (event) => { if (event.pointerType === "touch") return; cancelAnimationFrame(errorFrame); errorFrame = requestAnimationFrame(() => { const bounds = errorPage.getBoundingClientRect(); const x = event.clientX - bounds.left; const y = event.clientY - bounds.top; const normalizedX = (x / bounds.width - .5) * 2; const normalizedY = (y / bounds.height - .5) * 2; errorPage.style.setProperty("--cursor-x", `${x}px`); errorPage.style.setProperty("--cursor-y", `${y}px`); errorPage.style.setProperty("--depth-x", `${normalizedX * 18}px`); errorPage.style.setProperty("--depth-y", `${normalizedY * 14}px`); }); }); errorPage.addEventListener("pointerleave", () => { errorPage.style.setProperty("--cursor-x", "50%"); errorPage.style.setProperty("--cursor-y", "50%"); errorPage.style.setProperty("--depth-x", "0px"); errorPage.style.setProperty("--depth-y", "0px"); }); } const liquidCanvas = document.querySelector("[data-liquid-404]"); if (liquidCanvas) { const context = liquidCanvas.getContext("2d"); const particles = []; const balls = []; const cueBall = { x: 0, y: 0, vx: 0, vy: 0, radius: 24, active: false, }; const holes = []; const mouse = { x: -9999, y: -9999, active: false }; const aim = { active: false, startX: 0, startY: 0, x: 0, y: 0 }; const gamebar = document.querySelector(".error-gamebar"); const restoreButton = document.querySelector("[data-restore-404]"); const scoreElement = document.querySelector("[data-error-score]"); let liquidWidth = 0; let liquidHeight = 0; let pixelRatio = 1; let particleGap = 8; let score = 0; let isScattered = false; let gameStarted = false; function setScore(value) { score = value; scoreElement.textContent = String(score); } function buildHoles() { const radius = liquidWidth < 520 ? 18 : 26; holes.length = 0; holes.push( { x: radius * 1.25, y: radius * 1.25, radius }, { x: liquidWidth / 2, y: radius * 1.05, radius: radius * .9 }, { x: liquidWidth - radius * 1.25, y: radius * 1.25, radius }, { x: radius * 1.25, y: liquidHeight - radius * 1.25, radius }, { x: liquidWidth / 2, y: liquidHeight - radius * 1.05, radius: radius * .9 }, { x: liquidWidth - radius * 1.25, y: liquidHeight - radius * 1.25, radius }, ); } function buildLiquidText() { const bounds = liquidCanvas.getBoundingClientRect(); liquidWidth = Math.max(1, Math.floor(bounds.width)); liquidHeight = Math.max(1, Math.floor(bounds.height)); pixelRatio = Math.min(window.devicePixelRatio || 1, 2); particleGap = liquidWidth < 520 ? 7 : 9; liquidCanvas.width = Math.floor(liquidWidth * pixelRatio); liquidCanvas.height = Math.floor(liquidHeight * pixelRatio); context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); context.clearRect(0, 0, liquidWidth, liquidHeight); buildHoles(); const fontSize = Math.min(liquidWidth * .38, liquidHeight * 1.2); context.fillStyle = "#fff"; context.font = `800 ${fontSize}px Outfit, Arial, sans-serif`; context.textAlign = "center"; context.textBaseline = "middle"; context.letterSpacing = `${fontSize * -.12}px`; context.fillText("404", liquidWidth / 2, liquidHeight / 2 + fontSize * .02); const imageData = context.getImageData(0, 0, liquidCanvas.width, liquidCanvas.height).data; particles.length = 0; for (let y = 0; y < liquidHeight; y += particleGap) { for (let x = 0; x < liquidWidth; x += particleGap) { const index = ((Math.floor(y * pixelRatio) * liquidCanvas.width) + Math.floor(x * pixelRatio)) * 4 + 3; if (imageData[index] > 90) { particles.push({ homeX: x, homeY: y, x: x + (Math.random() - .5) * 18, y: y + (Math.random() - .5) * 18, vx: 0, vy: 0, size: particleGap * (Math.random() * .34 + .62), tone: Math.random(), pocketed: false, }); } } } } function restoreLiquidText() { balls.length = 0; cueBall.active = false; cueBall.vx = 0; cueBall.vy = 0; mouse.active = false; aim.active = false; isScattered = false; gameStarted = false; gamebar.classList.remove("is-visible"); liquidCanvas.parentElement.classList.remove("is-aiming"); setScore(0); particles.forEach((particle) => { particle.x = particle.homeX + (Math.random() - .5) * 8; particle.y = particle.homeY + (Math.random() - .5) * 8; particle.vx = 0; particle.vy = 0; particle.pocketed = false; }); } function drawHoles() { holes.forEach((hole) => { const gradient = context.createRadialGradient(hole.x, hole.y, 3, hole.x, hole.y, hole.radius * 1.25); gradient.addColorStop(0, "rgba(0,0,0,.98)"); gradient.addColorStop(.58, "rgba(2,4,8,.88)"); gradient.addColorStop(1, "rgba(152,37,242,.28)"); context.fillStyle = gradient; context.beginPath(); context.arc(hole.x, hole.y, hole.radius, 0, Math.PI * 2); context.fill(); context.strokeStyle = "rgba(0,238,173,.28)"; context.lineWidth = 1; context.stroke(); }); } function drawAimLine() { if (!aim.active) return; context.strokeStyle = "rgba(0,238,173,.58)"; context.lineWidth = 1; context.setLineDash([8, 8]); context.beginPath(); context.moveTo(aim.startX, aim.startY); context.lineTo(aim.x, aim.y); context.stroke(); context.setLineDash([]); context.fillStyle = "rgba(0,238,173,.9)"; context.beginPath(); context.arc(aim.startX, aim.startY, 5, 0, Math.PI * 2); context.fill(); } function launchBall() { const dx = aim.startX - aim.x; const dy = aim.startY - aim.y; const power = Math.min(Math.sqrt(dx * dx + dy * dy), 260); if (power < 18) return; isScattered = true; gameStarted = true; gamebar.classList.add("is-visible"); mouse.active = false; mouse.x = -9999; mouse.y = -9999; cueBall.x = aim.startX; cueBall.y = aim.startY; cueBall.vx = dx * .095; cueBall.vy = dy * .095; cueBall.radius = liquidWidth < 520 ? 18 : 24; cueBall.active = true; balls[0] = cueBall; } function updateBalls() { for (let index = balls.length - 1; index >= 0; index -= 1) { const ball = balls[index]; ball.x += ball.vx; ball.y += ball.vy; ball.vx *= .996; ball.vy *= .996; if (ball.x < ball.radius || ball.x > liquidWidth - ball.radius) { ball.vx *= -0.92; ball.x = Math.max(ball.radius, Math.min(liquidWidth - ball.radius, ball.x)); } if (ball.y < ball.radius || ball.y > liquidHeight - ball.radius) { ball.vy *= -0.92; ball.y = Math.max(ball.radius, Math.min(liquidHeight - ball.radius, ball.y)); } holes.forEach((hole) => { const dx = ball.x - hole.x; const dy = ball.y - hole.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < hole.radius + ball.radius * .45) { const angle = Math.atan2(dy, dx); const force = (1 - distance / (hole.radius + ball.radius * .45)) * 1.8; ball.vx += Math.cos(angle) * force; ball.vy += Math.sin(angle) * force; } }); if (Math.abs(ball.vx) + Math.abs(ball.vy) < .018) { ball.vx *= .98; ball.vy *= .98; } } } function drawBalls() { balls.forEach((ball) => { const gradient = context.createRadialGradient(ball.x - ball.radius * .35, ball.y - ball.radius * .35, 2, ball.x, ball.y, ball.radius); gradient.addColorStop(0, "rgba(255,255,255,.98)"); gradient.addColorStop(.45, "rgba(0,238,173,.9)"); gradient.addColorStop(1, "rgba(152,37,242,.68)"); context.fillStyle = gradient; context.beginPath(); context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); context.fill(); }); } function renderLiquidText() { context.clearRect(0, 0, liquidWidth, liquidHeight); if (gameStarted) drawHoles(); updateBalls(); context.globalCompositeOperation = "lighter"; particles.forEach((particle) => { if (particle.pocketed) return; const dx = particle.x - mouse.x; const dy = particle.y - mouse.y; const distance = Math.sqrt(dx * dx + dy * dy); const radius = liquidWidth < 520 ? 96 : 150; if (!isScattered && mouse.active && distance < radius) { const force = (1 - distance / radius) * 2.9; const angle = Math.atan2(dy, dx); particle.vx += Math.cos(angle) * force; particle.vy += Math.sin(angle) * force; } balls.forEach((ball) => { const ballDx = particle.x - ball.x; const ballDy = particle.y - ball.y; const ballDistance = Math.sqrt(ballDx * ballDx + ballDy * ballDy); const collisionRadius = ball.radius + particle.size + 10; if (ballDistance < collisionRadius) { const angle = Math.atan2(ballDy, ballDx); const force = (1 - ballDistance / collisionRadius) * (isScattered ? 7.2 : 5.5); particle.vx += Math.cos(angle) * force + ball.vx * .28; particle.vy += Math.sin(angle) * force + ball.vy * .28; ball.vx *= .997; ball.vy *= .997; } }); if (gameStarted) { holes.forEach((hole) => { const holeDx = particle.x - hole.x; const holeDy = particle.y - hole.y; const holeDistance = Math.sqrt(holeDx * holeDx + holeDy * holeDy); if (holeDistance < hole.radius * 1.85) { const pull = (1 - holeDistance / (hole.radius * 1.85)) * (isScattered ? .28 : .65); particle.vx -= holeDx * pull * .045; particle.vy -= holeDy * pull * .045; } if (holeDistance < hole.radius * .72) { particle.pocketed = true; setScore(score + 10); } }); } if (!isScattered) { particle.vx += (particle.homeX - particle.x) * .025; particle.vy += (particle.homeY - particle.y) * .025; } particle.vx *= isScattered ? .985 : .82; particle.vy *= isScattered ? .985 : .82; particle.x += particle.vx; particle.y += particle.vy; if (isScattered) { if (particle.x < particle.size || particle.x > liquidWidth - particle.size) { particle.vx *= -0.72; particle.x = Math.max(particle.size, Math.min(liquidWidth - particle.size, particle.x)); } if (particle.y < particle.size || particle.y > liquidHeight - particle.size) { particle.vy *= -0.72; particle.y = Math.max(particle.size, Math.min(liquidHeight - particle.size, particle.y)); } } const alpha = .72 + particle.tone * .28; context.fillStyle = particle.tone > .82 ? `rgba(0,238,173,${alpha})` : `rgba(245,244,248,${alpha})`; context.beginPath(); context.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); context.fill(); }); context.globalCompositeOperation = "source-over"; drawBalls(); drawAimLine(); requestAnimationFrame(renderLiquidText); } function updateLiquidMouse(event) { const bounds = liquidCanvas.getBoundingClientRect(); mouse.x = event.clientX - bounds.left; mouse.y = event.clientY - bounds.top; mouse.active = true; } function setAimPosition(event, isStart = false) { const bounds = liquidCanvas.getBoundingClientRect(); const x = event.clientX - bounds.left; const y = event.clientY - bounds.top; if (isStart) { aim.startX = x; aim.startY = y; } aim.x = x; aim.y = y; } function isPrimaryAimPointer(event) { return event.pointerType !== "mouse" || event.button === 0; } buildLiquidText(); renderLiquidText(); window.addEventListener("resize", () => { buildLiquidText(); restoreLiquidText(); }); liquidCanvas.addEventListener("pointermove", updateLiquidMouse); liquidCanvas.addEventListener("pointerenter", updateLiquidMouse); liquidCanvas.addEventListener("pointerleave", () => { mouse.active = false; mouse.x = -9999; mouse.y = -9999; }); liquidCanvas.addEventListener("pointerdown", (event) => { if (!isPrimaryAimPointer(event)) return; event.preventDefault(); aim.active = true; setAimPosition(event, true); liquidCanvas.parentElement.classList.add("is-aiming"); liquidCanvas.setPointerCapture(event.pointerId); }); liquidCanvas.addEventListener("pointermove", (event) => { if (!aim.active) return; event.preventDefault(); setAimPosition(event); }); liquidCanvas.addEventListener("pointerup", (event) => { if (!aim.active) return; event.preventDefault(); launchBall(); aim.active = false; liquidCanvas.parentElement.classList.remove("is-aiming"); if (liquidCanvas.hasPointerCapture(event.pointerId)) { liquidCanvas.releasePointerCapture(event.pointerId); } }); liquidCanvas.addEventListener("pointercancel", () => { aim.active = false; liquidCanvas.parentElement.classList.remove("is-aiming"); }); errorPage.addEventListener("pointerdown", (event) => { if (!isPrimaryAimPointer(event)) return; if (event.target.closest("a, button") || liquidCanvas.contains(event.target)) return; event.preventDefault(); aim.active = true; setAimPosition(event, true); liquidCanvas.parentElement.classList.add("is-aiming"); errorPage.setPointerCapture(event.pointerId); }); errorPage.addEventListener("pointermove", (event) => { if (!aim.active || liquidCanvas.hasPointerCapture(event.pointerId)) return; event.preventDefault(); setAimPosition(event); }); errorPage.addEventListener("pointerup", (event) => { if (!aim.active || liquidCanvas.hasPointerCapture(event.pointerId)) return; event.preventDefault(); launchBall(); aim.active = false; liquidCanvas.parentElement.classList.remove("is-aiming"); if (errorPage.hasPointerCapture(event.pointerId)) { errorPage.releasePointerCapture(event.pointerId); } }); errorPage.addEventListener("pointercancel", () => { aim.active = false; liquidCanvas.parentElement.classList.remove("is-aiming"); }); restoreButton.addEventListener("click", restoreLiquidText); }