// ============================================================
// BVS — Depth FX: scroll parallax + pointer 3D tilt + hero mouse-parallax
// Idempotent global initializer; safe to call on every route change.
// Respects prefers-reduced-motion.
// ============================================================
(function () {
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // ---- scroll parallax: elements with [data-parallax="<factor>"] drift on scroll ----
  let parallaxEls = [];
  let ticking = false;
  function collectParallax() {
    parallaxEls = Array.from(document.querySelectorAll('[data-parallax]'));
    // auto-tag depth glow layers once
    document.querySelectorAll('.depth-aurora:not([data-parallax])').forEach((el) => { el.setAttribute('data-parallax', '0.12'); });
    document.querySelectorAll('.depth-orb:not([data-parallax])').forEach((el, i) => { el.setAttribute('data-parallax', (0.18 + i * 0.06).toFixed(2)); });
    parallaxEls = Array.from(document.querySelectorAll('[data-parallax]'));
  }
  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const vh = window.innerHeight || 800;
      for (const el of parallaxEls) {
        const f = parseFloat(el.getAttribute('data-parallax')) || 0;
        const r = el.getBoundingClientRect();
        const mid = r.top + r.height / 2;
        const delta = (mid - vh / 2) * -f;        // move opposite to scroll
        el.style.setProperty('--py', delta.toFixed(1) + 'px');
      }
      ticking = false;
    });
  }

  // ---- pointer 3D tilt on cards ----
  const TILT_SEL = '.card, .agent-card, .svc6-cell, .loc-chip, [data-tilt]';
  function attachTilt(el) {
    if (el.__tilt) return; el.__tilt = true;
    el.style.transformStyle = 'preserve-3d';
    el.style.willChange = 'transform';
    const enter = () => { el.style.transition = 'transform .12s var(--ease), box-shadow .25s var(--ease)'; };
    const move = (e) => {
      const r = el.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5;
      const py = (e.clientY - r.top) / r.height - 0.5;
      const max = 5.5;
      el.style.transform = `perspective(900px) rotateX(${(-py * max).toFixed(2)}deg) rotateY(${(px * max).toFixed(2)}deg) translateY(-3px)`;
    };
    const leave = () => { el.style.transition = 'transform .4s var(--ease), box-shadow .25s var(--ease)'; el.style.transform = ''; };
    el.addEventListener('pointerenter', enter);
    el.addEventListener('pointermove', move);
    el.addEventListener('pointerleave', leave);
  }
  function collectTilt() {
    if (window.matchMedia('(hover: none)').matches) return; // skip touch
    document.querySelectorAll(TILT_SEL).forEach(attachTilt);
  }

  // ---- hero console mouse parallax ----
  let heroBound = false;
  function bindHero() {
    const hero = document.querySelector('.depth .floaty');
    if (!hero || hero.__heroPar) return;
    hero.__heroPar = true; heroBound = true;
    const section = hero.closest('section') || document;
    section.addEventListener('pointermove', (e) => {
      const r = section.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5;
      const py = (e.clientY - r.top) / r.height - 0.5;
      hero.style.setProperty('--hx', (px * 16).toFixed(1) + 'px');
      hero.style.setProperty('--hy', (py * 12).toFixed(1) + 'px');
    });
    section.addEventListener('pointerleave', () => {
      hero.style.setProperty('--hx', '0px'); hero.style.setProperty('--hy', '0px');
    });
  }

  function init() {
    collectParallax();
    if (!reduce) {
      collectTilt();
      bindHero();
      onScroll();
    }
  }
  // re-run shortly after each route mount (DOM swaps in)
  window.initDepthFX = function () { setTimeout(init, 60); setTimeout(init, 400); };
  if (!reduce) window.addEventListener('scroll', onScroll, { passive: true });
  // first run
  if (document.readyState !== 'loading') window.initDepthFX();
  else document.addEventListener('DOMContentLoaded', window.initDepthFX);
})();