(() => {
  'use strict';
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const header = document.querySelector('.site-header');
  const heroCard = document.querySelector('.hero-card');

  const updateHeader = () => header?.classList.toggle('mx-scrolled', window.scrollY > 18);
  updateHeader();
  addEventListener('scroll', updateHeader, { passive: true });

  if (heroCard && !heroCard.querySelector('.mx-power-stage')) {
    heroCard.insertAdjacentHTML('afterbegin', `
      <div class="mx-power-stage" aria-hidden="true">
        <svg class="mx-schematic" viewBox="0 0 620 430" role="presentation">
          <defs>
            <linearGradient id="mxPulseGradient" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="#0e78b2"/><stop offset=".52" stop-color="#45ccff"/><stop offset="1" stop-color="#0e78b2"/>
            </linearGradient>
            <filter id="mxGlow" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
          </defs>
          <g opacity=".7">
            ${Array.from({length:9},(_,i)=>`<path class="grid-line" d="M70 ${55+i*34} H555"/>`).join('')}
            ${Array.from({length:12},(_,i)=>`<path class="grid-line" d="M${78+i*43} 45 V330"/>`).join('')}
          </g>
          <path class="wire" d="M86 270 H165 V178 H252 V235 H356 V134 H480 V218 H548"/>
          <path class="wire-hot" d="M86 270 H165 V178 H252 V235 H356 V134 H480 V218 H548"/>
          <path class="wire" d="M165 178 V102 H260 M356 235 V295 H447"/>
          <path class="wire-hot" d="M165 178 V102 H260 M356 235 V295 H447"/>
          <g transform="translate(440 75)">
            <path class="tower" d="M40 18 L12 188 M40 18 L68 188 M23 113 H57 M18 146 H62 M12 188 H68 M23 70 H57 M30 45 H50"/>
            <path class="tower" d="M4 83 H76 M-2 98 H82 M17 83 L40 60 L63 83"/>
            <path class="tower-hot" d="M-2 98 H82 M12 188 H68"/>
          </g>
          <g>
            <circle class="node" cx="86" cy="270" r="10"/><circle class="node-core" cx="86" cy="270" r="4"/>
            <circle class="node" cx="165" cy="178" r="10"/><circle class="node-core" cx="165" cy="178" r="4"/>
            <circle class="node" cx="252" cy="235" r="10"/><circle class="node-core" cx="252" cy="235" r="4"/>
            <circle class="node" cx="356" cy="134" r="10"/><circle class="node-core" cx="356" cy="134" r="4"/>
            <circle class="node" cx="480" cy="218" r="10"/><circle class="node-core" cx="480" cy="218" r="4"/>
          </g>
          <text class="label" x="72" y="302">SOURCE</text><text class="label" x="337" y="119">SUBSTATION</text><text class="label" x="455" y="257">DISTRIBUTION</text>
        </svg>
        <div class="mx-voltage-badge"><strong><span class="mx-live-dot"></span>132 kV</strong><span>Infrastructure ready</span></div>
      </div>`);
  }

  if (!reduceMotion && heroCard) {
    heroCard.addEventListener('pointermove', (e) => {
      if (innerWidth < 901) return;
      const r = heroCard.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - .5;
      const y = (e.clientY - r.top) / r.height - .5;
      heroCard.style.transform = `rotateY(${x * 7}deg) rotateX(${-y * 5}deg) translateY(-2px)`;
    });
    heroCard.addEventListener('pointerleave', () => { heroCard.style.transform = ''; });
  }

  const candidates = document.querySelectorAll('main section > .container, body > section:not(.hero) > .container');
  candidates.forEach(el => el.classList.add('mx-reveal'));
  if ('IntersectionObserver' in window && !reduceMotion) {
    const io = new IntersectionObserver(entries => entries.forEach(entry => {
      if (entry.isIntersecting) { entry.target.classList.add('mx-visible'); io.unobserve(entry.target); }
    }), { threshold: .09, rootMargin: '0px 0px -6% 0px' });
    candidates.forEach(el => io.observe(el));
  } else candidates.forEach(el => el.classList.add('mx-visible'));
})();