main.js

/**
 * 字节引力首页交互脚本
 */

// 生成星星
function createStars() {
  const container = document.getElementById("stars");
  const starCount = 100;

  for (let i = 0; i < starCount; i++) {
    const star = document.createElement("div");
    star.className = "star";
    star.style.left = Math.random() * 100 + "%";
    star.style.top = Math.random() * 100 + "%";
    star.style.width = Math.random() * 3 + 1 + "px";
    star.style.height = star.style.width;
    star.style.animationDelay = Math.random() * 3 + "s";
    star.style.animationDuration = Math.random() * 2 + 2 + "s";
    container.appendChild(star);
  }
}


// 标题解码动画 - 随机字符闪变后逐字锁定为最终文案
function scrambleLogoText() {
  const el = document.querySelector(".logo-text");
  if (!el) return;

  const lines = el.querySelectorAll(".logo-line");
  const chars =
    "字节引力天津科技有限公司＊广告联盟网络０１＜＞＃＊＋＝／＼｜ＡＢＣＤＥＦＧＨＫＭＮＲＳＴＷＸＹＺ";
  const frameInterval = 40; // 每帧毫秒数
  const lockStagger = 233; // 相邻字符锁定时刻间隔（毫秒），总时长约 1.6s

  if (lines.length > 0) {
    // 存在 .logo-line 分行元素时，针对每个 span 分别计算并更新，保留 HTML 结构
    const lineData = [];
    let globalIndex = 0;

    lines.forEach((lineEl) => {
      const target = lineEl.textContent;
      const frames = [];
      for (let i = 0; i < target.length; i++) {
        const lockAt = target[i].match(/[，。、！？,.!?]/) ? 0 : globalIndex * lockStagger;
        frames.push({ char: target[i], lockAt });
        globalIndex++;
      }
      lineData.push({ el: lineEl, target, frames });
    });

    const start = performance.now();
    const timer = setInterval(() => {
      const elapsed = performance.now() - start;
      let allDone = true;

      for (const line of lineData) {
        let lineDone = true;
        let output = "";

        for (const f of line.frames) {
          if (elapsed >= f.lockAt) {
            output += f.char;
          } else {
            lineDone = false;
            output += chars[Math.floor(Math.random() * chars.length)];
          }
        }

        line.el.textContent = output;
        if (!lineDone) {
          allDone = false;
        }
      }

      if (allDone) {
        clearInterval(timer);
        lineData.forEach((line) => {
          line.el.textContent = line.target;
        });
      }
    }, frameInterval);
  } else {
    // 降级处理：无 .logo-line 结构时直接处理整个 el
    const target = el.textContent;
    const frames = [];
    for (let i = 0; i < target.length; i++) {
      const lockAt = target[i].match(/[，。、！？,.!?]/) ? 0 : i * lockStagger;
      frames.push({ char: target[i], lockAt });
    }

    const start = performance.now();
    const timer = setInterval(() => {
      const elapsed = performance.now() - start;
      let done = true;
      let output = "";

      for (const f of frames) {
        if (elapsed >= f.lockAt) {
          output += f.char;
        } else {
          done = false;
          output += chars[Math.floor(Math.random() * chars.length)];
        }
      }

      el.textContent = output;

      if (done) {
        clearInterval(timer);
        el.textContent = target;
      }
    }, frameInterval);
  }
}

// 滚动动画 - IntersectionObserver
function initScrollAnimations() {
  const observerOptions = {
    threshold: 0.1,
    rootMargin: "0px 0px -50px 0px",
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");

        // 如果是统计区域，触发数字动画
        if (entry.target.classList.contains("stats-section")) {
          animateNumbers();
        }
      }
    });
  }, observerOptions);

  // 观察所有需要动画的元素
  document
    .querySelectorAll(".fade-in, .fade-in-left, .fade-in-right")
    .forEach((el) => {
      observer.observe(el);
    });
}

// 数字计数动画
function animateNumbers() {
  const numbers = document.querySelectorAll(".stat-number[data-target]");

  numbers.forEach((num) => {
    if (num.dataset.animated) return;
    num.dataset.animated = "true";

    const target = parseInt(num.dataset.target);
    const suffix = num.dataset.suffix || "";
    const duration = 2000;
    const step = target / (duration / 16);
    let current = 0;

    const updateNumber = () => {
      current += step;
      if (current < target) {
        num.textContent = Math.floor(current) + suffix;
        requestAnimationFrame(updateNumber);
      } else {
        num.textContent = target + suffix;
      }
    };

    updateNumber();
  });
}

// 3D卡片倾斜效果
function init3DCards() {
  const cards = document.querySelectorAll(".product-card");

  cards.forEach((card) => {
    card.addEventListener("mousemove", (e) => {
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;

      const rotateX = (y - centerY) / 40;
      const rotateY = (centerX - x) / 40;

      card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
    });

    card.addEventListener("mouseleave", () => {
      card.style.transform =
        "perspective(1000px) rotateX(0) rotateY(0) translateY(0)";
    });
  });
}

// 鼠标光晕效果
function initCursorGlow() {
  const glow = document.getElementById("cursorGlow");
  if (!glow) return;

  let isActive = false;

  document.addEventListener("mousemove", (e) => {
    if (!isActive) {
      isActive = true;
      glow.classList.add("active");
    }

    glow.style.left = e.clientX + "px";
    glow.style.top = e.clientY + "px";
  });

  document.addEventListener("mouseleave", () => {
    isActive = false;
    glow.classList.remove("active");
  });
}

// 视差效果
function initParallax() {
  const gravityField = document.querySelector(".gravity-field");
  if (!gravityField) return;

  document.addEventListener("mousemove", (e) => {
    const x = (e.clientX / window.innerWidth - 0.5) * 20;
    const y = (e.clientY / window.innerHeight - 0.5) * 20;

    gravityField.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`;
  });
}

// 初始化所有效果
document.addEventListener("DOMContentLoaded", () => {
  createStars();
  scrambleLogoText();
  initScrollAnimations();
  init3DCards();
  initCursorGlow();
  initParallax();
});