/* Tunables */
  .hero-kb {
    /* Duration of one slide (includes fade) */
    --kb-slide-duration: 9000ms;
    /* Crossfade length */
    --kb-fade-duration: 1600ms;
    /* Total zoom scale (1 = none, 1.1 = 10% in) */
    --kb-zoom-scale: 1.12;
    /* Optional panning in px (x,y) during the zoom */
    --kb-pan-x: 30px;
    --kb-pan-y: 18px;
    /* How many slides you plan to show (JS sets this automatically too) */
    --kb-count: 4;
  }

  /* Background stage pinned to the hero */
  .hero-kb .kb-stage{
    position:absolute; inset:0;
    z-index:0; /* Behind content */
    overflow:hidden; border-radius:inherit;
    pointer-events:none; /* keep hero content clickable */
  }
  /* Make sure the hero is the stacking context */
  .hero-kb{ position:relative; z-index:1; }

  /* Each slide layer */
  .kb-slide{
    position:absolute; inset:0;
    opacity:0;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    will-change: opacity, transform;
    transform: scale(1) translate3d(0,0,0);
  }

  /* Ken Burns zoom/pan keyframes */
  @keyframes kbZoom {
    0%   { transform: scale(1) translate(var(--start-x, 0), var(--start-y, 0)); }
    100% { transform: scale(var(--kb-zoom-scale)) translate(var(--end-x, 0), var(--end-y, 0)); }
  }

  /* Fade in/out keyframes (crossfade) */
  @keyframes kbFadeIn { from { opacity:0 } to { opacity:1 } }
  @keyframes kbFadeOut{ from { opacity:1 } to { opacity:0 } }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .kb-slide{ animation: none !important; opacity:1 !important; }
  }

(function(){
  // 🔁 Your slide images
  const images = [
      'https://sellers-nc.com/wp-content/uploads/Screenshot-2025-09-03-at-10.38.50-AM.png',
    	'https://sellers-nc.com/wp-content/uploads/RTD_16Pelican_low-2-1.jpg',
    	'https://sellers-nc.com/wp-content/uploads/1L7A3141-1.jpg',
      'https://sellers-nc.com/wp-content/uploads/1L7A5047-2-1.jpg'
  ];

  function initKenBurns(){
    const wrapper = document.querySelector('.hero-kb');
    if(!wrapper) return;
    if(wrapper.dataset.kbInit === '1') return;
    wrapper.dataset.kbInit = '1';

    // Ensure stage exists
    let stage = wrapper.querySelector('.kb-stage');
    if(!stage){
      stage = document.createElement('div');
      stage.className = 'kb-stage';
      wrapper.prepend(stage);
    }

    // Read tunables from THIS wrapper
    const css = getComputedStyle(wrapper);
    const SLIDE_MS = parseInt(css.getPropertyValue('--kb-slide-duration')) || 5000;
    const FADE_MS  = parseInt(css.getPropertyValue('--kb-fade-duration')) || 1600;
    const PANX     = parseInt(css.getPropertyValue('--kb-pan-x')) || 30;
    const PANY     = parseInt(css.getPropertyValue('--kb-pan-y')) || 18;

    // Preload images first
    const preload = src => new Promise(res => { const im = new Image(); im.onload = res; im.onerror = res; im.src = src; });

    Promise.all(images.map(preload)).then(() => {
      // Build slide layers
      const slides = images.map((src, i) => {
        const el = document.createElement('div');
        el.className = 'kb-slide';
        el.style.backgroundImage = `url("${src}")`;

        // Alternate pan for subtle variety
        const dir = i % 2 === 0 ? 1 : -1;
        el.style.setProperty('--start-x', `${-dir * (PANX/2)}px`);
        el.style.setProperty('--start-y', `${ dir * (PANY/2)}px`);
        el.style.setProperty('--end-x',   `${ dir * PANX}px`);
        el.style.setProperty('--end-y',   `${-dir * PANY}px`);

        stage.appendChild(el);
        return el;
      });

      // Helper: (re)start a slide's zoom animation
      function startZoom(el){
        el.style.animation = 'none';
        // Force reflow to restart keyframes
        void el.offsetHeight;
        el.style.animation = `kbZoom ${SLIDE_MS + FADE_MS}ms ease-in-out forwards`;
      }

      // Show first slide immediately (no flash)
      slides[0].style.transition = 'none';
      slides[0].classList.add('is-active');
      startZoom(slides[0]);
      // Restore transition after the first frame
      requestAnimationFrame(() => {
        slides[0].style.transition = `opacity ${FADE_MS}ms linear`;
      });

      // Crossfade loop (infinite)
      let index = 0;
      function cycle(){
        const current = slides[index];
        const nextIndex = (index + 1) % slides.length;
        const next = slides[nextIndex];

        // Bring next to top and start its zoom
        stage.appendChild(next);       // ensures proper stacking
        startZoom(next);

        // Crossfade: next in, current out
        next.classList.add('is-active');
        current.classList.remove('is-active');

        index = nextIndex;
        timer = setTimeout(cycle, SLIDE_MS); // loop forever
      }

      let timer = setTimeout(cycle, SLIDE_MS);
    });
  }

  // Init for normal load & Bricks preview rerenders
  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', initKenBurns, { once: true });
  } else {
    initKenBurns();
  }
  document.addEventListener('bricks/frontend/rendered', initKenBurns);
})();