const socialRoot = document.documentElement; window.addEventListener("pointermove", (event) => { socialRoot.style.setProperty("--sm-x", `${event.clientX}px`); socialRoot.style.setProperty("--sm-y", `${event.clientY}px`); }); const socialReadout = document.querySelector("#socialReadout"); document.querySelectorAll(".social-orbit").forEach((button) => { button.addEventListener("click", () => { document.querySelectorAll(".social-orbit").forEach((item) => item.classList.remove("active")); button.classList.add("active"); socialReadout.textContent = button.dataset.signal; }); }); const rhythmTitle = document.querySelector("#rhythmTitle"); const rhythmText = document.querySelector("#rhythmText"); document.querySelectorAll(".rhythm-step").forEach((step) => { step.addEventListener("click", () => { document.querySelectorAll(".rhythm-step").forEach((item) => item.classList.remove("active")); step.classList.add("active"); rhythmTitle.textContent = step.dataset.step; rhythmText.textContent = step.dataset.copy; }); }); const platformContent = { instagram: { label: "Visual Presence", title: "Instagram", text: "We shape Instagram around visual recognition, reels, carousels, stories, profile flow, campaign moments, and content that makes the brand easier to remember.", points: ["Reels, carousels, stories, and post rhythm", "Profile experience and visual consistency", "Community prompts and response behavior"], }, tiktok: { label: "Cultural Energy", title: "TikTok", text: "We shape TikTok around short-form ideas, hooks, creator-style formats, trend relevance, voice, pace, and content that feels native to the platform.", points: ["Short-form hooks and repeatable formats", "Trend adaptation with brand control", "Fast learning from audience response"], }, linkedin: { label: "Authority And Point Of View", title: "LinkedIn", text: "We shape LinkedIn around leadership voice, industry opinions, company updates, thought-led posts, team presence, and meaningful professional conversation.", points: ["Thought-led content direction", "Company and leadership presence", "Professional community behavior"], }, facebook: { label: "Community Familiarity", title: "Facebook", text: "We shape Facebook around community relevance, updates, social proof, page activity, audience conversations, and content that supports familiarity.", points: ["Community updates and response tone", "Page content rhythm", "Audience conversation prompts"], }, shorts: { label: "Repeatable Video Ideas", title: "YouTube Shorts", text: "We shape YouTube Shorts around repeatable short-form video ideas, clear hooks, topic consistency, simple story arcs, and audience retention cues.", points: ["Short-form video concepts", "Hook and retention structure", "Repeatable topic series"], }, }; const platformLabel = document.querySelector("#platformLabel"); const platformTitle = document.querySelector("#platformTitle"); const platformText = document.querySelector("#platformText"); const platformList = document.querySelector("#platformList"); document.querySelectorAll(".platform-tab").forEach((tab) => { tab.addEventListener("click", () => { document.querySelectorAll(".platform-tab").forEach((item) => item.classList.remove("active")); tab.classList.add("active"); const content = platformContent[tab.dataset.platform]; platformLabel.textContent = content.label; platformTitle.textContent = content.title; platformText.textContent = content.text; platformList.innerHTML = content.points.map((point) => `
  • ${point}
    • `).join(""); }); }); const pillarReadout = document.querySelector("#pillarReadout"); document.querySelectorAll(".pillar-node").forEach((node) => { node.addEventListener("click", () => { document.querySelectorAll(".pillar-node").forEach((item) => item.classList.remove("active")); node.classList.add("active"); pillarReadout.textContent = node.dataset.pillar; }); }); const calendarRange = document.querySelector("#calendarRange"); const calendarStage = document.querySelector("#calendarStage"); const calendarTitle = document.querySelector("#calendarTitle"); const calendarText = document.querySelector("#calendarText"); const calendarContent = { 1: { stage: "Light", title: "Protect quality while rebuilding consistency", text: "A light rhythm is useful when the brand needs structure first. The focus is stronger ideas, cleaner approval, and a manageable posting routine.", }, 2: { stage: "Steady", title: "Build a reliable weekly rhythm", text: "A steady rhythm gives the brand enough presence to stay visible while protecting content quality and review discipline.", }, 3: { stage: "Active", title: "Increase platform presence with more formats", text: "An active rhythm adds more reels, carousels, stories, and community prompts while keeping the content pillars clear.", }, 4: { stage: "Always On", title: "Run social media like a living brand channel", text: "An always-on rhythm supports frequent content, quicker social response, platform moments, and stronger monthly learning.", }, }; if (calendarRange) { calendarRange.addEventListener("input", () => { const content = calendarContent[calendarRange.value]; calendarStage.textContent = content.stage; calendarTitle.textContent = content.title; calendarText.textContent = content.text; }); } const socialRevealItems = document.querySelectorAll( ".social-section-heading, .social-card, .social-glass, .community-card, .report-card, .fit-grid article, .social-phone, .rhythm-step, .platform-tab, .pillar-map, .calendar-board, .creative-visual, .creative-copy, .community-grid" ); const socialRevealObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("is-visible"); socialRevealObserver.unobserve(entry.target); } }); }, { threshold: 0.14 } ); socialRevealItems.forEach((item) => { item.classList.add("social-reveal"); socialRevealObserver.observe(item); }); document.querySelectorAll(".social-card, .community-card, .report-card, .fit-grid article").forEach((card) => { card.addEventListener("pointermove", (event) => { const rect = card.getBoundingClientRect(); const x = ((event.clientX - rect.left) / rect.width - 0.5) * 10; const y = ((event.clientY - rect.top) / rect.height - 0.5) * -10; card.style.setProperty("--tilt-x", `${y}deg`); card.style.setProperty("--tilt-y", `${x}deg`); }); card.addEventListener("pointerleave", () => { card.style.removeProperty("--tilt-x"); card.style.removeProperty("--tilt-y"); }); });