document.addEventListener("DOMContentLoaded", function () {
  const path = window.location.pathname.replace(/\/+$/, "");
  if (path !== "" && path !== "/index.html") return;

  const target = document.getElementById("best-offers-8-slider");
  if (!target) return;

  // إنشاء سكشن المدونة
  const blogSection = document.createElement("section");
  blogSection.className = "nat-blog-section";
  blogSection.innerHTML = `
    <div class="nat-blog-bg"></div>
    <div class="nat-blog-container">
      <h2 class="nat-blog-title">المدونة</h2>
      <div class="nat-blog-grid">

        <a href="https://nat-sa.store/%D8%A7%D9%84%D8%B3%D9%85%D8%A7%D8%B9%D8%A7%D8%AA/c1158523187"  class="nat-blog-card">
          <img src="https://i.postimg.cc/Njmcz6T7/headphones-1868612-1280.jpg" alt="السماعات الحديثة">
          <div class="nat-blog-content">
            <h3>السماعات الحديثة</h3>
            <p>تُعد السماعات من أكثر الإكسسوارات طلبًا، فهي تمنحك تجربة استماع مريحة وجودة صوت عالية أينما كنت.</p>
            <div class="nat-blog-footer">
              <span>مقال من مدونة نات</span>
              <span>Nat Store</span>
            </div>
          </div>
        </a>

        <a href="https://nat-sa.store/%D8%A7%D9%84%D8%B3%D8%A7%D8%B9%D8%A7%D8%AA/c1333611568"  class="nat-blog-card">
          <img src="https://i.postimg.cc/x1M24vH3/best-rolex-watches-8356385-1280.jpg" alt="الساعات الذكية">
          <div class="nat-blog-content">
            <h3>الساعات الذكية</h3>
            <p>الساعات الذكية أصبحت أكثر من مجرد وسيلة لمعرفة الوقت، فهي شريكك اليومي لمتابعة صحتك وأناقتك.</p>
            <div class="nat-blog-footer">
              <span>مقال من مدونة نات</span>
              <span>Nat Store</span>
            </div>
          </div>
        </a>

        <a href="https://nat-sa.store/%D9%85%D8%B3%D8%AA%D9%84%D8%B2%D9%85%D8%A7%D8%AA-%D8%A7%D9%84%D8%AC%D9%88%D8%A7%D9%84/c425356081"  class="nat-blog-card">
          <img src="https://i.postimg.cc/tgR9n1Zp/2301-q899-006-P-m004-c20-headphones-earphones-realistic-set.jpg" alt="مستلزمات الجوال">
          <div class="nat-blog-content">
            <h3>أناقة الجوال تبدأ من الإكسسوارات</h3>
            <p>من الأغلفة العصرية إلى الإضاءة المتنقلة، مستلزمات الجوال تعكس ذوقك وتمنح جهازك مظهرًا فريدًا.</p>
            <div class="nat-blog-footer">
              <span>مقال من مدونة نات</span>
              <span>Nat Store</span>
            </div>
          </div>
        </a>

      </div>
    </div>
  `;

  target.insertAdjacentElement("afterend", blogSection);

  // إضافة التنسيقات
  const style = document.createElement("style");
  style.innerHTML = `
    .nat-blog-section {
      position: relative;
      background: linear-gradient(160deg, #000, #0a0a0a, #111);
      padding: 80px 0;
      overflow: hidden;
      direction: rtl;
      color: #fff;
    }

    /* خلفية الدوائر */
    .nat-blog-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      background: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: moveDots 20s linear infinite;
    }

    .nat-blog-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
      background-size: 70px 70px;
      animation: moveDots2 30s linear infinite;
      opacity: 0.7;
      filter: blur(0.5px);
    }

    @keyframes moveDots {
      0% { transform: translate(0, 0); }
      50% { transform: translate(30px, 30px); }
      100% { transform: translate(0, 0); }
    }

    @keyframes moveDots2 {
      0% { transform: translate(0, 0); }
      50% { transform: translate(-40px, -40px); }
      100% { transform: translate(0, 0); }
    }

    .nat-blog-container {
      position: relative;
      z-index: 2;
      width: 90%;
      max-width: 1200px;
      margin: auto;
    }

    .nat-blog-title {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      text-align: right;
      margin-bottom: 40px;
    }

    .nat-blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 25px;
    }

    .nat-blog-card {
      display: block;
      text-decoration: none;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(0,0,0,0.7);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      color: #fff;
    }

    .nat-blog-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 6px 18px rgba(255,255,255,0.15);
    }

    .nat-blog-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      filter: brightness(0.9);
    }

    .nat-blog-content {
      padding: 20px;
    }

    .nat-blog-content h3 {
      font-size: 20px;
      color: #fff;
      margin-bottom: 10px;
    }

    .nat-blog-content p {
      font-size: 15px;
      color: #eee;
      line-height: 1.7;
      margin-bottom: 15px;
    }

    .nat-blog-footer {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #fff;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: 10px;
    }

    @media (max-width: 768px) {
      .nat-blog-grid {
        grid-template-columns: 1fr;
      }
    }
  `;
  document.head.appendChild(style);
});





//section

document.addEventListener('DOMContentLoaded', function () {
  const path = window.location.pathname.replace(/\/+$/, '');
  if (path !== '' && path !== '/index.html') return;

  // سكشن (OUR PRODUCTS)
  const photosSlider = document.querySelector('.s-block.s-block--photos-slider');
  if (photosSlider) addAnimatedHeading(photosSlider, 'afterend', 'SHOP SECTIONS', 'ef-our-products-heading', 'blink');
});

function addAnimatedHeading(target, position, text, className, animName) {
  const heading = document.createElement('h2');
  heading.className = className;

  document.head.insertAdjacentHTML('beforeend', `
    <style>
      .${className} {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        font-size: clamp(32px, 6vw, 64px);
        font-weight: 700;
        color: #ffffff;
        text-align: center;
        margin: 40px 0;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-shadow: 0 2px 6px rgba(0,0,0,0.45);
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid #fff;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        animation: ${animName} 0.8s step-end infinite alternate;
        transition: width 0.3s ease;
      }

      @keyframes ${animName} {
        50% { border-color: transparent; }
      }

      @media (max-width: 480px) {
        .${className} {
          font-size: clamp(22px, 8vw, 36px);
          margin: 20px 0;
        }
      }
    </style>
  `);

  target.insertAdjacentElement(position, heading);

  let i = 0;
  let isDeleting = false;
  let widthLocked = false;

  function typeLoop() {
    const current = text.substring(0, i);
    heading.textContent = current;

    if (!widthLocked && i === text.length) {
      heading.style.width = heading.offsetWidth + 'px';
      widthLocked = true;
    }

    if (!isDeleting && i < text.length) {
      i++;
      setTimeout(typeLoop, 150);
    } else if (isDeleting && i > 1) {
      i--;
      setTimeout(typeLoop, 100);
    } else {
      if (!isDeleting) {
        isDeleting = true;
        setTimeout(typeLoop, 1500);
      } else {
        isDeleting = false;
        setTimeout(typeLoop, 800);
      }
    }
  }

  typeLoop();
}








//faq stylish section
//faq stylish section
document.addEventListener("DOMContentLoaded", function () {
  // تحقق أننا في الهوم فقط
  if (window.location.pathname !== "/" && window.location.pathname !== "/index.html") {
    return;
  }

  const section = document.createElement("section");
  section.style.padding = "60px 20px";
  section.style.color = "var(--main-color)";

  const container = document.createElement("div");
  container.style.display = "grid";
  container.style.gridTemplateColumns = "1fr 1fr";
  container.style.gap = "20px";
  container.style.maxWidth = "1400px";
  container.style.margin = "0 auto";
  container.style.alignItems = "stretch";

  // ====== عمود الفيديو ======
  const videoWrapper = document.createElement("div");
  videoWrapper.style.position = "relative";
  videoWrapper.style.overflow = "hidden";
  videoWrapper.style.borderRadius = "12px";
  videoWrapper.style.margin = "0 10px"; // مساحة يمين ويسار

  const video = document.createElement("video");
  video.src = "https://files.catbox.moe/okaukg.mp4"; // ضع رابط الفيديو هنا
  video.autoplay = true;
  video.loop = true;
  video.muted = true; // يبدأ مكتوم لتجنب مشاكل autoplay
  video.playsInline = true;
  video.preload = "metadata";
  video.style.width = "100%";
  video.style.height = "auto";
  video.style.display = "block";
  video.style.objectFit = "cover";


  videoWrapper.appendChild(video);

  // ====== عمود الكروت (FAQ) ======
  const faqWrapper = document.createElement("div");
  faqWrapper.style.display = "grid";
  faqWrapper.style.gridTemplateRows = "auto";
  faqWrapper.style.gap = "15px";

  const faqData = [
    {
      question: "ما هي خيارات الدفع المتوفرة؟",
      answer: "يمكنك الدفع باستخدام مدى، البطاقات الائتمانية، Apple Pay ، Stc Pay."
    },
    {
      question: "كم يستغرق توصيل الطلب؟",
      answer: "عادةً ما يتم توصيل الطلبات خلال 9 - 12 يوم عمل."
    },
    {
      question: "هل يمكنني استرجاع المنتجات؟",
      answer: "نعم، يمكنك استرجاع المنتجات خلال 7 أيام من استلامها وفقًا لسياسة الإرجاع."
    },
  ];

  faqData.forEach(({ question, answer }) => {
    const card = document.createElement("div");
    card.style.background = "#fff";
    card.style.color = "var(--main-color)";
    card.style.padding = "25px";
    card.style.borderRadius = "12px";
    card.style.boxShadow = "0 6px 15px rgba(0,0,0,0.08)";
    card.style.border = "1px solid var(--main-color)";
    card.style.transition = "all 0.3s ease";

    const q = document.createElement("h3");
    q.textContent = question;
    q.style.fontSize = "20px";
    q.style.fontWeight = "bold";
    q.style.marginBottom = "10px";
    q.style.color = "var(--main-color)";

    const a = document.createElement("p");
    a.textContent = answer;
    a.style.fontSize = "16px";
    a.style.lineHeight = "1.6";
    a.style.margin = "0";
    a.style.color = "var(--main-color)";

    card.addEventListener("mouseenter", () => {
      card.style.transform = "translateY(-8px)";
      card.style.background = "var(--main-color)";
      card.style.color = "#fff";
      card.style.border = "1px solid transparent";
      q.style.color = "#fff";
      a.style.color = "#fff";
    });
    card.addEventListener("mouseleave", () => {
      card.style.transform = "translateY(0)";
      card.style.background = "#fff";
      card.style.color = "var(--main-color)";
      card.style.border = "1px solid var(--main-color)";
      q.style.color = "var(--main-color)";
      a.style.color = "var(--main-color)";
    });

    card.appendChild(q);
    card.appendChild(a);
    faqWrapper.appendChild(card);
  });

  container.appendChild(videoWrapper);
  container.appendChild(faqWrapper);
  section.appendChild(container);

  const testimonialsSection = document.querySelector(".s-block--testimonials");
  if (testimonialsSection) {
    testimonialsSection.parentNode.insertBefore(section, testimonialsSection);
  } else {
    document.body.appendChild(section);
  }

  // ===== Intersection Observer لتوفير الأداء =====
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        if (video.paused) video.play().catch(e => console.log("Video autoplay blocked:", e));
      } else {
        video.pause();
      }
    });
  }, { threshold: 0.5 });

  observer.observe(video);

  // ===== Responsive ======
  const style = document.createElement("style");
  style.textContent = `
    @media (max-width: 992px) {
      section > div {
        grid-template-columns: 1fr !important;
      }
      section video {
        width: 100% !important;
  
        display: block;
      }
    }
  `;
  document.head.appendChild(style);
});












/* Add custom Js styles below */ 


// إضافة مكتبة Font Awesome تلقائياً للهيدر
const fa = document.createElement("link");
fa.rel = "stylesheet";
fa.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";
fa.crossOrigin = "anonymous";
fa.referrerPolicy = "no-referrer";
document.head.appendChild(fa);
//end icons









document.addEventListener("DOMContentLoaded", function () {
  // 1. إضافة أيقونة السلة بجانب السعر
  const priceElement = document.querySelector('.s-product-card-price');
  const iconElement  = document.querySelector('.s-button-btn');
  if (priceElement && iconElement) {
    priceElement.parentNode.insertBefore(iconElement, priceElement.nextSibling);
  }

  // 2. ستايل عام + ظهور سلس للكرتات
  const styleTag = document.createElement("style");
  styleTag.innerHTML = `
    .enhanced-card {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.6s ease;
    }
    .enhanced-card.visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  `;
  document.head.appendChild(styleTag);

  // 3. دالة لفحص ظهور الكرتات في الشاشة
  function checkVisibility() {
    document.querySelectorAll(".s-product-card-entry").forEach(product => {
      const rect = product.getBoundingClientRect();
      if (rect.top < window.innerHeight * 0.9 && rect.bottom >= 0) {
        product.classList.add("visible");
      } else {
        product.classList.remove("visible");
      }
    });
  }

  // 4. إنشاء النجوم والشارات لكل كرت منتج
  function enhanceCards() {
    document.querySelectorAll('.s-product-card-entry').forEach(card => {
      // منع الازدواجية
      if (card.querySelector('.stars')) return;

      // نجوم التقييم
      const stars = document.createElement('div');
      stars.className = 'stars';
      const rating = Math.floor(Math.random() * 2) + 4; 
      stars.style.setProperty('--rating', `${(rating / 5) * 100}%`);
      card.querySelector('.s-product-card-content-main')?.appendChild(stars);

      // شارة عشوائية
      const badge = document.createElement('div');
      badge.className = 'product-badge';
      const badges = [
        { text: 'جديد ', bg: '#000000' },
        { text: 'حصري ', bg: '#000000' },
        { text: 'اشترِ الآن ', bg: '#000000' },
        { text: 'حديثًا ', bg: '#000000' }
      ];
      const selected = badges[Math.floor(Math.random() * badges.length)];
      badge.textContent = selected.text;
      badge.style.cssText = `
        position: absolute;
        top: 10px; right: 10px;
        background-color: ${selected.bg};
        color: white;
        padding: 4px 8px;
        border-radius: 0.3rem;
        font-size: 0.7rem;
        font-weight: bold;
        z-index: 10;
      `;
      card.style.position = 'relative';
      card.classList.add('enhanced-card');
      card.appendChild(badge);
    });
  }

  // 5. تكرار المحاولة وتفعيل الفحص والتعزيز
  let tries = 0;
  const interval = setInterval(() => {
    enhanceCards();
    checkVisibility();
    if (++tries > 10) clearInterval(interval);
  }, 500);

  window.addEventListener("scroll", checkVisibility);
});
// =========== 👆 BACK TO TOP BUTTON =========
const backToTopButton = document.createElement("div");
  backToTopButton.id = "backToTop";
  backToTopButton.innerHTML = `
 <div class="icon">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
     <path d="M12 4l-8 8h6v8h4v-8h6z" />
   </svg>
 </div>
 <svg class="circular-chart" viewBox="0 0 36 36">
   <path class="circle-bg" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
   <path class="circle" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
 </svg>`;
  document.body.appendChild(backToTopButton);

  const style = `
 #backToTop {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 60px;
   height: 60px;
   display: none;
   z-index: 1000;
 }
 #backToTop .icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   color: var(--second-color);
 }
 .circular-chart {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
 }
 .circle-bg {
   fill: none;
   stroke: transparent;
   stroke-width: 3.8;
 }
 .circle {
   fill: none;
   stroke: var(--second-color);
   stroke-width: 3.8;
   stroke-dasharray: 100, 100;
   stroke-linecap: round;
   transition: stroke-dasharray 0.1s linear;
 }
 #backToTop:hover .icon {
   color: var(--main-color);
 }
`;

  const styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.textContent = style;
  document.head.appendChild(styleSheet);

  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;

    if (scrollPercent > 1) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }

    const circle = document.querySelector(".circle");
    const offset = 100 - scrollPercent;
    circle.style.strokeDasharray = `${scrollPercent}, 100`;
  });

  backToTopButton.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });

// Additional code block

// ======== ⚠️ EMPTY LINKS PREVENT DEFAULT==========
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();
  });
});
// Select the salla-product-options element

// ============= 📢 PRODUCT OPTION ALERT ===========
const sallaProductOptions = document.querySelector('salla-product-options');

// Ensure the element exists before proceeding
if (sallaProductOptions) {
  // Create the alert message
  const alertMessage = document.createElement('p');
  alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";

  // Apply styles directly to the element
  alertMessage.style.backgroundColor = '#ffdddd';
  alertMessage.style.color = '#a94442';
  alertMessage.style.padding = '15px';
  alertMessage.style.border = '1px solid #a94442';
  alertMessage.style.borderRadius = '5px';
  alertMessage.style.marginBottom = '10px';
  alertMessage.style.fontWeight = 'bold';
  alertMessage.style.textAlign = 'center';

  // Insert the alert message at the beginning of the salla-product-options element
  sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);
} else {
  console.error("The 'salla-product-options' element was not found on the page.");
}
// Apply styles directly to the element
// Insert the banner swap (now called banSwiper)
const banSwiperHTML = `
<div class="banner-swap">
   <div class="bannt">
       <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
       <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
       <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
       <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
       <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
       <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>

       <!-- Repeat the same items for continuous scroll -->
       <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
       <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
       <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
       <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
       <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
       <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>
   </div>
</div>
`;

// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML('afterbegin', banSwiperHTML);
// Create the loader div element


// ==================== 🖼️ SCROLL EFFECT FOR BANNERS ====================
function handleScroll() {
  const elements = document.querySelectorAll('.banner--fixed img');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    // إذا العنصر ظهر في نافذة المتصفح
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
      // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

window.addEventListener('scroll', handleScroll);
handleScroll(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة



// ==================== 🖼️ SCROLL EFFECT FOR PHOTOS SLIDER ====================
function handleScroll2() {
  const elements = document.querySelectorAll('salla-slider.photos-slider');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    // إذا العنصر ظهر في نافذة المتصفح (مرة واحدة فقط)
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      if (!element.classList.contains('visible')) {
        element.classList.add('visible'); // إضافة الكلاس ليحصل التأثير
      }
    }
  });
}

window.addEventListener('scroll', handleScroll2);
handleScroll2(); // لتنفيذ التأثير عند تحميل الصفحة



// ======== 🖼️ SCROLL EFFECT FOR BACKGROUND =========
function handleScroll3() {
  const elements = document.querySelectorAll('.lazy__bg');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    // إذا العنصر ظهر في نافذة المتصفح
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
      // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

window.addEventListener('scroll', handleScroll3);
handleScroll3(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة


// ======== 🛍️ BLUR EFFECT ON PRODUCT CARDS ==========
function handleScrollBlur() {
  const elements = document.querySelectorAll('.s-product-card-vertical');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    // التحقق إذا كان العنصر داخل نافذة العرض
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      element.classList.add('visible'); // إضافة كلاس التفعيل
    } else {
      element.classList.remove('visible'); // إزالة كلاس التفعيل
    }
  });
}

// تنفيذ الكود عند التمرير
window.addEventListener('scroll', handleScrollBlur);
// استدعاء الوظيفة عند تحميل الصفحة
handleScrollBlur();


// Create scrolling text dynamically




//hero







//start loading
const loader = document.createElement('div');
loader.className = 'custom-loader';
loader.innerHTML = `
  <img class="loader-image" src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/ePqWlX/Xz0oKx4qHII823rdcWT14QXrskrzw0IMJW34JzFX.png" alt="Loading" />
`;
document.body.appendChild(loader);

window.addEventListener("load", () => {
  // بعد نص ثانية خلي الخلفية تتحول رمادي شفاف
  setTimeout(() => {
    loader.classList.add('gray-phase');
  }, 500);

  // بعد 2.5 ثانية اخفي اللودر كله
  setTimeout(() => {
    loader.classList.add('hide-loader');
  }, 2500);
});

//end loading