${faq.question}

${clickCount(faq.id)} views

`; btn.addEventListener("click", () => toggleListFaq(faq)); const answerPanel = document.createElement("div"); answerPanel.id = `faq-answer-${faq.id}`; answerPanel.className = "faq-item-panel"; answerPanel.hidden = !isOpen; answerPanel.style.setProperty("--cat-color", color); const answerBody = document.createElement("div"); answerBody.className = "faq-item-answer"; answerBody.textContent = faq.answer; answerPanel.appendChild(answerBody); item.appendChild(btn); item.appendChild(answerPanel); panel.appendChild(item); }); group.appendChild(toggle); group.appendChild(panel); listEl.appendChild(group); }); } function onSearchInput() { const query = (searchInput.value || "").trim(); if (!query) { expandedCategories.clear(); expandedListFaqId = null; } renderList(); } searchInput.addEventListener("input", onSearchInput); searchInput.addEventListener("search", onSearchInput); renderFilters(); renderLegend(); renderList(); function buildStarfield(count) { const stars = []; for (let i = 0; i < count; i++) { stars.push({ nx: seeded(i * 2.1), ny: seeded(i * 3.7 + 1), size: 0.35 + seeded(i * 5.2) * 1.15, alpha: 0.14 + seeded(i * 7.1) * 0.52, twinkle: seeded(i * 11.3) * Math.PI * 2, warm: seeded(i * 13.9) > 0.84, }); } return stars; } const starCanvas = document.getElementById("starfield"); const stars = buildStarfield(420); let starCtx = null; let starW = 0; let starH = 0; let starDpr = 1; function resizeStarfield() { if (!starCanvas) return; starDpr = Math.min(window.devicePixelRatio || 1, 2); starW = window.innerWidth; starH = window.innerHeight; starCanvas.width = Math.floor(starW * starDpr); starCanvas.height = Math.floor(starH * starDpr); starCanvas.style.width = `${starW}px`; starCanvas.style.height = `${starH}px`; starCtx = starCanvas.getContext("2d"); starCtx.setTransform(starDpr, 0, 0, starDpr, 0, 0); } function drawStarfield(t) { if (!starCtx) return; starCtx.clearRect(0, 0, starW, starH); const twinkleOn = !reducedMotion; stars.forEach((s) => { const tw = twinkleOn ? 0.72 + Math.sin(t * 0.0008 + s.twinkle) * 0.28 : 1; const a = s.alpha * tw; starCtx.beginPath(); starCtx.arc(s.nx * starW, s.ny * starH, s.size, 0, Math.PI * 2); starCtx.fillStyle = s.warm ? `rgba(255, 165, 100, ${a})` : `rgba(210, 225, 255, ${a * 0.95})`; starCtx.fill(); }); } if (starCanvas) { resizeStarfield(); window.addEventListener("resize", resizeStarfield); (function starLoop(t) { drawStarfield(t); requestAnimationFrame(starLoop); })(performance.now()); } if (reducedMotion) { wrap.hidden = true; if (globeCore) globeCore.hidden = true; fallbackNote.hidden = false; return; } function createIcosphere(radius, subdivisions) { const phi = (1 + Math.sqrt(5)) / 2; const raw = [ [-1, phi, 0], [1, phi, 0], [-1, -phi, 0], [1, -phi, 0], [0, -1, phi], [0, 1, phi], [0, -1, -phi], [0, 1, -phi], [phi, 0, -1], [phi, 0, 1], [-phi, 0, -1], [-phi, 0, 1], ]; const vertices = raw.map(([x, y, z]) => { const len = Math.sqrt(x * x + y * y + z * z); return { x: (x / len) * radius, y: (y / len) * radius, z: (z / len) * radius }; }); let faces = [ [0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11], [1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8], [3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9], [4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1], ]; for (let s = 0; s < subdivisions; s++) { const midCache = {}; const mid = (a, b) => { const key = a < b ? `${a}_${b}` : `${b}_${a}`; if (midCache[key] !== undefined) return midCache[key]; const va = vertices[a]; const vb = vertices[b]; let x = va.x + vb.x; let y = va.y + vb.y; let z = va.z + vb.z; const len = Math.sqrt(x * x + y * y + z * z) || 1; vertices.push({ x: (x / len) * radius, y: (y / len) * radius, z: (z / len) * radius }); midCache[key] = vertices.length - 1; return midCache[key]; }; const next = []; faces.forEach(([a, b, c]) => { const ab = mid(a, b); const bc = mid(b, c); const ca = mid(c, a); next.push([a, ab, ca], [b, bc, ab], [c, ca, bc], [ab, bc, ca]); }); faces = next; } const edgeSet = new Set(); faces.forEach(([a, b, c]) => { [[a, b], [b, c], [c, a]].forEach(([i, j]) => { edgeSet.add(i < j ? `${i}-${j}` : `${j}-${i}`); }); }); return { vertices, meshEdges: [...edgeSet].map((k) => k.split("-").map(Number)), }; } function normalize(v) { const len = Math.hypot(v.x, v.y, v.z) || 1; return { x: v.x / len, y: v.y / len, z: v.z / len }; } function cross(a, b) { return { x: a.y * b.z - a.z * b.y, y: a.z * b.x - a.x * b.z, z: a.x * b.y - a.y * b.x, }; } function orbitBasis(incl, raan) { const n = normalize({ x: Math.sin(incl) * Math.sin(raan), y: Math.cos(incl), z: Math.sin(incl) * Math.cos(raan), }); const up = Math.abs(n.y) > 0.92 ? { x: 1, y: 0, z: 0 } : { x: 0, y: 1, z: 0 }; const u = normalize(cross(n, up)); const v = normalize(cross(n, u)); return { u, v }; } function buildMoons() { if (PROTOTYPE_ONE_MOON) { const faq = faqs[0]; const basis = orbitBasis(0.22, 0.35); return [ { faq, r: MOON_ORBIT_R, u: basis.u, v: basis.v, phase: 0, omega: (2 * Math.PI) / MOON_ORBIT_PERIOD_SEC, dir: 1, color: faq.categoryColor || categoryColors[faq.category] || "#F26430", pulse: 0, }, ]; } const orbitDefs = buildCategoryOrbitDefs(); const byCategory = {}; faqs.forEach((f) => { if (!byCategory[f.category]) byCategory[f.category] = []; byCategory[f.category].push(f); }); const moons = []; orbitDefs.forEach((def) => { const catFaqs = byCategory[def.category] || []; const count = catFaqs.length; catFaqs.forEach((faq, slot) => { moons.push({ faq, r: def.r, u: def.u, v: def.v, phase: count > 1 ? (slot / count) * Math.PI * 2 : 0, omega: (2 * Math.PI) / def.periodSec, dir: 1, color: faq.categoryColor || def.color, pulse: seeded(slot * 7.3) * Math.PI * 2, }); }); }); return moons; } const geosphere = createIcosphere(PLANET_R, MESH_SUBDIV); const moons = buildMoons(); /* ── Moon ↔ modal particle transition ─────────────────────────────────── */ const FX_COUNT = 88; const FX_DURATION = 760; const fxCanvas = document.getElementById("fx-particles"); let fxCtx = null; let fxW = 0; let fxH = 0; let fxDpr = 1; const fx = { active: false, mode: null, moonIdx: -1, particles: [], start: 0 }; function easeOutCubic(t) { return 1 - (1 - t) ** 3; } function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2; } function lerp(a, b, t) { return a + (b - a) * t; } function isFxActive() { return fx.active; } function stopFx() { fx.active = false; fx.mode = null; fx.moonIdx = -1; fx.particles = []; modal.classList.remove("is-fx-busy"); wrap.classList.remove("is-fx-busy"); } function resizeFxCanvas() { if (!fxCanvas) return; fxDpr = Math.min(window.devicePixelRatio || 1, 2); fxW = window.innerWidth; fxH = window.innerHeight; fxCanvas.width = Math.floor(fxW * fxDpr); fxCanvas.height = Math.floor(fxH * fxDpr); fxCanvas.style.width = `${fxW}px`; fxCanvas.style.height = `${fxH}px`; fxCtx = fxCanvas.getContext("2d"); fxCtx.setTransform(fxDpr, 0, 0, fxDpr, 0, 0); } function clearFxCanvas() { if (fxCtx) fxCtx.clearRect(0, 0, fxW, fxH); } function canvasPointToPage(sx, sy) { const r = wrap.getBoundingClientRect(); return { x: r.left + sx, y: r.top + sy }; } function getMoonPagePoint(moonIdx) { const p = frameProjected.find((m) => m.idx === moonIdx); if (!p) return null; return canvasPointToPage(p.sx, p.sy); } function sampleRectPoints(rect, count) { const cols = Math.max(2, Math.ceil(Math.sqrt(count * (rect.width / Math.max(rect.height, 1))))); const rows = Math.max(2, Math.ceil(count / cols)); const pts = []; for (let i = 0; i < count; i++) { const col = i % cols; const row = Math.floor(i / cols); pts.push({ x: rect.left + ((col + 0.5) / cols) * rect.width, y: rect.top + ((row + 0.5) / rows) * rect.height, }); } return pts; } function measureModalPanelRect() { modal.removeAttribute("hidden"); modal.classList.add("modal--fx-hidden"); modal.classList.remove("modal--fx-visible", "modal--fx-forming"); if (embedded) layoutEmbedModal(); return modal.querySelector(".modal-panel").getBoundingClientRect(); } function spawnOpenParticles(cx, cy, color, targets) { fx.particles = targets.map((tgt, i) => { const ang = seeded(i * 3.17) * Math.PI * 2; const dist = 28 + seeded(i * 7.41) * 72; const speed = 0.85 + seeded(i * 5.03) * 0.3; return { sx: cx, sy: cy, bx: cx + Math.cos(ang) * dist * speed, by: cy + Math.sin(ang) * dist * speed, x: cx, y: cy, tx: tgt.x, ty: tgt.y, color: seeded(i * 1.13) > 0.2 ? color : "#ffffff", size: 1.4 + seeded(i * 2.87) * 3.2, }; }); } function spawnCloseParticles(rect, color) { const origins = sampleRectPoints(rect, FX_COUNT); fx.particles = origins.map((o, i) => ({ x: o.x, y: o.y, ox: o.x, oy: o.y, tx: o.x, ty: o.y, color: seeded(i * 1.71) > 0.28 ? color : "#ffffff", size: 1.2 + seeded(i * 4.03) * 2.4, })); } function finishOpenFx() { stopFx(); clearFxCanvas(); modal.classList.remove("modal--fx-hidden", "modal--fx-forming", "is-fx-busy"); modal.classList.add("modal--fx-visible"); modal.style.removeProperty("--modal-fx-opacity"); attachEmbedModalListeners(); try { modal.querySelector(".modal-close").focus(); } catch { /* ignore */ } } function finishCloseFx() { stopFx(); clearFxCanvas(); closeModalImmediate(); } function startMoonOpenFx(faq, moonIdx) { const origin = getMoonPagePoint(moonIdx); if (!origin) { openModalImmediate(faq); return; } prepareModalContent(faq); const panelRect = measureModalPanelRect(); const targets = sampleRectPoints(panelRect, FX_COUNT); const color = moons[moonIdx].color; modalMoonIdx = moonIdx; fx.moonIdx = moonIdx; fx.mode = "open"; fx.start = performance.now(); fx.active = true; modal.classList.add("is-fx-busy", "modal--fx-hidden"); wrap.classList.add("is-fx-busy"); document.body.style.overflow = "hidden"; spawnOpenParticles(origin.x, origin.y, color, targets); } function startMoonCloseFx() { const moonIdx = modalMoonIdx; const panel = modal.querySelector(".modal-panel"); const rect = panel.getBoundingClientRect(); const color = moons[moonIdx]?.color || "#F26430"; modal.classList.add("modal--fx-hidden", "is-fx-busy"); modal.classList.remove("modal--fx-visible", "modal--fx-forming"); detachEmbedModalListeners(); fx.moonIdx = moonIdx; fx.mode = "close"; fx.start = performance.now(); fx.active = true; wrap.classList.add("is-fx-busy"); spawnCloseParticles(rect, color); } function updateAndDrawFx(now) { if (!fx.active || !fxCtx) return; const progress = Math.min(1, (now - fx.start) / FX_DURATION); if (fx.mode === "open") { const burstEnd = 0.26; fx.particles.forEach((p) => { if (progress < burstEnd) { const u = easeOutCubic(progress / burstEnd); p.x = lerp(p.sx, p.bx, u); p.y = lerp(p.sy, p.by, u); } else { const u = easeOutCubic((progress - burstEnd) / (1 - burstEnd)); p.x = lerp(p.bx, p.tx, u); p.y = lerp(p.by, p.ty, u); } }); if (progress > 0.68) { const fade = (progress - 0.68) / 0.32; modal.classList.add("modal--fx-forming"); modal.style.setProperty("--modal-fx-opacity", String(fade)); } if (progress >= 1) finishOpenFx(); } else if (fx.mode === "close") { const target = getMoonPagePoint(fx.moonIdx); const tx = target?.x ?? fx.particles[0]?.tx ?? 0; const ty = target?.y ?? fx.particles[0]?.ty ?? 0; fx.particles.forEach((p, i) => { p.tx = tx; p.ty = ty; if (progress < 0.12) { const ang = seeded(i * 9.31) * Math.PI * 2; const push = (1 - progress / 0.12) * 2.5; p.x = p.ox + Math.cos(ang) * push * 3; p.y = p.oy + Math.sin(ang) * push * 3; } else { const u = easeInOutCubic((progress - 0.12) / 0.88); p.x = lerp(p.ox, p.tx, u); p.y = lerp(p.oy, p.ty, u); } }); if (progress >= 1) finishCloseFx(); } clearFxCanvas(); fx.particles.forEach((p) => { const glow = fxCtx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 2.8); glow.addColorStop(0, hexToRgba(p.color, 0.95)); glow.addColorStop(0.45, hexToRgba(p.color, 0.35)); glow.addColorStop(1, hexToRgba(p.color, 0)); fxCtx.beginPath(); fxCtx.arc(p.x, p.y, p.size * 2.8, 0, Math.PI * 2); fxCtx.fillStyle = glow; fxCtx.fill(); fxCtx.beginPath(); fxCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2); fxCtx.fillStyle = p.color; fxCtx.fill(); }); } if (fxCanvas) { resizeFxCanvas(); window.addEventListener("resize", resizeFxCanvas); } const ctxBack = canvasBack.getContext("2d"); const ctxFront = canvasFront.getContext("2d"); const DEFAULT_VIEW_Y = 0.55; const DEFAULT_VIEW_X = 0.22; const TAP_THRESHOLD = 6; const SCROLL_DRAG_BIAS = 1; const isCoarsePointer = window.matchMedia("(pointer: coarse)").matches; const useCanvasClickOnly = isCoarsePointer && !embedded; let width = 0; let height = 0; let dpr = 1; let viewY = DEFAULT_VIEW_Y; let viewX = DEFAULT_VIEW_X; let velY = 0; let velX = 0; let planetSpin = 0; let dragging = false; let pointerActive = false; let downX = 0; let downY = 0; let lastX = 0; let lastY = 0; let hovered = -1; let startTime = performance.now(); let activePointerId = null; let pointerDidDrag = false; let tapMoonIdx = -1; let pendingTapFaq = null; let tapCancelled = false; let centerAnimFrame = null; let dragPending = false; let lastPostedEmbedHeight = 0; let embedHeightDebounceTimer = null; function measureEmbedHeight() { return Math.ceil(document.documentElement.scrollHeight || document.body.scrollHeight); } function postEmbedHeightNow() { if (!embedded) return; const h = measureEmbedHeight(); if (Math.abs(h - lastPostedEmbedHeight) < 4) return; lastPostedEmbedHeight = h; try { parent.postMessage({ vystoFrame: "faq-prototype", height: h }, "*"); } catch { /* ignore */ } } function scheduleEmbedHeight(delay = 200) { if (!embedded) return; clearTimeout(embedHeightDebounceTimer); embedHeightDebounceTimer = window.setTimeout(postEmbedHeightNow, delay); } function releaseActiveCapture() { if (activePointerId === null) return; try { canvasFront.releasePointerCapture(activePointerId); } catch { /* ignore */ } activePointerId = null; } function cancelPointerForScroll() { dragPending = false; pointerActive = false; dragging = false; tapCancelled = true; pendingTapFaq = null; pendingTapMoonIdx = -1; activePointerId = null; releaseActiveCapture(); } function clearPointerState() { dragPending = false; pointerActive = false; dragging = false; pointerDidDrag = false; tapMoonIdx = -1; pendingTapFaq = null; pendingTapMoonIdx = -1; tapCancelled = false; activePointerId = null; wrap.classList.remove("is-dragging"); releaseActiveCapture(); } function centerGlobe() { document.body.classList.remove("is-list-focus"); scheduleEmbedHeight(380); if (centerAnimFrame) cancelAnimationFrame(centerAnimFrame); const fromY = viewY; const fromX = viewX; const duration = reducedMotion ? 0 : 520; velY = 0; velX = 0; wrap.classList.remove("is-dragging"); wrap.classList.add("is-recentering"); window.setTimeout(() => wrap.classList.remove("is-recentering"), duration || 1); const start = performance.now(); function step(now) { const t = duration ? Math.min(1, (now - start) / duration) : 1; const eased = 1 - (1 - t) ** 3; viewY = fromY + (DEFAULT_VIEW_Y - fromY) * eased; viewX = fromX + (DEFAULT_VIEW_X - fromX) * eased; if (t < 1) centerAnimFrame = requestAnimationFrame(step); else centerAnimFrame = null; } centerAnimFrame = requestAnimationFrame(step); } function scrollToElement(target) { if (!target) return; // Prefer instant jump: security scan blocks scrollIntoView options named "behavior". target.scrollIntoView(true); } function scrollToFaqList() { if (embedded && isCoarsePointer) { document.body.classList.add("is-list-focus"); scheduleEmbedHeight(380); return; } scrollToElement(document.querySelector(".list-header") || document.getElementById("list-section")); } function bindButtonAction(el, handler) { if (!el || typeof handler !== "function") return; let touchEndedAt = 0; el.addEventListener( "touchend", (e) => { touchEndedAt = Date.now(); e.preventDefault(); handler(e); }, { passive: false } ); el.addEventListener("click", (e) => { if (Date.now() - touchEndedAt < 450) { e.preventDefault(); return; } handler(e); }); } function tryOpenTap() { if (fx.active || tapCancelled || !pendingTapFaq) return; openModal(pendingTapFaq, pendingTapMoonIdx); } function endPointer(clientX, clientY, allowTap) { if (!pointerActive && !dragPending && activePointerId === null && !dragging) return; const isTap = allowTap && !pointerDidDrag && !tapCancelled && Math.abs(clientX - downX) + Math.abs(clientY - downY) < TAP_THRESHOLD; if (isTap) tryOpenTap(); clearPointerState(); } function resize() { dpr = Math.min(window.devicePixelRatio || 1, 2); width = wrap.clientWidth; height = wrap.clientHeight; [canvasBack, canvasFront].forEach((c) => { c.width = Math.floor(width * dpr); c.height = Math.floor(height * dpr); c.style.width = `${width}px`; c.style.height = `${height}px`; }); ctxBack.setTransform(dpr, 0, 0, dpr, 0, 0); ctxFront.setTransform(dpr, 0, 0, dpr, 0, 0); } function rotateView(p, cosX, sinX, cosY, sinY) { const x1 = p.x * cosY - p.z * sinY; const z1 = p.x * sinY + p.z * cosY; const y1 = p.y * cosX - z1 * sinX; const z2 = p.y * sinX + z1 * cosX; return { x: x1, y: y1, z: z2 }; } function rotatePlanetSpin(p, spin) { const c = Math.cos(spin); const s = Math.sin(spin); return { x: p.x * c - p.z * s, y: p.y, z: p.x * s + p.z * c, }; } function project(p) { const fov = 540; const z = Math.max(p.z, -fov + 40); const scale = fov / (fov + z); return { sx: width / 2 + p.x * scale, sy: height / 2 - p.y * scale, scale, z: p.z }; } function moonWorldPos(moon, tSec) { const theta = moon.phase + moon.dir * moon.omega * tSec; const c = Math.cos(theta); const s = Math.sin(theta); const r = moon.r; return { x: r * (c * moon.u.x + s * moon.v.x), y: r * (c * moon.u.y + s * moon.v.y), z: r * (c * moon.u.z + s * moon.v.z), }; } function drawPlanetMesh(ctx, cosX, sinX, cosY, sinY, spin) { const verts = geosphere.vertices; ctx.lineCap = "round"; geosphere.meshEdges.forEach(([ai, bi]) => { const a = rotateView(rotatePlanetSpin(verts[ai], spin), cosX, sinX, cosY, sinY); const b = rotateView(rotatePlanetSpin(verts[bi], spin), cosX, sinX, cosY, sinY); const pa = project(a); const pb = project(b); const zAvg = (a.z + b.z) / 2; const front = zAvg < 0; const alpha = front ? 0.05 + (-zAvg / PLANET_R) * 0.22 : 0.012 + Math.max(0, (PLANET_R - Math.abs(zAvg)) / PLANET_R) * 0.045; ctx.beginPath(); ctx.moveTo(pa.sx, pa.sy); ctx.lineTo(pb.sx, pb.sy); ctx.strokeStyle = `rgba(255, 115, 55, ${alpha})`; ctx.lineWidth = front ? 0.42 : 0.22; ctx.stroke(); }); verts.forEach((v) => { const rp = rotateView(rotatePlanetSpin(v, spin), cosX, sinX, cosY, sinY); const pr = project(rp); const front = rp.z < 0; const alpha = front ? 0.18 + (-rp.z / PLANET_R) * 0.22 : 0.025 + Math.max(0, (PLANET_R - Math.abs(rp.z)) / PLANET_R) * 0.05; const r = (front ? 0.75 : 0.45) * pr.scale; ctx.beginPath(); ctx.arc(pr.sx, pr.sy, r, 0, Math.PI * 2); ctx.fillStyle = `rgba(255, 140, 70, ${alpha})`; ctx.fill(); }); } function drawPlanetAtmosphere(ctx, cosX, sinX, cosY, sinY) { const center = project({ x: 0, y: 0, z: 0 }); const edge = rotateView({ x: PLANET_R, y: 0, z: 0 }, cosX, sinX, cosY, sinY); const pe = project(edge); const screenR = Math.hypot(pe.sx - center.sx, pe.sy - center.sy); const outer = ctx.createRadialGradient(center.sx, center.sy, screenR * 0.6, center.sx, center.sy, screenR * 1.05); outer.addColorStop(0, "rgba(242, 100, 48, 0.02)"); outer.addColorStop(0.65, "rgba(242, 100, 48, 0.05)"); outer.addColorStop(1, "transparent"); ctx.fillStyle = outer; ctx.beginPath(); ctx.arc(center.sx, center.sy, screenR * 1.05, 0, Math.PI * 2); ctx.fill(); } function drawPlanetCoreHalo(ctx) { const cx = width / 2; const cy = height / 2; const inner = PLANET_R * 0.22; const outer = PLANET_R * 0.55; const g = ctx.createRadialGradient(cx, cy, inner, cx, cy, outer); g.addColorStop(0, "transparent"); g.addColorStop(0.35, "rgba(255, 150, 80, 0.08)"); g.addColorStop(0.6, "rgba(242, 100, 48, 0.04)"); g.addColorStop(1, "transparent"); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(cx, cy, outer, 0, Math.PI * 2); ctx.fill(); } /** Depth layer for draw order only — moon is always rendered, never hidden. */ function isMoonInFront(rp) { const r2 = rp.x * rp.x + rp.y * rp.y; if (r2 >= PLANET_R * PLANET_R) return rp.z <= 0; const nearFaceZ = -Math.sqrt(PLANET_R * PLANET_R - r2); return rp.z <= nearFaceZ; } function drawOrbitGuide(ctx, moon, cosX, sinX, cosY, sinY) { ctx.beginPath(); let started = false; for (let a = 0; a <= Math.PI * 2 + 0.02; a += 0.04) { const c = Math.cos(a); const s = Math.sin(a); const world = { x: moon.r * (c * moon.u.x + s * moon.v.x), y: moon.r * (c * moon.u.y + s * moon.v.y), z: moon.r * (c * moon.u.z + s * moon.v.z), }; const rp = rotateView(world, cosX, sinX, cosY, sinY); const pr = project(rp); if (!started) { ctx.moveTo(pr.sx, pr.sy); started = true; } else { ctx.lineTo(pr.sx, pr.sy); } } ctx.strokeStyle = "rgba(255, 130, 80, 0.14)"; ctx.lineWidth = 1; ctx.stroke(); } function drawMoon(ctx, sx, sy, r, color, isHovered, t, pulsePhase) { const rad = r * (1 + Math.sin(t * 0.002 + pulsePhase) * 0.04); const glow = isHovered ? 1.25 : 0.9; const halo = ctx.createRadialGradient(sx, sy, rad * 0.4, sx, sy, rad * 3.5); halo.addColorStop(0, hexToRgba(color, 0.55 * glow)); halo.addColorStop(0.5, hexToRgba(color, 0.15 * glow)); halo.addColorStop(1, hexToRgba(color, 0)); ctx.beginPath(); ctx.arc(sx, sy, rad * 3.5, 0, Math.PI * 2); ctx.fillStyle = halo; ctx.fill(); const body = ctx.createRadialGradient(sx - rad * 0.25, sy - rad * 0.25, 0, sx, sy, rad); body.addColorStop(0, "#ffffff"); body.addColorStop(0.35, color); body.addColorStop(1, hexToRgba(color, 0.75)); ctx.beginPath(); ctx.arc(sx, sy, rad, 0, Math.PI * 2); ctx.fillStyle = body; ctx.fill(); ctx.beginPath(); ctx.arc(sx + rad * 0.2, sy + rad * 0.15, rad * 0.22, 0, Math.PI * 2); ctx.fillStyle = hexToRgba(color, 0.35); ctx.fill(); if (isHovered) { ctx.beginPath(); ctx.arc(sx, sy, hitRadius(rad) * 0.55, 0, Math.PI * 2); ctx.strokeStyle = "rgba(255,255,255,0.4)"; ctx.lineWidth = 1; ctx.setLineDash([4, 5]); ctx.stroke(); ctx.setLineDash([]); } } function isMoonHidden(idx) { if (fx.active && fx.moonIdx === idx) return true; if (modalMoonIdx === idx && !modal.hasAttribute("hidden")) return true; return false; } function draw(t) { ctxBack.clearRect(0, 0, width, height); ctxFront.clearRect(0, 0, width, height); const elapsedSec = (t - startTime) / 1000; if (!dragging) { velY *= 0.965; velX *= 0.965; viewY += velY; viewX += velX; viewX = Math.max(-0.75, Math.min(0.75, viewX)); planetSpin += PLANET_SPIN; } const cosY = Math.cos(viewY); const sinY = Math.sin(viewY); const cosX = Math.cos(viewX); const sinX = Math.sin(viewX); drawPlanetAtmosphere(ctxBack, cosX, sinX, cosY, sinY); const projected = moons.map((moon, idx) => { const world = moonWorldPos(moon, elapsedSec); const rp = rotateView(world, cosX, sinX, cosY, sinY); const clicks = clickCount(moon.faq.id); const pr = project(rp); return { idx, ...pr, rpZ: rp.z, inFront: isMoonInFront(rp), clicks, radius: moonRadius(clicks) * pr.scale, color: moon.color, faq: moon.faq, pulse: moon.pulse, }; }); frameProjected = projected; projected .filter((p) => !p.inFront && !isMoonHidden(p.idx)) .sort((a, b) => a.rpZ - b.rpZ) .forEach((p) => drawMoon(ctxBack, p.sx, p.sy, p.radius, p.color, false, t, p.pulse)); drawPlanetMesh(ctxBack, cosX, sinX, cosY, sinY, planetSpin); drawPlanetCoreHalo(ctxBack); projected .filter((p) => p.inFront && !isMoonHidden(p.idx)) .sort((a, b) => a.rpZ - b.rpZ) .forEach((p) => drawMoon(ctxFront, p.sx, p.sy, p.radius, p.color, p.idx === hovered, t, p.pulse)); updateAndDrawFx(t); requestAnimationFrame(draw); } function hitTest(clientX, clientY) { const rect = canvasFront.getBoundingClientRect(); const mx = clientX - rect.left; const my = clientY - rect.top; const candidates = []; frameProjected.forEach((p) => { if (isMoonHidden(p.idx)) return; const r = hitRadius(p.radius); const d = (mx - p.sx) ** 2 + (my - p.sy) ** 2; if (d < r * r) candidates.push({ idx: p.idx, d, z: p.rpZ }); }); if (!candidates.length) return -1; candidates.sort((a, b) => b.z - a.z || a.d - b.d); return candidates[0].idx; } function onPointerMove(e) { if (fx.active || e.target.closest(".hero-actions")) return; if (activePointerId !== null && e.pointerId === activePointerId && e.buttons === 0) { endPointer(e.clientX, e.clientY, true); return; } if (dragPending && activePointerId === e.pointerId) { const dx = Math.abs(e.clientX - downX); const dy = Math.abs(e.clientY - downY); const moved = dx + dy; if (moved < TAP_THRESHOLD) return; if (dy >= dx * SCROLL_DRAG_BIAS) { cancelPointerForScroll(); return; } dragPending = false; pointerActive = true; dragging = true; pointerDidDrag = true; tapCancelled = true; pendingTapFaq = null; pendingTapMoonIdx = -1; lastX = e.clientX; lastY = e.clientY; wrap.classList.add("is-dragging"); if (!embedded) { try { canvasFront.setPointerCapture(e.pointerId); } catch { /* ignore */ } } return; } if (pointerActive) { const dx = Math.abs(e.clientX - downX); const dy = Math.abs(e.clientY - downY); const moved = dx + dy; if (!pointerDidDrag && moved >= TAP_THRESHOLD) { if (dy >= dx * SCROLL_DRAG_BIAS) { cancelPointerForScroll(); return; } pointerDidDrag = true; dragging = true; tapCancelled = true; pendingTapFaq = null; pendingTapMoonIdx = -1; wrap.classList.add("is-dragging"); } if (dragging) { velY = (e.clientX - lastX) * 0.0035; velX = -(e.clientY - lastY) * 0.0028; lastX = e.clientX; lastY = e.clientY; viewY += velY; viewX += velX; viewX = Math.max(-0.75, Math.min(0.75, viewX)); } return; } if (dragging) { velY = (e.clientX - lastX) * 0.0035; velX = -(e.clientY - lastY) * 0.0028; lastX = e.clientX; lastY = e.clientY; viewY += velY; viewX += velX; viewX = Math.max(-0.75, Math.min(0.75, viewX)); return; } if (isCoarsePointer) return; const idx = hitTest(e.clientX, e.clientY); if (idx !== hovered) { hovered = idx; canvasFront.style.cursor = idx >= 0 ? "pointer" : "grab"; } if (idx >= 0) { const rect = wrap.getBoundingClientRect(); tooltip.hidden = false; tooltip.textContent = moons[idx].faq.question; tooltip.style.left = `${e.clientX - rect.left}px`; tooltip.style.top = `${e.clientY - rect.top}px`; } else { tooltip.hidden = true; } } function onPointerUp(e) { if (activePointerId === null || e.pointerId !== activePointerId) return; endPointer(e.clientX, e.clientY, true); } function onPointerCancel(e) { if (activePointerId === null || e.pointerId !== activePointerId) return; endPointer(e.clientX, e.clientY, false); } function onCanvasClick(e) { if (fx.active) return; const idx = hitTest(e.clientX, e.clientY); if (idx >= 0) openModal(moons[idx].faq, idx); } function onCanvasPointerDown(e) { if (e.button !== 0 || fx.active) return; dragPending = true; pointerActive = false; dragging = false; pointerDidDrag = false; tapCancelled = false; activePointerId = e.pointerId; downX = e.clientX; downY = e.clientY; lastX = e.clientX; lastY = e.clientY; tapMoonIdx = hitTest(e.clientX, e.clientY); pendingTapFaq = tapMoonIdx >= 0 ? moons[tapMoonIdx].faq : null; pendingTapMoonIdx = tapMoonIdx; tooltip.hidden = true; } if (useCanvasClickOnly) { canvasFront.addEventListener("click", onCanvasClick); } else { canvasFront.addEventListener("pointerdown", onCanvasPointerDown); canvasFront.addEventListener("pointerup", onPointerUp); canvasFront.addEventListener("pointercancel", onPointerCancel); canvasFront.addEventListener("pointermove", onPointerMove); window.addEventListener("pointerup", onPointerUp); window.addEventListener("pointercancel", onPointerCancel); canvasFront.addEventListener("pointerleave", (e) => { if ((pointerActive || dragPending) && e.buttons === 0) { endPointer(lastX, lastY, true); return; } if (!pointerActive && !dragging) { hovered = -1; tooltip.hidden = true; canvasFront.style.cursor = "grab"; } }); } window.addEventListener("blur", () => { if (!useCanvasClickOnly && (pointerActive || dragPending || activePointerId !== null)) { endPointer(lastX, lastY, false); } }); window.addEventListener("resize", resize); resize(); requestAnimationFrame(draw); bindButtonAction(document.getElementById("btn-center-globe"), centerGlobe); bindButtonAction(document.getElementById("btn-browse-faqs"), scrollToFaqList); /* Match Vysto Classic View iframe auto-height on production */ if (embedded) { window.addEventListener("load", postEmbedHeightNow); window.addEventListener("resize", () => scheduleEmbedHeight(400)); const faqList = document.getElementById("faq-list"); if (faqList && window.ResizeObserver) { new ResizeObserver(() => scheduleEmbedHeight(300)).observe(faqList); } postEmbedHeightNow(); } })();