// SCRIPT V 1.01
gsap.registerPlugin(ScrollTrigger, SplitText, AttrPlugin);

// Global variable to hold SplitText instances and split state
const splitTextData = {
  instances: [], // An array for storing SplitText instances
  elements: new Map() // Map to keep track of which elements are already broken
};

// SMOOTH
// Declare lenis globally
let lenis;

function Smooth() {
  // Destroy previous Lenis instance if it exists
  if (lenis) {
    lenis.destroy();
  }

  // Initialize Lenis with your original settings
  lenis = new Lenis({
    duration: 2,
    smoothTouch: false
  });

  // Attach ScrollTrigger update
  lenis.on('scroll', ScrollTrigger.update);

  // Attach GSAP ticker for Lenis RAF
  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  // Ensure lag smoothing is disabled
  gsap.ticker.lagSmoothing(0);

  // Lenis Start / Stop / Toggle Elements  
  $('[data-lenis-start]').on('click', function () {
    lenis.start();
  });
  $('[data-lenis-stop]').on('click', function () {
    lenis.stop();
  });
  $('[data-lenis-toggle]').on('click', function () {
    $(this).toggleClass("stop-scroll");
    if ($(this).hasClass("stop-scroll")) {
      lenis.stop();
    } else {
      lenis.start();
    }
  });

  // Remove previous keydown event listeners to prevent duplication
  $(document).off('keydown.lenis');

  // Handle keyboard scrolling with Arrow Up and Arrow Down
  $(document).on('keydown.lenis', function (event) {
    // Define the scroll step (in pixels)
    const scrollStep = 300; // You can adjust this value
    const currentScroll = lenis.actualScroll; // Current scroll position

    // Arrow Down
    if (event.key === 'ArrowDown') {
      event.preventDefault(); // Prevent default browser scrolling
      lenis.scrollTo(currentScroll + scrollStep, {
        duration: 1, // Smooth scroll duration
        easing: (t) => 1 - Math.pow(1 - t, 2.5) // Custom easing (cubic ease-out)
      });
    }

    // Arrow Up
    if (event.key === 'ArrowUp') {
      event.preventDefault(); // Prevent default browser scrolling
      lenis.scrollTo(currentScroll - scrollStep, {
        duration: 1, // Smooth scroll duration
        easing: (t) => 1 - Math.pow(1 - t, 2.5) // Custom easing (cubic ease-out)
      });
    }
  });
} // SMOOTH

// Arrays to store timelines for each animation type
let headingIntoViewTimelines = [];
let textIntoViewTimelines = [];
let simpleElementsTimelines = [];
let buttonIntoViewTimelines = [];
let separatorLineTimelines = [];
let dropdownTimelines = [];
let footerTimelines = [];
let mediaTimelines = [];

function IntoView() {
  // Media query handling with GSAP matchMedia
  const mm = gsap.matchMedia();

  // HEADING INTO VIEW
  let headingIntoView = $('.text-block .heading').not(
    '.section.hero .heading, .section.footer .heading, .cta-block .heading, .menu-overlay-block .heading, .dropdown-block .heading'
  );

  if (headingIntoView.length) {
    gsap.utils.toArray(headingIntoView).forEach(function (elem) {
      const innerSplit = new SplitText(elem, {
        type: 'lines',
        linesClass: 'text-line'
      });

      // Set initial state (hide lines)
      gsap.set(innerSplit.lines, {
        y: '110%',
        opacity: 0,
        //willChange: 'transform, opacity'
      });

      // Create paused timeline without auto-triggering
      const splitTimeline = gsap.timeline({
        paused: true,
        onComplete: () => {
          innerSplit.revert();
        }
      });

      splitTimeline.to(innerSplit.lines, {
        duration: 1.1,
        y: 0,
        opacity: 1,
        ease: 'Power4.easeOut',
        stagger: 0.12
      });

      // Create ScrollTrigger to track visibility
      const scrollTrigger = ScrollTrigger.create({
        trigger: elem,
        scrub: false,
        start: 'top 90%',
        end: 'bottom 0%',
      });

      headingIntoViewTimelines.push({
        timeline: splitTimeline,
        scrollTrigger: scrollTrigger,
        element: elem
      });
    });
  }

  // TEXT INTO VIEW
  let textIntoView = $('.text-block .text, .w-richtext p, .w-richtext li').not(
    '.text.w-richtext, .section.hero .text, .section.hero .text.w-richtext p, .section.footer .text, .cta-block .text, .button-block .text, .button-block .text, .form-wrapper .text, .menu-overlay-block .text, .dropdown-block .text'
  );

  if (textIntoView.length) {
    gsap.utils.toArray(textIntoView).forEach(function (elem) {
      // Fixing empty rows manually
      elem.innerHTML = elem.innerHTML.replace(/<br><br>/g,
        "<br><div class='empty-line'> </div><br>");

      const innerSplit = new SplitText(elem, {
        type: 'lines',
        linesClass: 'text-line'
      });

      // Set initial state (hide lines and list items)
      gsap.set(innerSplit.lines, {
        y: '110%',
        opacity: 0,
        //willChange: 'transform, opacity'
      });
      if (elem.tagName.toLowerCase() === 'li') {
        gsap.set(elem, {
          opacity: 0,
          //willChange: 'opacity'
        });
      }

      // Create paused timeline
      const splitTimeline = gsap.timeline({
        paused: true,
        onComplete: () => {
          innerSplit.revert();
          // Deleting empty lines
          elem.querySelectorAll('.empty-line').forEach(line => line.remove());
        }
      });

      // Animate list items (only opacity) and lines (with lift)
      if (elem.tagName.toLowerCase() === 'li') {
        splitTimeline.to(elem, {
          duration: 1.1,
          opacity: 1,
          ease: 'Power4.easeOut'
        }, 0); // Start at the beginning
      }
      splitTimeline.to(innerSplit.lines, {
        duration: 1.1,
        y: 0,
        opacity: 1,
        ease: 'Power4.easeOut',
        stagger: 0.06
      }, 0); // Sync with li animation

      // Create ScrollTrigger to track visibility
      const scrollTrigger = ScrollTrigger.create({
        trigger: elem,
        scrub: false,
        start: 'top 90%',
        end: 'bottom 0%',
      });

      textIntoViewTimelines.push({
        timeline: splitTimeline,
        scrollTrigger: scrollTrigger,
        element: elem
      });
    });
  }

  // SIMPLE ELEMENTS FADE IN
  let simpleElements = $(
    '.vector.rating, .image, .video-block, .navbar-block, .button-block, .section.footer').not(
    '.dropdown-block .image, .navbar-block .button-block, .section.footer .button-block');

  if (simpleElements.length) {
    gsap.utils.toArray(simpleElements).forEach(function (elem) {
      // Set initial state (hide elements)
      gsap.set(elem, {
        opacity: 0,
        //willChange: 'opacity'
      });

      // Create paused timeline
      const fadeTimeline = gsap.timeline({
        paused: true,
        /*onComplete: () => {
          gsap.set(elem, { willChange: 'auto' });
        }*/
      });

      fadeTimeline.to(elem, {
        duration: 1.5,
        opacity: 1,
        ease: 'Power2.easeOut'
      });

      // Create ScrollTrigger to track visibility
      const scrollTrigger = ScrollTrigger.create({
        trigger: elem,
        scrub: false,
        start: 'top 90%',
        end: 'bottom 0%',
        onEnter: () => fadeTimeline.play()
      });

      simpleElementsTimelines.push({
        timeline: fadeTimeline,
        scrollTrigger: scrollTrigger,
        element: elem
      });
    });
  }

  // BUTTON INTO VIEW
  /*let buttonIntoView = $('.button-block').not(
    '.section.hero .button-block, .navbar-block .button-block, .cta-block .button-block, .section.footer .button-block, .back-to-top-wrapper .button-block'
  );

  if (buttonIntoView.length) {
    gsap.utils.toArray(buttonIntoView).forEach((elem) => {
      const buttonText = elem.querySelector('.text');
      const buttonLineContainer = elem.querySelector('.button-line-container');
      const arrowMask = elem.querySelector('.arrow-mask');

      let textLine = null; // Variable for text-line

      // Set initial state for elements
      if (buttonText) {
        // Create text-mask wrapper
        const textMask = document.createElement('div');
        textMask.className = 'text-mask';

        // Create text-line wrapper
        textLine = document.createElement('div');
        textLine.className = 'text-line';

        // Move buttonText content into textLine
        while (buttonText.firstChild) {
          textLine.appendChild(buttonText.firstChild);
        }
        // Add textLine to textMask, and textMask to buttonText
        textMask.appendChild(textLine);
        buttonText.appendChild(textMask);

        // Set initial state for textLine
        gsap.set(textLine, {
          y: '150%',
          //willChange: 'transform'
        });
      }
      if (buttonLineContainer) {
        gsap.set(buttonLineContainer, { scaleX: 0, transformOrigin: 'left' });
      }
      if (arrowMask) {
        gsap.set(arrowMask, { scale: 0, transformOrigin: '0% 100%' });
      }

      // Create paused timeline
      const tl = gsap.timeline({
        paused: true
      });

      if (textLine) {
        tl.to(textLine, {
          duration: 0.8,
          y: 0,
          ease: 'Power4.easeOut',
          stagger: 0.12,
        }, 0);
      }

      if (buttonLineContainer) {
        tl.to(buttonLineContainer, {
          duration: 0.7,
          scaleX: 1,
          ease: 'Power3.easeOut',
        }, 0.15);
      }

      if (arrowMask) {
        tl.to(arrowMask, {
          duration: 0.7,
          scale: 1,
          ease: 'Power4.easeOut',
        }, 0.15);
      }

      // Create ScrollTrigger to track visibility
      const scrollTrigger = ScrollTrigger.create({
        trigger: elem,
        scrub: false,
        start: 'top 90%',
        end: 'bottom 0%',
      });

      buttonIntoViewTimelines.push({
        timeline: tl,
        scrollTrigger: scrollTrigger,
        element: elem
      });
    });
  }*/

  // FOOTER INTO VIEW
  /*let footerSection = $('.section.footer');

  if (footerSection.length) {
    gsap.utils.toArray(footerSection).forEach(function (elem) {
      // Select all text elements to animate
      let footerText = $(elem).find('.text, .button-text .text, .text._14px');
      let footerSocialIcons = $(elem).find('.vector.social');
      let footerButtonBlocks = $(elem).find('.button-block');

      // Split text into lines using SplitText
      let footerTextSpitted = false;

      function splitFooterText() {
        gsap.utils.toArray(footerText).forEach(function (textElem) {
          textElem.innerHTML = textElem.innerHTML.replace(/<br><br>/g,
            "<br><div class='empty-line'> </div><br>");

          const innerSplit = new SplitText(textElem, {
            type: 'lines',
            linesClass: 'text-line'
          });
          const outerSplit = new SplitText(textElem, {
            type: 'lines',
            linesClass: 'text-mask'
          });

          gsap.set(innerSplit.lines, {
            y: '150%',
            //willChange: 'transform'
          });
          gsap.set(outerSplit.lines, {
            overflow: 'hidden',
            display: 'block'
          });
        });
        footerTextSpitted = true;
      }

      // Initial setup for social icons and button lines
      gsap.set(footerSocialIcons, { opacity: 0, scale: 0.5 });
      gsap.set(footerButtonBlocks.find('.button-line-container'), {
        scaleX: 0,
        transformOrigin: 'left'
      });

      // Split text if not already done
      if (!footerTextSpitted) {
        splitFooterText();
      }

      // Create paused timeline
      const tl = gsap.timeline({
        paused: true
      });

      tl.to($(elem).find('.text-line'), {
          duration: 0.8,
          y: 0,
          ease: 'Power4.easeOut',
          stagger: 0.1
        }, 0)
        .to(footerButtonBlocks.find('.button-line-container'), {
          duration: 0.5,
          scaleX: 1,
          ease: 'Power3.easeOut',
          stagger: 0.1
        }, 0.2)
        .to(footerSocialIcons, {
          duration: 0.5,
          opacity: 1,
          scale: 1,
          ease: 'Power2.easeOut',
          stagger: 0.05
        }, 0.3);

      // Create ScrollTrigger to track visibility
      const scrollTrigger = ScrollTrigger.create({
        trigger: elem,
        start: 'top 90%'
      });

      footerTimelines.push({
        timeline: tl,
        scrollTrigger: scrollTrigger,
        element: elem
      });
    });
  }*/

  // SEPARATOR LINES INTO VIEW
  let separatorLine = $('.separator-line').not(
    '.section.hero .separator-line, .navbar-block .separator-line, .dropdown-block .separator-line'
  );

  if (separatorLine.length) {
    gsap.utils.toArray(separatorLine).forEach(function (elem) {
      // Set initial state
      gsap.set(elem, { width: '0%' });

      // Create paused timeline
      const tl = gsap.timeline({
        paused: true
      });

      tl.to(elem, {
        duration: 1.5,
        width: '100%',
        ease: 'power4'
      });

      // Create ScrollTrigger to track visibility
      const scrollTrigger = ScrollTrigger.create({
        trigger: elem,
        scrub: false,
        start: 'top 90%',
        end: 'bottom 0%',
      });

      separatorLineTimelines.push({
        timeline: tl,
        scrollTrigger: scrollTrigger,
        element: elem
      });
    });
  }

  // DROPDOWN INTO VIEW
  let dropdownBlocks = $('.dropdown-block');

  // Check if dropdown blocks exist
  if (dropdownBlocks.length) {
    gsap.utils.toArray(dropdownBlocks).forEach(function (elem) {
      // Select heading, image, separator line, and plus lines within the dropdown block
      const heading = elem.querySelector('.heading');
      const image = elem.querySelector('.image-block.dropdown img');
      const separator = elem.querySelector('.separator-line.dropdown');
      const plusLines = elem.querySelectorAll('.dropdown-plus-line .dropdown-plus-solid');

      // Split heading into lines for animation
      let innerSplit = null;
      if (heading) {
        innerSplit = new SplitText(heading, {
          type: 'lines',
          linesClass: 'text-line'
        });
      }

      // Set initial states for heading lines, image, separator line, and plus lines
      if (innerSplit) {
        gsap.set(innerSplit.lines, {
          y: '110%',
          opacity: 0,
          //willChange: 'transform, opacity'
        });
      }
      if (image) {
        gsap.set(image, {
          opacity: 0,
          //willChange: 'opacity'
        });
      }
      if (separator) {
        gsap.set(separator, {
          width: '0%',
          //willChange: 'width'
        });
      }
      if (plusLines.length) {
        gsap.set(plusLines, {
          width: '0%',
          //willChange: 'width, height'
        });
      }

      // Create a paused timeline for the animation
      const dropdownTimeline = gsap.timeline({
        paused: true,
        onComplete: () => {
          if (innerSplit) innerSplit.revert(); // Revert SplitText only if it was created
          /*gsap.set(image, { willChange: 'auto' });
          gsap.set(separator, { willChange: 'auto' });
          gsap.set(plusLines, { willChange: 'auto' });*/
        }
      });

      // Animate heading lines with lift and fade-in
      if (innerSplit) {
        dropdownTimeline.to(innerSplit.lines, {
          duration: 1.1,
          y: 0,
          opacity: 1,
          ease: 'Power4.easeOut',
          stagger: 0.12
        });
      }

      // Animate plus lines with a delay of 0.2 seconds
      if (plusLines.length) {
        dropdownTimeline.to(plusLines, {
          duration: 0.5,
          width: '100%', // Expand horizontal line
          ease: 'Power4.easeOut',
          stagger: 0.2
        }, 0.2);
      }

      // Animate separator line with a delay of 0.3 seconds
      if (separator) {
        dropdownTimeline.to(separator, {
          duration: 1.5,
          width: '100%',
          ease: 'Power4.easeOut'
        }, 0.3);
      }

      // Animate image if it exists, with a delay of 0.3 seconds
      if (image) {
        dropdownTimeline.to(image, {
          duration: 1.5,
          opacity: 1,
          ease: 'Power2.easeOut'
        }, 0.3);
      }

      // Create ScrollTrigger to start animation when element enters viewport
      const scrollTrigger = ScrollTrigger.create({
        trigger: elem,
        scrub: false,
        start: 'top 90%',
        end: 'bottom 0%',
        onEnter: () => dropdownTimeline.play()
      });

      // Add timeline to array for later initialization
      dropdownTimelines.push({
        timeline: dropdownTimeline,
        scrollTrigger: scrollTrigger,
        element: elem
      });
    });
  }

  // MEDIA BLOCKS INTO VIEW
  /*const mediaBlocks = $('.image-block .image, .video-block').not('.dropdown-block .image');

  // Create or find <style> tag in <head> for CSS
  let styleTag = document.querySelector('head #dynamic-filter-styles');
  if (!styleTag) {
    styleTag = document.createElement('style');
    styleTag.id = 'dynamic-filter-styles';
    document.head.appendChild(styleTag);
  }

  if (mediaBlocks.length) {
    mediaTimelines = []; // Clear array to avoid duplicates

    gsap.utils.toArray(mediaBlocks).forEach(function (elem) {
      const $elem = $(elem);

      // Skip if element is not visible
      if (!$elem.is(':visible')) {
        return;
      }

      // Get element dimensions
      const width = $elem.width();
      const height = $elem.height();

      // Skip if dimensions are invalid
      if (width === 0 || height === 0) {
        return;
      }

      // Set willChange on the media element to optimize filter rendering
      /*gsap.set(elem, {
        willChange: 'filter'
      });*/

  // Generate unique filter ID
  /*const filterId = "turbulent-dissolve-" + Math.random().toString(36).substr(2, 9);

      // Add data-filter-id to the element
      $elem.attr('data-filter-id', filterId);

      // Create SVG for the filter
      const svgNS = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(svgNS, "svg");
      svg.setAttribute("width", width);
      svg.setAttribute("height", height);
      svg.style.position = "absolute";
      svg.style.top = "0";
      svg.style.left = "0";
      svg.style.zIndex = "1";
      svg.style.display = "block";

      const defs = document.createElementNS(svgNS, "defs");
      const filter = document.createElementNS(svgNS, "filter");
      filter.setAttribute("id", filterId);
      filter.setAttribute("x", "0%");
      filter.setAttribute("y", "0%");
      filter.setAttribute("width", "100%");
      filter.setAttribute("height", "100%");

      // Add filter elements
      const feTurbulence = document.createElementNS(svgNS, "feTurbulence");
      feTurbulence.setAttribute("type", "fractalNoise");
      // Set fixed baseFrequency to 0.005
      feTurbulence.setAttribute("baseFrequency", "0.005");
      // Fixed numOctaves at 2 for consistent curve detail
      feTurbulence.setAttribute("numOctaves", "2");
      // Add random seed for unique noise patterns
      const randomSeed = Math.floor(Math.random() * 100) + 1;
      feTurbulence.setAttribute("seed", randomSeed.toString());
      feTurbulence.setAttribute("result", "noise");

      const feColorMatrix = document.createElementNS(svgNS, "feColorMatrix");
      feColorMatrix.setAttribute("type", "luminanceToAlpha");

      const feComponentTransfer1 = document.createElementNS(svgNS, "feComponentTransfer");
      const feFuncA1 = document.createElementNS(svgNS, "feFuncA");
      feFuncA1.setAttribute("type", "linear");
      feFuncA1.setAttribute("slope", "0.5"); // Initial slope value for animation

      const feComponentTransfer2 = document.createElementNS(svgNS, "feComponentTransfer");
      const feFuncA2 = document.createElementNS(svgNS, "feFuncA");
      feFuncA2.setAttribute("type", "discrete");
      feFuncA2.setAttribute("tableValues", "0 1");
      feComponentTransfer2.appendChild(feFuncA2);

      const feGaussianBlur = document.createElementNS(svgNS, "feGaussianBlur");
      feGaussianBlur.setAttribute("stdDeviation", "1"); // Set stdDeviation to 1

      const feComposite = document.createElementNS(svgNS, "feComposite");
      feComposite.setAttribute("operator", "in");
      feComposite.setAttribute("in", "SourceGraphic");
      feComposite.setAttribute("result", "overlay");

      feComponentTransfer1.appendChild(feFuncA1);

      // Append elements to the filter
      filter.appendChild(feTurbulence);
      filter.appendChild(feColorMatrix);
      filter.appendChild(feComponentTransfer1);
      filter.appendChild(feComponentTransfer2);
      filter.appendChild(feGaussianBlur);
      filter.appendChild(feComposite);
      defs.appendChild(filter);
      svg.appendChild(defs);

      // Create wrapper for the image and SVG
      const wrapper = document.createElement("div");
      wrapper.style.position = "relative";
      wrapper.style.width = width + "px";
      wrapper.style.height = height + "px";
      $elem.wrap(wrapper);
      $elem.after(svg);

      // Add CSS style for this element
      const cssRule = `
      [data-filter-id="${filterId}"] {
        filter: url(#${filterId}) !important;
        opacity: 1 !important;
      }
    `;
      styleTag.textContent += cssRule;

      // Set up animation on scroll
      const tl = gsap.timeline({
        paused: true,
        onComplete: () => {
          gsap.set(elem, { willChange: 'auto' });
        }
      });
      tl.to(feFuncA1, {
        duration: 4, // Duration set to 3 seconds
        ease: "power2.Out",
        attr: { slope: 3 } // Animate slope attribute from 0.5 to 3
      });

      // Create ScrollTrigger for one-time animation
      const scrollTrigger = ScrollTrigger.create({
        trigger: $elem[0],
        scrub: false,
        start: "top 90%",
        end: "bottom 0%",
        onEnter: () => tl.play()
      });

      mediaTimelines.push({
        timeline: tl,
        scrollTrigger: scrollTrigger,
        element: elem
      });
    });
  }*/

  // CANVAS ANIMATIONS
  /*const canvas = document.createElement('canvas');
  canvas.id = 'scroll-canvas';
  document.body.appendChild(canvas);

  const ctx = canvas.getContext('2d');

  // Set canvas dimensions to match window size
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);

  // Collect all images and their positions
  const mediaBlocks = $('.image-block .image').not('.dropdown-block .image');
  const imageData = [];

  mediaBlocks.each(function (index, elem) {
    const $elem = $(elem);
    const src = $elem.attr('src');
    if (!src) return;

    // Get the position of the image-block relative to the document
    const rect = $elem.parent()[0].getBoundingClientRect();
    const scrollTop = window.scrollY || window.pageYOffset;
    const top = rect.top + scrollTop;
    const left = rect.left;
    const width = rect.width;
    const height = rect.height;

    // Load the image
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.src = src;

    imageData.push({
      img: img,
      top: top,
      left: left,
      width: width,
      height: height,
      alpha: 0, // Initial alpha for animation
      blur: 5 // Initial blur for animation
    });
  });

  // Animation loop to draw images on canvas
  function draw() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const scrollY = window.scrollY || window.pageYOffset;
    const windowHeight = window.innerHeight;

    // Draw each image based on its position and scroll
    imageData.forEach((data) => {
      const { img, top, left, width, height } = data;

      // Calculate visibility (0 to 1) based on scroll position
      const visibility = Math.max(0, Math.min(1, (windowHeight + scrollY - top) /
        windowHeight));

      // Update alpha and blur based on visibility
      data.alpha = visibility;
      data.blur = 5 * (1 - visibility); // Blur decreases as visibility increases

      // Apply alpha and blur
      ctx.globalAlpha = data.alpha;
      ctx.filter = `blur(${data.blur}px)`;

      // Draw the image at its position adjusted for scroll
      const yPos = top - scrollY;
      if (yPos + height > 0 && yPos < windowHeight) { // Only draw if in viewport
        ctx.drawImage(img, left, yPos, width, height);
      }
    });

    // Request next frame
    requestAnimationFrame(draw);
  }

  // Start the animation loop
  requestAnimationFrame(draw);

  // Use ScrollTrigger to enhance scroll smoothness (optional)
  gsap.to(window, {
    scrollTrigger: {
      trigger: document.body,
      start: 'top top',
      end: 'bottom bottom',
      scrub: true,
      onUpdate: () => {
        // The draw loop already handles the animation
      }
    }
  });*/

  // Include Three.js from CDN
  /*const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js';
  document.head.appendChild(script);

  script.onload = function () {
    // Create WebGL canvas
    const canvas = document.createElement('canvas');
    canvas.id = 'webgl-canvas';
    document.body.appendChild(canvas);

    // Get device pixel ratio
    const dpr = window.devicePixelRatio || 1;

    // Set up Three.js scene
    const scene = new THREE.Scene();

    // Use OrthographicCamera to avoid perspective scaling, adjusted for devicePixelRatio
    const cssWidth = window.innerWidth;
    const cssHeight = window.innerHeight;
    const pixelWidth = cssWidth * dpr;
    const pixelHeight = cssHeight * dpr;

    const aspect = cssWidth / cssHeight;
    const frustumSize = pixelHeight; // Use pixel height for orthographic camera
    const camera = new THREE.OrthographicCamera(
      (frustumSize * aspect) / -2, // left
      (frustumSize * aspect) / 2, // right
      frustumSize / 2, // top
      frustumSize / -2, // bottom
      0.1, // near
      1000 // far
    );
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
    renderer.setSize(cssWidth, cssHeight); // Set CSS size
    renderer.setPixelRatio(dpr); // Apply devicePixelRatio

    // Handle window resize
    window.addEventListener('resize', () => {
      const cssWidth = window.innerWidth;
      const cssHeight = window.innerHeight;
      const pixelWidth = cssWidth * dpr;
      const pixelHeight = cssHeight * dpr;

      const aspect = cssWidth / cssHeight;
      camera.left = (pixelHeight * aspect) / -2;
      camera.right = (pixelHeight * aspect) / 2;
      camera.top = pixelHeight / 2;
      camera.bottom = pixelHeight / -2;
      camera.updateProjectionMatrix();
      renderer.setSize(cssWidth, cssHeight);
      renderer.setPixelRatio(dpr);
    });

    // Collect all images and their positions
    const mediaBlocks = $('.image-block .image').not('.dropdown-block .image');
    const planes = [];

    mediaBlocks.each(function (index, elem) {
      const $elem = $(elem);
      const src = $elem.attr('src');
      if (!src) return;

      // Get the position of the image-block relative to the document
      const rect = $elem.parent()[0].getBoundingClientRect();
      const scrollTop = window.scrollY || window.pageYOffset;
      const top = rect.top + scrollTop;
      const left = rect.left;
      const width = rect.width;
      const height = rect.height;

      // Load the image as a texture
      const texture = new THREE.TextureLoader().load(src);

      // Create shader material with noise effect
      const material = new THREE.ShaderMaterial({
        uniforms: {
          uTexture: { value: texture },
          uProgress: { value: 0 },
          uTime: { value: 0 },
          uResolution: { value: new THREE.Vector2(width, height) }
        },
        vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
        fragmentShader: `
        uniform sampler2D uTexture;
        uniform float uProgress;
        uniform float uTime;
        uniform vec2 uResolution;
        varying vec2 vUv;

        // Simple noise function
        float random(vec2 st) {
          return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);
        }

        void main() {
          vec2 uv = vUv;
          vec4 color = texture2D(uTexture, uv);

          // Add noise effect for fade-in
          float noise = random(uv * 10.0 + uTime);
          float alpha = mix(noise, 1.0, uProgress);

          gl_FragColor = vec4(color.rgb, alpha);
        }
      `
      });

      // Create a plane geometry for the image, adjusted for devicePixelRatio
      const scaledWidth = width * dpr;
      const scaledHeight = height * dpr;
      const geometry = new THREE.PlaneGeometry(scaledWidth,
      scaledHeight); // Scale dimensions by DPR
      const plane = new THREE.Mesh(geometry, material);
      scene.add(plane);

      // Store plane data
      planes.push({
        plane: plane,
        top: top,
        left: left,
        width: width,
        height: height
      });
    });

    // Animation loop
    function animate() {
      requestAnimationFrame(animate);

      const scrollY = window.scrollY || window.pageYOffset;
      const windowHeight = window.innerHeight;
      const windowWidth = window.innerWidth;

      // Update each plane's position and animation
      planes.forEach((data) => {
        const { plane, top, left, width, height } = data;

        // Calculate visibility (0 to 1) based on scroll position
        const visibility = Math.max(0, Math.min(1, (windowHeight + scrollY - top) /
          windowHeight));

        // Update shader progress
        plane.material.uniforms.uProgress.value = visibility;
        plane.material.uniforms.uTime.value += 0.01;

        // Convert pixel coordinates to Three.js world coordinates, adjusted for devicePixelRatio
        const yPosPixels = top - scrollY; // Position in pixels relative to viewport
        const xPosPixels = left + (width / 2); // Use center of the image

        // Convert to Three.js coordinates (pixel-based with OrthographicCamera)
        const yPos = (windowHeight / 2) * dpr - (yPosPixels + height / 2) * dpr;
        const xPos = -(windowWidth / 2) * dpr + xPosPixels * dpr;

        // Set position
        plane.position.set(xPos, yPos, 0);
      });

      renderer.render(scene, camera);
    }
    animate();

    // Use ScrollTrigger to enhance scroll smoothness
    gsap.to(window, {
      scrollTrigger: {
        trigger: document.body,
        start: 'top top',
        end: 'bottom bottom',
        scrub: true,
        onUpdate: () => {
          // The animate loop already handles the animation
        }
      }
    });
  };*/

} // INTO VIEW

// INTO VIEW ANIMATIONS START
function IntoViewAnimationsStart() {

  // Heading Into View Start
  if (headingIntoViewTimelines.length) {
    headingIntoViewTimelines.forEach(({ timeline, element }) => {
      const rect = element.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
      const isInViewport = rect.top <= windowHeight * 0.9;

      if (isInViewport) {
        timeline.play();
      } else {
        const onScroll = () => {
          const updatedRect = element.getBoundingClientRect();
          if (updatedRect.top <= windowHeight * 0.9) {
            timeline.play();
            window.removeEventListener('scroll', onScroll);
          }
        };
        window.addEventListener('scroll', onScroll);
      }
    });
  }

  // Text Into View Start
  if (textIntoViewTimelines.length) {
    textIntoViewTimelines.forEach(({ timeline, element }) => {
      const rect = element.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
      const isInViewport = rect.top <= windowHeight * 0.9;

      if (isInViewport) {
        timeline.play();
      } else {
        const onScroll = () => {
          const updatedRect = element.getBoundingClientRect();
          if (updatedRect.top <= windowHeight * 0.9) {
            timeline.play();
            window.removeEventListener('scroll', onScroll);
          }
        };
        window.addEventListener('scroll', onScroll);
      }
    });
  }

  // Simple Elements Fade In View Start
  if (simpleElementsTimelines.length) {
    simpleElementsTimelines.forEach(({ timeline, element }) => {
      const rect = element.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
      const isInViewport = rect.top <= windowHeight * 0.9;

      if (isInViewport) {
        timeline.play();
      } else {
        const onScroll = () => {
          const updatedRect = element.getBoundingClientRect();
          if (updatedRect.top <= windowHeight * 0.9) {
            timeline.play();
            window.removeEventListener('scroll', onScroll);
          }
        };
        window.addEventListener('scroll', onScroll);
      }
    });
  }

  // Button Into View Start
  /*if (buttonIntoViewTimelines.length) {
    buttonIntoViewTimelines.forEach(({ timeline, element }) => {
      const rect = element.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
      const isInViewport = rect.top <= windowHeight * 0.9;

      if (isInViewport) {
        timeline.play();
      } else {
        const onScroll = () => {
          const updatedRect = element.getBoundingClientRect();
          if (updatedRect.top <= windowHeight * 0.9) {
            timeline.play();
            window.removeEventListener('scroll', onScroll);
          }
        };
        window.addEventListener('scroll', onScroll);
      }
    });
  }*/

  // Separator Line Into View Start
  if (separatorLineTimelines.length) {
    separatorLineTimelines.forEach(({ timeline, element }) => {
      const rect = element.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
      const isInViewport = rect.top <= windowHeight * 0.9;

      if (isInViewport) {
        timeline.play();
      } else {
        const onScroll = () => {
          const updatedRect = element.getBoundingClientRect();
          if (updatedRect.top <= windowHeight * 0.9) {
            timeline.play();
            window.removeEventListener('scroll', onScroll);
          }
        };
        window.addEventListener('scroll', onScroll);
      }
    });
  }

  // Dropdown Into View Start
  if (dropdownTimelines.length) {
    dropdownTimelines.forEach(({ timeline, element }) => {
      const rect = element.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
      const isInViewport = rect.top <= windowHeight * 0.9;

      if (isInViewport) {
        timeline.play();
      } else {
        const onScroll = () => {
          const updatedRect = element.getBoundingClientRect();
          if (updatedRect.top <= windowHeight * 0.9) {
            timeline.play();
            window.removeEventListener('scroll', onScroll);
          }
        };
        window.addEventListener('scroll', onScroll);
      }
    });
  }

  // Footer Into View Start
  /*if (footerTimelines.length) {
    footerTimelines.forEach(({ timeline, element }) => {
      const rect = element.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
      const isInViewport = rect.top <= windowHeight * 0.9;

      if (isInViewport) {
        timeline.play();
      } else {
        const onScroll = () => {
          const updatedRect = element.getBoundingClientRect();
          if (updatedRect.top <= windowHeight * 0.9) {
            timeline.play();
            window.removeEventListener('scroll', onScroll);
          }
        };
        window.addEventListener('scroll', onScroll);
      }
    });
  }*/

  // Media Into View Start
  if (mediaTimelines.length) {
    mediaTimelines.forEach(({ timeline, element }) => {
      const rect = element.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
      const isInViewport = rect.top <= windowHeight * 0.9;

      if (isInViewport) {
        timeline.play();
      } else {
        const onScroll = () => {
          const updatedRect = element.getBoundingClientRect();
          if (updatedRect.top <= windowHeight * 0.9) {
            timeline.play();
            window.removeEventListener('scroll', onScroll);
          }
        };
        window.addEventListener('scroll', onScroll);
      }
    });
  }

} // INTO VIEW ANIMATIONS START

// INTERACTIONS
function Interactions() {

  // Media query handling with GSAP matchMedia
  const mm = gsap.matchMedia();

  // MODE CLASSES CLEAN AND ATTRIBUTE SETTING
  const modeClasses = [
    { elements: $('.primary-color-mode'), attrValue: 'primary' },
    { elements: $('.secondary-color-mode'), attrValue: 'secondary' },
    { elements: $('.tertiary-color-mode'), attrValue: 'tertiary' }
  ];

  modeClasses.forEach(({ elements, attrValue }) => {
    elements.attr('data-animate-theme-to', attrValue);
    elements.removeClass(`${attrValue}-color-mode`);
  });

  // COLOR THEME
  $("[data-animate-theme-to]").each(function () {
    let theme = $(this).attr("data-animate-theme-to");

    ScrollTrigger.create({
      trigger: $(this),
      start: "top center",
      end: "bottom center",
      //markers: true,
      onToggle: ({ self, isActive }) => {
        if (isActive) gsap.to("body", { ...colorThemes.getTheme(theme) });
      }
    });
  });

  // PARALLAX OR ROTATION EFFECT
  const elements = document.querySelectorAll('[data-speed]');

  elements.forEach((element) => {
    const speed = parseFloat(element.getAttribute('data-speed')) || 1;

    // Calculate offset percentage based on speed
    const offsetPercent = (speed - 1) * 100;
    const halfOffset = offsetPercent / 2;

    const rotation = parseFloat(element.getAttribute('data-rotation')) || 0;
    const halfRotation = rotation / 2;

    // Set up animation with GSAP and ScrollTrigger using yPercent and rotation
    gsap.fromTo(
      element,
      {
        yPercent: halfOffset,
        rotation: halfRotation
      },
      {
        yPercent: -halfOffset,
        rotation: -halfRotation,
        ease: 'none',
        scrollTrigger: {
          trigger: element,
          start: 'top bottom',
          end: 'bottom top',
          scrub: true
        }
      }
    );
  });

  // NAVBAR BG AND LOGO ANIMATION
  const navbarBGwrapper = $('.navbar-bg-wrapper');
  const navbarBlur = navbarBGwrapper.find('.navbar-blur');

  // Run animation only if all elements exist
  if (navbarBGwrapper.length && navbarBlur.length && logoTextElementsForScroll.every(el => el)) {
    // --- Navbar Blur Animation ---
    // Create a timeline for the blur effect with ScrollTrigger (scrubbed)
    let blurTl = gsap.timeline({
      scrollTrigger: {
        trigger: '.main',
        start: 'top top',
        end: '400px top',
        scrub: true, // Blur animates gradually from 0 to 400px
      },
    });

    // Add navbar blur animation
    blurTl.fromTo(navbarBlur, { backdropFilter: 'blur(0px)' }, {
      backdropFilter: 'blur(10px)',
      duration: 0.5
    }, 0);
  }

  // HANDLE ENTER KEY PRESS TO SIMULATE CLICK
  $(document).on('keydown', function (event) {
    if (event.keyCode === 13) { // 13 is the keycode for Enter
      const activeElement = document.activeElement;
      if (activeElement) {
        $(activeElement).trigger('click'); // Use jQuery to trigger the click
      }
    }
  });

  // DROPDOWN EXPANDING
  const dropdowns = document.querySelectorAll('.dropdown-block');

  if (dropdowns.length) {
    dropdowns.forEach((dropdown) => {
      // Find child elements
      const dropdownContent = dropdown.querySelector('.dropdown-content');
      const plusLine = dropdown.querySelector('.dropdown-plus-line.absolute');

      // Set initial state: dropdown closed
      gsap.set(dropdownContent, {
        height: 0,
        overflow: 'hidden',
        onComplete: () => {
          ScrollTrigger.refresh();
          if (window.lenis) lenis.resize();
        },
      });

      // Create a single timeline for opening/closing animation
      const tl = gsap.timeline({ paused: true });

      // Add animations to the timeline
      tl.to(dropdownContent, {
        height: 'auto',
        duration: 0.5,
        ease: 'power2.inOut',
      });

      // Add click event listener to toggle the dropdown
      dropdown.addEventListener('click', () => {
        const isOpen = dropdown.classList.contains('is-open');

        if (isOpen) {
          tl.reverse();
          if (plusLine) {
            plusLine.classList.remove('_01');
            plusLine.classList.add('_02');
          }
        } else {
          tl.play();
          if (plusLine) {
            plusLine.classList.remove('_02');
            plusLine.classList.add('_01');
          }
        }

        // Toggle the is-open class after animation completes
        tl.eventCallback('onComplete', () => {
          dropdown.classList.toggle('is-open');
          ScrollTrigger.refresh();
          if (window.lenis) lenis.resize();
        });
        tl.eventCallback('onReverseComplete', () => {
          dropdown.classList.toggle('is-open');
          ScrollTrigger.refresh();
          if (window.lenis) lenis.resize();
        });
      });
    });
  }

  // VIDEO BLOCK INTERACTIONS
  // HERO VIDEO
  // Add is-visible class to hero video block on scroll
  const heroVideoBlocks = gsap.utils.toArray('.video-block.hero');
  if (heroVideoBlocks.length > 0) {
    heroVideoBlocks.forEach(function (heroVideoBlock) {
      ScrollTrigger.create({
        trigger: heroVideoBlock,
        start: 'top bottom',
        end: 'bottom top',
        toggleClass: { targets: heroVideoBlock, className: 'is-visible' },
        once: false
      });
    });
  }

  // Video Interaction
  const heroVideoContainers = gsap.utils.toArray('.video-block.hero');
  if (heroVideoContainers.length > 0) {
    heroVideoContainers.forEach(function (heroVideoContainer) {
      // Define elements within the hero video container
      let video = $('video.video-player-style', heroVideoContainer); // Video element
      let playButtonWrapper = $('.play-button-wrapper',
        heroVideoContainer); // Play button wrapper
      let videoControlsWrapper = $('.video-controls-wrapper',
        heroVideoContainer); // Video controls wrapper
      let isVideoPaused = true; // Default state: video is paused
      let hideTimeout; // Timer for auto-hiding controls

      // Initial state setup using gsap.set
      gsap.set(videoControlsWrapper, {
        opacity: 0,
        pointerEvents: 'none'
      });

      // Handle mouse movement to detect activity
      $('.play-button-area', heroVideoContainer).on('mousemove', function () {
        if (!isVideoPaused) { // Only if video is playing
          clearTimeout(hideTimeout); // Clear any existing timeout
          gsap.to(videoControlsWrapper, {
            opacity: 1,
            duration: 0.3,
            onComplete: function () {
              videoControlsWrapper.css('pointer-events', 'auto');
            }
          });
          hideTimeout = setTimeout(function () {
            gsap.to(videoControlsWrapper, {
              opacity: 0,
              duration: 0.3,
              onComplete: function () {
                videoControlsWrapper.css('pointer-events', 'none');
              }
            });
          }, 2000); // Reset timer to 2 seconds
        }
      });

      // Handle mouseout event (hover out) for play button area
      $('.play-button-area', heroVideoContainer).on('mouseout', function () {
        if (!isVideoPaused) { // Hide controls only if video is playing
          clearTimeout(hideTimeout); // Clear any existing timeout
          hideTimeout = setTimeout(function () {
            gsap.to(videoControlsWrapper, {
              opacity: 0,
              duration: 0.3,
              onComplete: function () {
                videoControlsWrapper.css('pointer-events', 'none');
              }
            });
          }, 2000); // Hide after 2 seconds of inactivity
        }
      });

      // Function to handle "pause" animation and state
      function pauseVideoAnimation() {
        gsap.to(playButtonWrapper, {
          scale: 1,
          opacity: 1,
          ease: 'Power1.easeOut',
          duration: 0.3
        });
        gsap.to(videoControlsWrapper, {
          opacity: 0,
          duration: 0.3,
          onComplete: function () {
            videoControlsWrapper.css('pointer-events', 'none');
          }
        });
      }

      // Handle click on Play Button Area
      $('.play-button-area', heroVideoContainer).on('click', function () {
        if (isVideoPaused) {
          // Play the video (handled by another script)
          gsap.to(playButtonWrapper, {
            scale: 1.3,
            opacity: 0,
            ease: 'Power1.easeOut',
            duration: 0.3
          });
          gsap.to(videoControlsWrapper, {
            opacity: 1,
            duration: 0.3,
            onComplete: function () {
              videoControlsWrapper.css('pointer-events', 'auto');
            }
          });
          // Start hide timeout immediately after showing controls
          hideTimeout = setTimeout(function () {
            if (!isVideoPaused) { // Ensure video is still playing
              gsap.to(videoControlsWrapper, {
                opacity: 0,
                duration: 0.3,
                onComplete: function () {
                  videoControlsWrapper.css('pointer-events', 'none');
                }
              });
            }
          }, 2000);
        } else {
          pauseVideoAnimation();
        }
        isVideoPaused = !isVideoPaused;
      });

      // Handle click on Pause Button
      $('[f-data-video="pause-button"]', heroVideoContainer).on('click', function (e) {
        e.preventDefault();
        pauseVideoAnimation();
        isVideoPaused = true;
      });

      // Handle click on Quality Link
      $('[f-data-video-quality]', heroVideoContainer).on('click', function (e) {
        e.preventDefault();
        isVideoPaused = true;
      });
    });
  }

  // TESTIMONIAL VIDEOS
  const testimonialVideoContainers = gsap.utils.toArray('.video-block.testimonial');
  if (testimonialVideoContainers.length > 0) { // Explicit check if elements exist
    // Store all video elements globally
    let allVideos = [];

    testimonialVideoContainers.forEach(function (testimonialVideoContainer) {
      // Define elements within the video container
      let video = $('video.bg-video-element', testimonialVideoContainer); // Video element
      let playButtonWrapper = $('.play-button-wrapper',
        testimonialVideoContainer); // Play button wrapper
      let playButton = $('.play-button', testimonialVideoContainer); // Play button itself
      var play = false; // State to track if video is playing

      // Add current video to the global array
      allVideos.push(video[0]);

      // Function to initially pause the video
      function initialPause() {
        video[0].pause(); // Pause the video on load
      }
      initialPause();
      $(video).prop('muted', false); // Ensure video is not muted by default

      // Handle mouseover event (hover in)
      /*$(testimonialVideoContainer).on('mouseover', function () {
        gsap.to(playButton, {
          scale: 1.3,
          ease: 'Power1.easeOut',
          duration: 0.3
        }); // Scale up play button
      });

      // Handle mouseout event (hover out)
      $(testimonialVideoContainer).on('mouseout', function () {
        gsap.to(playButton, {
          scale: 1,
          ease: 'Power1.easeOut',
          duration: 0.3
        }); // Reset play button scale
      });*/

      // Handle click event to play/pause video
      $(testimonialVideoContainer).on('click', function () {
        // Check the actual paused state of the video
        if (video[0].paused) {
          // Pause all other videos
          allVideos.forEach(function (otherVideo) {
            if (otherVideo !== video[0]) {
              otherVideo.pause();
              let otherPlayButtonWrapper = $(otherVideo).closest(
                '.video-block.testimonial').find('.play-button-wrapper');
              if (otherPlayButtonWrapper.length) {
                gsap.to(otherPlayButtonWrapper, {
                  scale: 1,
                  opacity: 1,
                  ease: 'Power1.easeOut',
                  duration: 0.3
                });
              }
            }
          });

          video[0].play(); // Play the current video
          gsap.to(playButtonWrapper, {
            scale: 1.3,
            opacity: 0,
            ease: 'Power1.easeOut',
            duration: 0.3
          }); // Scale up and hide play button area
          play = false; // Update state to playing
        } else {
          video[0].pause(); // Pause the video
          gsap.to(playButtonWrapper, {
            scale: 1,
            opacity: 1,
            ease: 'Power1.easeOut',
            duration: 0.3
          }); // Reset scale and show play button area
          play = true; // Update state to paused
        }
      });
    });
  }

  // VIDEO PLAYER VOLUME SLIDER
  document.querySelectorAll(".slider").forEach(function (slider) {
    slider.addEventListener("input", function (e) {
      let value =
        ((e.target.value - e.target.min) / (e.target.max - e.target.min)) * 100;
      e.target.style.backgroundImage =
        `linear-gradient(to right, var(--swatch--video-player) ${value}%, rgb(from var(--swatch--video-player) r g b / 0.15) ${value}%)`;
    });
  });

}; // INTERACTIONS

// HOVERS
function Hovers() {

  // BUTTON HOVER
  /*const buttonBlock = document.querySelectorAll(
    '.button-block'
  );

  // Check if there are any buttons to animate
  if (buttonBlock.length) {
    gsap.utils.toArray(buttonBlock).forEach((elem) => {
      // Find child elements within the current button
      const buttonLine = elem.querySelector('.button-line');
      const buttonLineContainer = elem.querySelector('.button-line-container');
      const arrowMask = elem.querySelector('.arrow-mask');
      const arrow01 = elem.querySelector('.vector.arrow._01');
      const arrow02 = elem.querySelector('.vector.arrow._02');

      // Create a GSAP timeline for scroll-triggered animation (if needed)
      const scrollTl = gsap.timeline({
        scrollTrigger: {
          trigger: elem,
          scrub: false,
          start: 'top 90%',
          end: 'bottom 0%',
        },
      });

      // Create a GSAP timeline for hover animation
      const hoverTimeline = gsap.timeline({ paused: true });

      // Add animations for hover effect if elements exist
      if (arrowMask) {
        hoverTimeline.to(arrow01, {
            duration: 0.5,
            width: '0%',
            height: '0%',
            ease: 'power2.inOut',
          }, 0)
          .to(
            arrow02, {
              duration: 0.5,
              width: '100%',
              height: '100%',
              ease: 'power2.inOut',
            }, 0.05);
      }

      // Add animation for buttonLine if it exists
      if (buttonLineContainer) {
        const buttonLine01 = elem.querySelector('.button-line._01');
        const buttonLine02 = elem.querySelector('.button-line._02');

        gsap.set(buttonLine02, { width: '0%' });

        hoverTimeline.to(buttonLine01, {
            duration: 0.4,
            width: '0%',
            ease: 'Power3.easeOut',
          }, 0)
          .to(buttonLine02, {
            duration: 0.3,
            width: '100%',
            ease: 'Power3.easeOut',
          }, 0.2);
      }

      // Play the timeline when the mouse enters the element
      elem.addEventListener('mouseenter', () => {
        hoverTimeline.play();
      });

      // Reverse the timeline when the mouse leaves the element
      elem.addEventListener('mouseleave', () => {
        hoverTimeline.reverse();
      });
    });
  }*/

}; // HOVERS

// Animations  
function Animations() {
  let mm = gsap.matchMedia();

  mm.add('(min-width: 768px)', () => {
    AnimationsDesktop();

    let mm = gsap.matchMedia();

    mm.add('(min-width: 1281px)', () => {
      Hovers();
    });
  });

  mm.add('(max-width: 767px)', () => {
    AnimationsMobile();
  });
}

function AnimationsDesktop() {
  Interactions();
  IntoView();
}

function AnimationsMobile() {
  Interactions();
  IntoView();
}

// Function to hide the loading screen and start animations
function hideLoadingScreen() {
  const loadingScreen = document.querySelector('.loading-screen-block');
  if (loadingScreen) {
    gsap.set(loadingScreen, { display: 'none' }); // Hide the loading screen
  }

  // Start animations immediately after hiding the loading screen
  Animations();
  setTimeout(() => {
    IntoViewAnimationsStart();
  }, 10);
}

// Initial page load
window.addEventListener('load', function () {
  window.history.scrollRestoration = 'manual';
  window.scrollTo(0, 0);
  Smooth();

  // Hide loading screen and start animations
  hideLoadingScreen();

  let resizeTimeout;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(() => {
      ScrollTrigger.refresh();
      if (lenis) {
        lenis.resize();
      }
    }, 200);
  });
});