/* --- Collaboration Section Layout Instructions --- */
body#layout #Collaboration-Section {
  background-color: #f9f9f9;
  border: 2px solid #4caf50;
  padding: 10px;
  margin-top: 20px;
}
body#layout #Collaboration-Section::before {
  content: "🤝 COLLABORATION SECTION (Glider + Marquee)";
  display: block;
  background: #4caf50;
  color: #fff;
  padding: 8px 12px;
  font-weight: bold;
  margin-bottom: 15px;
  border-radius: 4px;
}

/* 1. Glider LinkList Instructions */
body#layout #LinkList50::after {
  content: "📌 GLIDER KAISE ADD KAREN:\A 1. Widget Title: Carousel ka Main Title dalein.\A 2. New Site Name: Yahan 'Name' aur 'Image Link' ko ' | ' (Pipe) se alag karke dalein.\A    (Example: Karan | https://link-to-image.jpg)\A 3. New Site URL: Yahan unka Profile ya Channel link dalein.";
  white-space: pre-wrap;
  display: block;
  background: #e3f2fd;
  border: 1px dashed #2196f3;
  color: #0d47a1;
  padding: 12px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* 2. Marquee Text Instructions */
body#layout #Text50::after {
  content: "📢 MARQUEE KAISE ADD KAREN:\A 1. Title: Yahan Marquee ka Title dalein (jaise: Note :-).\A 2. Content: Yahan wo text dalein jo left ki taraf scroll karega.";
  white-space: pre-wrap;
  display: block;
  background: #fff3cd;
  border: 1px dashed #ffc107;
  color: #856404;
  padding: 12px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

<b:section class='collab-section' id='Collaboration-Section' maxwidgets='5' name='Collaboration Section' showaddelement='yes'>
  
  <b:widget id='LinkList50' locked='false' title='AnAlone Krishna and his Friends&apos;/Collabs.👇🏻' type='LinkList' visible='true'>
    <b:includable id='main'>
      <div class='widget-content'>
        <div class="glider-widget">
          
          <div class="glider-header">
            <h2 class="glider-main-title"><data:title/></h2>
            <div class="glider-controls">
              <button class="glider-btn glider-btn-left" aria-label="Previous">&#10094;</button>
              <button class="glider-btn glider-btn-right" aria-label="Next">&#10095;</button>
            </div>
          </div>

          <div class="glider-viewport">
            <div class="glider-track">
              <b:loop values='data:links' var='link'>
                <div class="glider-item">
                  <a class='glider-parse-link' expr:data-raw='data:link.name' expr:href='data:link.target'>
                    </a>
                </div>
              </b:loop>
            </div>
          </div>

        </div>

        <style>
          /* Scoped styles with unique prefix */
          .glider-widget { width: 100%; max-width: 900px; margin: auto; font-family: Arial, sans-serif; }
          .glider-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px; }
          .glider-main-title { margin: 0; font-size: 20px; color: #008000; text-align: left; font-weight: 700; }
          .glider-controls { display: flex; gap: 6px; align-items: center; }
          /* Buttons */
          .glider-btn { background: #ffffff; color: #006400; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; padding: 6px 10px; font-size: 18px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
          .glider-btn:active { transform: translateY(1px); }
          /* Viewport and track */
          .glider-viewport { overflow: hidden; padding: 12px 6px 18px; }
          .glider-track { display: flex; gap: 20px; transition: transform 450ms cubic-bezier(.22,.9,.32,1); will-change: transform; touch-action: pan-y; user-select: none; }
          /* Item */
          .glider-item { flex: 0 0 160px; text-align: center; }
          .glider-item a { color: inherit; text-decoration: none; display: inline-block; width: 100%; }
          /* Enhanced circular thumbnail with 3D depth */
          .glider-item .thumb-wrap { display: inline-block; width: 140px; height: 140px; align: center; border-radius: 50%; position: relative; perspective: 900px; -webkit-perspective: 900px; margin: 0 auto; }
          .glider-item img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; display: block; transition: transform 220ms ease, box-shadow 220ms ease; transform-origin: 50% 50%; box-shadow: 0 18px 28px rgba(2, 30, 22, 0.18), 0 8px 14px rgba(2, 30, 22, 0.12), inset 0 2px 6px rgba(255,255,255,0.08); border: 1.5px solid rgba(0,0,0,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); }
          .glider-item img:hover { transform: translateY(-6px) rotateX(6deg) rotateZ(-2deg) scale(1.03); box-shadow: 0 28px 40px rgba(2, 30, 22, 0.22), 0 12px 20px rgba(2, 30, 22, 0.14), inset 0 3px 8px rgba(255,255,255,0.06); }
          .glider-item .thumb-wrap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; filter: blur(20px); background: radial-gradient(circle at 30% 20%, rgba(0,128,0,0.08), transparent 30%), radial-gradient(circle at 70% 80%, rgba(0,0,0,0.06), transparent 35%); opacity: 0.95; }
          /* Title */
          .glider-title { display: block; margin-top: 8px; font-size: 14px; color: #006400; font-weight: 700; align: center; }
          /* Responsive adjustments */
          @media (max-width: 700px) { .glider-item { flex: 0 0 140px; } .glider-item .thumb-wrap { width: 120px; height: 120px; } .glider-main-title { font-size: 18px; } }
          .glider-btn:focus { outline: 2px solid rgba(0,128,0,0.2); outline-offset: 2px; }
        </style>

        <script>
        //<![CDATA[
        (function () {
          // Parse Name and ImageURL from LinkList Name data
          document.querySelectorAll('.glider-parse-link').forEach(function(link) {
            var rawData = link.getAttribute('data-raw');
            if(rawData) {
              var parts = rawData.split('|');
              var name = parts[0] ? parts[0].trim() : 'Name';
              var imgUrl = parts[1] ? parts[1].trim() : 'https://via.placeholder.com/140';
              // Injecting the missing thumb-wrap div for proper 3D styling
              link.innerHTML = '<div class="thumb-wrap"><img src="' + imgUrl + '" alt="' + name + '" /></div><span class="glider-title">' + name + '</span>';
            }
          });

          // Carousel Logic
          const track = document.querySelector('.glider-track');
          const btnPrev = document.querySelector('.glider-btn-left');
          const btnNext = document.querySelector('.glider-btn-right');
          const viewport = document.querySelector('.glider-viewport');
          const items = () => Array.from(track.children);
          let index = 0;
          let currentTranslate = 0;
          let itemWidth = 0;
          let gap = 20; 
          let dragging = false;
          let startX = 0, lastX = 0, velocity = 0, rafId = null;

          function recalc() {
            if (!items().length) return;
            const first = items()[0];
            itemWidth = first.getBoundingClientRect().width + gap;
            clampIndex();
            snapToIndex(index, 0);
          }

          function clampIndex() {
            const visible = Math.floor(viewport.getBoundingClientRect().width / itemWidth) || 1;
            const maxIndex = Math.max(0, items().length - visible);
            index = Math.max(0, Math.min(index, maxIndex));
          }

          function snapToIndex(i, duration = 450) {
            currentTranslate = -i * itemWidth;
            track.style.transition = `transform ${duration}ms cubic-bezier(.22,.9,.32,1)`;
            track.style.transform = `translateX(${currentTranslate}px)`;
          }

          function moveBy(deltaPx) {
            track.style.transition = 'none';
            currentTranslate += deltaPx;
            const maxTranslate = 0;
            const visible = Math.floor(viewport.getBoundingClientRect().width / itemWidth) || 1;
            const maxNegative = -Math.max(0, items().length - visible) * itemWidth;
            if (currentTranslate > maxTranslate + 40) currentTranslate = maxTranslate + 40; 
            if (currentTranslate < maxNegative - 40) currentTranslate = maxNegative - 40;
            track.style.transform = `translateX(${currentTranslate}px)`;
          }

          function finalizeDrag() {
            const rawIndex = -currentTranslate / itemWidth;
            index = Math.round(rawIndex);
            clampIndex();
            snapToIndex(index);
          }

          btnPrev.addEventListener('click', () => { index = Math.max(0, index - 1); snapToIndex(index); });
          btnNext.addEventListener('click', () => { const visible = Math.floor(viewport.getBoundingClientRect().width / itemWidth) || 1; const maxIndex = Math.max(0, items().length - visible); index = Math.min(maxIndex, index + 1); snapToIndex(index); });

          let resizeObserver = new ResizeObserver(recalc);
          resizeObserver.observe(viewport);
          window.addEventListener('load', recalc);
          window.addEventListener('orientationchange', recalc);

          function onPointerDown(clientX) { dragging = true; startX = clientX; lastX = clientX; velocity = 0; track.style.transition = 'none'; if (rafId) cancelAnimationFrame(rafId); }
          function onPointerMove(clientX) { if (!dragging) return; const dx = clientX - lastX; moveBy(dx); lastX = clientX; velocity = (velocity * 0.8) + (dx * 0.2); }
          function onPointerUp() { if (!dragging) return; dragging = false; if (Math.abs(velocity) > 8) { const flingItems = Math.sign(velocity) * Math.min(3, Math.round(Math.abs(velocity) / 30)); index = Math.max(0, Math.min(items().length - 1, index - flingItems)); } finalizeDrag(); velocity = 0; }

          track.addEventListener('mousedown', (e) => { e.preventDefault(); onPointerDown(e.clientX); });
          window.addEventListener('mousemove', (e) => onPointerMove(e.clientX));
          window.addEventListener('mouseup', onPointerUp);
          track.addEventListener('touchstart', (e) => onPointerDown(e.touches[0].clientX), {passive: true});
          track.addEventListener('touchmove', (e) => { if (!dragging) return; onPointerMove(e.touches[0].clientX); }, {passive: true});
          track.addEventListener('touchend', onPointerUp);

          let clickPrevent = false;
          track.addEventListener('click', (e) => { if (clickPrevent) { e.stopImmediatePropagation(); e.preventDefault(); } clickPrevent = false; });
          track.addEventListener('mousemove', (e) => { if (Math.abs(e.movementX) > 8) clickPrevent = true; });

          recalc();
        })();
        //]]>
        </script>
      </div>
    </b:includable>
  </b:widget>


  <b:widget id='Text50' locked='false' title='Note :-' type='Text' visible='true'>
    <b:includable id='main'>
      <div class='widget-content'>
        
        <div class="anl-marquee" aria-live="polite" role="region">
          <div class="anl-marquee__fixed"><strong><data:title/></strong></div>
          <div class="anl-marquee__viewport">
            <div class="anl-marquee__track" aria-hidden="true">
              <span class="anl-marquee__text"><data:content/></span>
              <span class="anl-marquee__text"><data:content/></span>
            </div>
          </div>
        </div>
        
        <div style="margin-bottom: 10px; text-align: center;">
          <a href="https://krishnakunal.blogspot.com/p/read-them-also.html"> Get updates from the different/other blogs/sites.</a>
        </div>
        <div><br/></div>

        <style>
          .anl-marquee { display: flex; align-items: center; width: 100%; font-family: inherit; margin-bottom: 20px; font-size: 14px; line-height: 1.2; overflow: visible; color: brown; }
          .anl-marquee__fixed { flex: 0 0 auto; margin-right: 12px; white-space: nowrap; }
          .anl-marquee__viewport { flex: 1 1 auto; overflow: hidden; position: relative; }
          .anl-marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: anl-marquee-scroll 18s linear infinite; }
          .anl-marquee__text { display: inline-block; padding-right: 60px; }
          @keyframes anl-marquee-scroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
          @media (prefers-reduced-motion: reduce) { .anl-marquee__track { animation: none; transform: translateX(0); } }
        </style>
        </div>
    </b:includable>
  </b:widget>

</b:section>