<script>

gsap.registerPlugin(ScrollTrigger);

// Initialize smooth scrolling with Lenis

// Define clip paths for the mask animation - 16x16 pixel grid
const initialClipPaths = [];
const finalClipPaths = [];

// Generate initial and final clip paths for a 16x16 grid (256 pixels)
for (let row = 0; row < 16; row++) {
  for (let col = 0; col < 16; col++) {
    const x = (col / 16) * 100;
    const y = (row / 16) * 100;
    const nextX = ((col + 1) / 16) * 100;
    const nextY = ((row + 1) / 16) * 100;
    
    // Initial: all pixels start as tiny points
    initialClipPaths.push(`polygon(${x}% ${y}%, ${x}% ${y}%, ${x}% ${y}%, ${x}% ${y}%)`);
    
    // Final: each pixel expands to its full size with slight overlap to prevent gaps
    const overlap = 0.1;
    finalClipPaths.push(`polygon(${Math.max(0, x - overlap)}% ${Math.max(0, y - overlap)}%, ${Math.min(100, nextX + overlap)}% ${Math.max(0, y - overlap)}%, ${Math.min(100, nextX + overlap)}% ${Math.min(100, nextY + overlap)}%, ${Math.max(0, x - overlap)}% ${Math.min(100, nextY + overlap)}%)`);
  }
}

// Create mask elements for all images with the mask-reveal-container class
function createMasks() {
  const containers = document.querySelectorAll(".mask-reveal-container");
  
  containers.forEach(container => {
    const mainImage = container.querySelector(".mask-reveal-image");
    const imgSrc = mainImage.src;
    
    // Create 256 mask elements for 16x16 pixel grid
    for (let i = 1; i <= 256; i++) {
      const mask = document.createElement("div");
      mask.classList.add("mask", `pixel-${i}`);
      
      // Clone the image for each mask
      const maskImg = document.createElement("img");
      maskImg.src = imgSrc;
      maskImg.style.width = "100%";
      maskImg.style.height = "100%";
      maskImg.style.objectFit = "cover";
      maskImg.style.display = "block";
      
      mask.appendChild(maskImg);
      container.appendChild(mask);
    }
    
    // Hide the original image after creating masks
    mainImage.style.visibility = "hidden";
  });
}

// Initialize masks
createMasks();

// Set up the animation for each container
function setupAnimations() {
  const containers = document.querySelectorAll(".mask-reveal-container");
  
  containers.forEach(container => {
    const masks = container.querySelectorAll(".mask");
    
    // Set initial clip paths
    masks.forEach((mask, index) => {
      gsap.set(mask, {
        clipPath: initialClipPaths[index],
      });
    });

    // Create timeline for the animation
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: container,
        start: "top 75%",
        toggleActions: "play none none none"
      },
    });

    // Create center-out reveal pattern
    const center = { row: 7.5, col: 7.5 }; // Center of 16x16 grid
    const pixelsByDistance = [];
    
    // Calculate distance from center for each pixel and group by distance
    for (let row = 0; row < 16; row++) {
      for (let col = 0; col < 16; col++) {
        const index = row * 16 + col;
        const distance = Math.sqrt(Math.pow(row - center.row, 2) + Math.pow(col - center.col, 2));
        
        if (!pixelsByDistance[Math.floor(distance)]) {
          pixelsByDistance[Math.floor(distance)] = [];
        }
        pixelsByDistance[Math.floor(distance)].push(index);
      }
    }

    // Filter out empty slots and flatten into waves
    const pixelWaves = pixelsByDistance.filter(wave => wave && wave.length > 0);

    // Apply animations in waves from center outward
    pixelWaves.forEach((wave, waveIndex) => {
      const targets = wave.map(pixelIndex => masks[pixelIndex]).filter(Boolean);
      
      tl.to(
        targets,
        {
          clipPath: (i, el) => {
            const maskIndex = Array.from(masks).indexOf(el);
            return finalClipPaths[maskIndex];
          },
          duration: 0.3,
          ease: "power2.out",
          stagger: {
            amount: 0.1,
            from: "random"
          },
        },
        waveIndex * 0.08
      );
    });
  });
}

// Initialize animations
setupAnimations();
</script>

<style>
.mask-reveal-container {
  position: relative;
  height: 25vw;
  width: 20vw;
}

.mask-reveal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>

<script>

gsap.registerPlugin(ScrollTrigger);

// Initialize smooth scrolling with Lenis

// Configuration
const GRID_SIZE = 16;
const TOTAL_PIXELS = GRID_SIZE * GRID_SIZE;
const OVERLAP = 0.1;

// Pre-calculate clip paths for better performance
const clipPaths = (() => {
  const initial = [];
  const final = [];
  const gridStep = 100 / GRID_SIZE;
  
  for (let row = 0; row < GRID_SIZE; row++) {
    for (let col = 0; col < GRID_SIZE; col++) {
      const x = col * gridStep;
      const y = row * gridStep;
      const nextX = (col + 1) * gridStep;
      const nextY = (row + 1) * gridStep;
      
      // Initial: all pixels start as tiny points
      initial.push(`polygon(${x}% ${y}%, ${x}% ${y}%, ${x}% ${y}%, ${x}% ${y}%)`);
      
      // Final: each pixel expands to its full size with slight overlap
      final.push(`polygon(${Math.max(0, x - OVERLAP)}% ${Math.max(0, y - OVERLAP)}%, ${Math.min(100, nextX + OVERLAP)}% ${Math.max(0, y - OVERLAP)}%, ${Math.min(100, nextX + OVERLAP)}% ${Math.min(100, nextY + OVERLAP)}%, ${Math.max(0, x - OVERLAP)}% ${Math.min(100, nextY + OVERLAP)}%)`);
    }
  }
  
  return { initial, final };
})();

// Pre-calculate animation waves for center-out pattern
const animationWaves = (() => {
  const center = { row: (GRID_SIZE - 1) / 2, col: (GRID_SIZE - 1) / 2 };
  const pixelsByDistance = new Map();
  
  for (let row = 0; row < GRID_SIZE; row++) {
    for (let col = 0; col < GRID_SIZE; col++) {
      const index = row * GRID_SIZE + col;
      const distance = Math.floor(Math.sqrt(Math.pow(row - center.row, 2) + Math.pow(col - center.col, 2)));
      
      if (!pixelsByDistance.has(distance)) {
        pixelsByDistance.set(distance, []);
      }
      pixelsByDistance.get(distance).push(index);
    }
  }
  
  return Array.from(pixelsByDistance.values()).filter(wave => wave.length > 0);
})();

// Create mask elements with optimized DOM manipulation
function createMasks() {
  const containers = document.querySelectorAll(".mask-reveal-container");
  
  containers.forEach(container => {
    const mainImage = container.querySelector(".mask-reveal-image");
    const imgSrc = mainImage.src;
    
    // Create document fragment for batch DOM insertion
    const fragment = document.createDocumentFragment();
    
    for (let i = 0; i < TOTAL_PIXELS; i++) {
      const mask = document.createElement("div");
      mask.className = "mask";
      
      const maskImg = document.createElement("img");
      maskImg.src = imgSrc;
      maskImg.style.cssText = "width:100%;height:100%;object-fit:cover;display:block";
      
      mask.appendChild(maskImg);
      fragment.appendChild(mask);
    }
    
    container.appendChild(fragment);
    mainImage.style.visibility = "hidden";
  });
}

// Function to clean up masks and show original image
function cleanupMasks(container) {
  const masks = container.querySelectorAll(".mask");
  const mainImage = container.querySelector(".mask-reveal-image");
  
  // Remove all mask elements
  masks.forEach(mask => mask.remove());
  
  // Show the original image
  mainImage.style.visibility = "visible";
  mainImage.style.display = "block";
}

// Optimized animation setup with batch operations
function setupAnimations() {
  const containers = document.querySelectorAll(".mask-reveal-container");
  
  containers.forEach(container => {
    const masks = container.querySelectorAll(".mask");
    
    // Batch set initial clip paths
    gsap.set(masks, {
      clipPath: (index) => clipPaths.initial[index]
    });

    // Create optimized timeline
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: container,
        start: "top 75%",
        toggleActions: "play none none none"
      }
    });

    // Apply animations in pre-calculated waves
    animationWaves.forEach((wave, waveIndex) => {
      const targets = wave.map(pixelIndex => masks[pixelIndex]);
      
      tl.to(targets, {
        clipPath: (i, el) => {
          const maskIndex = Array.from(masks).indexOf(el);
          return clipPaths.final[maskIndex];
        },
        duration: 0.3,
        ease: "power2.out",
        stagger: {
          amount: 0.1,
          from: "random"
        }
      }, waveIndex * 0.08);
    });

    // Add cleanup after animation completes
    tl.call(() => {
      cleanupMasks(container);
    });
  });
}

// Initialize with error handling
try {
  createMasks();
  setupAnimations();
} catch (error) {
  console.error("Animation initialization failed:", error);
}
</script>

<style>
.mask-reveal-container {
  position: relative;
  height: 25vw;
  width: 20vw;
}

.mask-reveal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger, SplitText);

  Promise.race([
    document.fonts.ready,
    new Promise(resolve => setTimeout(resolve, 1000)) // Safari fallback
  ]).then(() => {
    const text = new SplitText("#footer-text", {
      type: "chars",
      linesClass: "line"
    });

    gsap.from(text.chars, {
      yPercent: 100,
      duration: 1,
      ease: "power2.inOut",
      stagger: 0.05,
      scrollTrigger: {
        trigger: "#footer-text",
        start: "bottom bottom",
        end: "bottom top",
        toggleActions: "play reverse play reverse",
        markers: false
      }
    });
  });
});
</script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js';

// Initialize global variables
let scene, renderer, orthoCamera;
let material, plane;
let animationId = null;
let mouse = { x: 0, y: 0 };
let targetMouse = { x: 0, y: 0 };
const container = document.getElementById('godray-container');

// Get custom color from data attribute or use default
function getGodrayColor() {
  const colorAttr = container.getAttribute('data-color');
  if (colorAttr) {
    try {
      return new THREE.Color(colorAttr);
    } catch (e) {
      console.warn('Invalid color format. Using default color.');
    }
  }
  // Default color if not specified or invalid
  return new THREE.Color(1.0, 0.95, 0.85);
}

// Initialize Three.js scene
function init() {
  // Create scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  // Create orthographic camera
  const width = window.innerWidth;
  const height = window.innerHeight;
  orthoCamera = new THREE.OrthographicCamera(
    width / -2, width / 2,
    height / 2, height / -2,
    0.1, 1000
  );
  orthoCamera.position.z = 5;

  // Create renderer
  renderer = new THREE.WebGLRenderer({ 
    antialias: true 
  });
  renderer.domElement.style.position = 'fixed';
  renderer.domElement.style.top = '0';
  renderer.domElement.style.left = '0';
  renderer.domElement.style.width = '100%';
  renderer.domElement.style.height = '100%';
  container.parentNode.replaceChild(renderer.domElement, container);
  renderer.setSize(window.innerWidth, window.innerHeight);

  // Detect if device is mobile
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;

  // Define shader code
  const vertexShader = `
    varying vec2 vUv;
    
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `;

  const fragmentShader = `
    varying vec2 vUv;
    uniform float time;
    uniform float rayIntensity;
    uniform float rayDensity;
    uniform float rayWidth;
    uniform vec2 mouse;
    uniform vec3 customRayColor;
    
    // Noise functions for FBM
    float hash(vec2 p) {
      p = fract(p * vec2(123.34, 456.21));
      p += dot(p, p + 45.32);
      return fract(p.x * p.y);
    }
    
    float noise(vec2 p) {
      vec2 i = floor(p);
      vec2 f = fract(p);
      f = f * f * (3.0 - 2.0 * f);
      
      float a = hash(i);
      float b = hash(i + vec2(1.0, 0.0));
      float c = hash(i + vec2(0.0, 1.0));
      float d = hash(i + vec2(1.0, 1.0));
      
      return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
    }
    
    // FBM (Fractal Brownian Motion)
    float fbm(vec2 p) {
      float value = 0.0;
      float amplitude = 0.5;
      float frequency = 3.0;
      
      for (int i = 0; i < 5; i++) {
        value += amplitude * noise(p * frequency);
        amplitude *= 0.5;
        frequency *= 2.0;
      }
      
      return value;
    }
    
    // Function to create a light ray falling from origin
    float fallingRay(vec2 uv, vec2 origin, vec2 direction, float width, float intensity) {
      // Project point onto ray line
      vec2 rayVec = direction;
      vec2 pointVec = uv - origin;
      
      // Calculate distance from point to ray line
      float t = dot(pointVec, rayVec) / dot(rayVec, rayVec);
      vec2 closestPoint = origin + t * rayVec;
      float distToRay = distance(uv, closestPoint);
      
      // Only consider points that are along the ray direction (t > 0)
      if (t < 0.0) return 0.0;
      
      // Calculate distance from origin along the ray
      float rayDistance = length(pointVec);
      
      // Create ray with distance-based width expansion (more gradual)
      float adjustedWidth = width * (1.0 + t * 0.8);
      
      // Create ray intensity with smooth falloff
      float ray = smoothstep(adjustedWidth, adjustedWidth * 0.1, distToRay) * intensity;
      
      // Apply stronger distance-based falloff for more natural look
      float distanceFalloff = 1.0 / (1.0 + rayDistance * 1.5);
      ray *= distanceFalloff;
      
      // Exponential falloff for more realistic light behavior
      float exponentialFalloff = exp(-rayDistance * 0.3);
      ray *= exponentialFalloff;
      
      // Reduce atmospheric scattering effect for cleaner look
      float noiseEffect = fract(sin(t * 30.0 + time * 0.08) * 4321.0);
      ray *= 0.95 + 0.1 * noiseEffect;
      
      return ray;
    }
    
    void main() {
      // Center UV coordinates (0,0) at center of screen
      vec2 uv = vUv * 2.0 - 1.0;
      
      // Darker background for better contrast
      vec3 baseColor = vec3(0.01, 0.015, 0.03);
      
      // Single origin point at the top center
      vec2 origin = vec2(0.0, 1.4);
      
      // Create multiple rays at different angles
      float rays = 0.0;
      
      // Create several rays with different angles
      int numRays = int(rayDensity);
      for (int i = 0; i < numRays; i++) {
        // Skip if beyond the requested ray density
        if (i >= numRays) break;
        
        // Generate random angle for each ray (narrower spread for more natural look)
        float seed = float(i) * 12.345;
        float angle = mix(-0.8, 0.8, fract(sin(seed) * 43758.5453)); // Reduced spread
        
        // Add subtle time-based variation
        angle += sin(time * 0.03 + float(i) * 0.5) * 0.05;
        
        // Mouse interaction - only for some rays (every 3rd ray)
        if (mod(float(i), 3.0) == 0.0) {
          // Calculate direction towards mouse position
          vec2 mouseDirection = normalize(mouse - origin);
          float mouseAngle = atan(mouseDirection.x, -mouseDirection.y);
          
          // Blend between original angle and mouse direction
          float influence = 0.3; // How much the mouse affects the ray
          angle = mix(angle, mouseAngle, influence);
        }
        
        // Calculate direction vector from angle
        vec2 direction = vec2(sin(angle), -cos(angle));
        
        // More consistent width and intensity for natural look
        float baseWidth = rayWidth;
        float width = mix(baseWidth * 0.6, baseWidth * 1.0, fract(sin(seed * 2.0) * 43758.5453));
        
        float intensity = mix(0.4, 0.7, fract(sin(seed * 3.0) * 43758.5453));
        intensity *= (0.8 + 0.2 * sin(time * 0.05 + float(i) * 0.7)); // Subtle breathing
        
        // Enhanced intensity for mouse-following rays
        if (mod(float(i), 3.0) == 0.0) {
          intensity *= 1.3; // Make mouse-following rays brighter
        }
        
        // Add ray
        rays += fallingRay(uv, origin, direction, width, intensity);
      }
      
      // More conservative intensity adjustment
      rays = min(rays * 0.3 * rayIntensity, 1.0);
      
      // Bright light source at top that fades naturally
      float distFromOrigin = distance(uv, origin);
      float lightSource = exp(-distFromOrigin * 2.0) * 0.8;
      
      // Use custom color from HTML attribute
      vec3 rayColor = customRayColor;
      
      // Enhanced gradient for natural light falloff
      float gradientFactor = 1.0 - smoothstep(0.0, 2.5, distFromOrigin);
      vec3 nearColor = customRayColor * 1.1;     // Brighter version of custom color near origin
      vec3 farColor = customRayColor * 0.8;     // Dimmer version of custom color far from origin
      rayColor = mix(farColor, nearColor, pow(gradientFactor, 1.5));
      
      // Vertical gradient for more natural light behavior
      float verticalGradient = smoothstep(-1.0, 0.5, uv.y);
      rays *= verticalGradient;
      lightSource *= verticalGradient;
      
      // Softer vignette effect
      float vignette = 1.0 - smoothstep(0.3, 2.0, length(uv));
      rays *= vignette;
      
      // Subtle FBM for natural variation
      vec2 fbmUV = uv * 0.3 + vec2(time * 0.008, time * 0.012);
      float fbmValue = fbm(fbmUV);
      
      // Gentle FBM modulation
      float fbmModulation = mix(0.9, 1.1, fbmValue);
      rays *= fbmModulation;
      
      // Smooth blending of base color with rays
      vec3 color = mix(baseColor, rayColor, rays * 0.8);
      
      // Add the bright light source at the top
      color += lightSource * nearColor;
      
      // Subtle atmospheric haze
      vec3 hazeColor = vec3(0.5, 0.6, 0.7) * rays;
      float hazeAmount = 0.02 + 0.01 * fbm(uv * 0.5 + time * 0.03);
      color = mix(color, hazeColor, hazeAmount * 0.5);
      
      // Very subtle color variation
      vec3 fbmColor = vec3(fbmValue * 0.04, fbmValue * 0.02, fbmValue * 0.06);
      color += fbmColor * rays * 0.08;
      
      gl_FragColor = vec4(color, 1.0);
    }
  `;

  // Get custom ray color from HTML data attribute
  const rayColor = getGodrayColor();
  
  // Create full screen plane with shader material
  const planeGeometry = new THREE.PlaneGeometry(width, height);
  material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      time: { value: 0.0 },
      rayIntensity: { value: 3.0 },
      rayDensity: { value: isMobile ? 30.0 : 60.0 }, // Fewer rays on mobile
      rayWidth: { value: isMobile ? 0.12 : 0.05}, // Thicker rays on mobile
      mouse: { value: new THREE.Vector2(0.0, 0.0) },
      customRayColor: { value: new THREE.Vector3(rayColor.r, rayColor.g, rayColor.b) }
    }
  });

  plane = new THREE.Mesh(planeGeometry, material);
  scene.add(plane);

  // Add event listeners
  window.addEventListener('mousemove', handleMouseMove);
  window.addEventListener('resize', handleResize);
}

// Mouse move handler
function handleMouseMove(event) {
  // Convert mouse coordinates to normalized device coordinates (-1 to +1)
  targetMouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  targetMouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

// Handle window resize
function handleResize() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  
  orthoCamera.left = width / -2;
  orthoCamera.right = width / 2;
  orthoCamera.top = height / 2;
  orthoCamera.bottom = height / -2;
  orthoCamera.updateProjectionMatrix();
  
  renderer.setSize(width, height);
  
  // Update plane size to match new window dimensions
  if (plane) {
    plane.geometry.dispose();
    plane.geometry = new THREE.PlaneGeometry(width, height);
  }
  
  // Update mobile-specific settings on resize
  const isMobileNow = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
  if (material) {
    material.uniforms.rayDensity.value = isMobileNow ? 30.0 : 60.0;
    material.uniforms.rayWidth.value = isMobileNow ? 0.12 : 0.05;
  }
}

// Animation loop
function animate() {
  // Lerp mouse position for smooth following
  const lerpFactor = 0.005; // Adjust this value to control the smoothness (0 = no movement, 1 = instant)
  mouse.x += (targetMouse.x - mouse.x) * lerpFactor;
  mouse.y += (targetMouse.y - mouse.y) * lerpFactor;

  // Update time uniform for animation
  if (material) {
    material.uniforms.time.value += 0.1;
    // Update smoothly interpolated mouse position in shader
    material.uniforms.mouse.value.set(mouse.x, mouse.y);
  }
  
  renderer.render(scene, orthoCamera);
  
  animationId = requestAnimationFrame(animate);
}

// Cleanup function
function cleanup() {
  // Cancel animation frame
  if (animationId) {
    cancelAnimationFrame(animationId);
    animationId = null;
  }

  // Remove event listeners
  window.removeEventListener('resize', handleResize);
  window.removeEventListener('mousemove', handleMouseMove);

  // Dispose of Three.js objects
  if (plane) {
    plane.geometry.dispose();
  }
  if (material) {
    material.dispose();
  }
  if (renderer) {
    renderer.dispose();
  }
}

// Initialize when the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  init();
  animate();
});

// Clean up on page unload
window.addEventListener('beforeunload', cleanup);
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Get all cards
    const cards = document.querySelectorAll('.steps_card');

    // Apply the gradient effect to each card
    cards.forEach(card => {
        const gradient = card.querySelector('.gradient');

        // Show gradient when mouse enters the card
        card.addEventListener('mouseenter', () => {
            gradient.style.opacity = 1;
        });

        // Hide gradient when mouse leaves the card
        card.addEventListener('mouseleave', () => {
            gradient.style.opacity = 0;
        });

        // Move gradient to follow mouse position
        card.addEventListener('mousemove', (e) => {
            // Get position of mouse relative to the card
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            // Position the gradient at mouse position
            gradient.style.left = x + 'px';
            gradient.style.top = y + 'px';
        });
    });
});

</script>

<script>

// Process text elements and wrap keywords
function processTextElements() {
  const keywords = [
    "vibrant", "living", "clarity", "expression", "shape", 
    "intuitive", "storytelling", "interactive", "vision"
  ];

  document.querySelectorAll(".anime-text p").forEach(paragraph => {
    const words = paragraph.textContent.split(/\s+/);
    paragraph.innerHTML = '';

    words.forEach(word => {
      if (!word.trim()) return;
      
      const wrapper = document.createElement("div");
      wrapper.className = "word";
      
      const wordSpan = document.createElement("span");
      wordSpan.textContent = word;
      
      const cleanWord = word.toLowerCase().replace(/[^\w]/g, "");
      if (keywords.includes(cleanWord)) {
        wrapper.classList.add("keyword-wrapper");
        wordSpan.classList.add("keyword", cleanWord);
      }
      
      wrapper.appendChild(wordSpan);
      paragraph.appendChild(wrapper);
    });
  });
}

// Create animation timeline for a container
function createAnimationTimeline(container) {
  const words = container.querySelectorAll(".word");
  const wordSpans = container.querySelectorAll(".word span");
  const bgColor = "60, 60, 60";
  
  // Set initial styles
  gsap.set(words, { opacity: 0 });
  gsap.set(wordSpans, { opacity: 0 });
  gsap.set(words, { backgroundColor: `rgba(${bgColor}, 1)` });

  // Create master timeline
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
      pin: container,
      start: "top top",
      end: `+=${window.innerHeight * 4}`,
      pinSpacing: true,
      scrub: 1
    }
  });

  // Animation sequence
  tl.to(words, {
    opacity: 1,
    duration: 0.3,
    stagger: { amount: 2.5 }
  })
  .to(words, {
    backgroundColor: `rgba(${bgColor}, 0)`,
    duration: 0.4,
    stagger: { amount: 2.5 }
  }, "<+=0.5")
  .to(wordSpans, {
    opacity: 1,
    duration: 0.2,
    stagger: { amount: 2.5 }
  }, "<");

  tl.to(wordSpans, {
    opacity: 0,
    duration: 0.3,
    stagger: { amount: 2.5 }
  },"b")
  .to(words, {
    backgroundColor: `rgba(${bgColor}, 1)`,
    duration: 0.3,
    stagger: { amount: 2.5 }
  }, "<+=0.05")

  return tl;
}

// Main initialization
document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);
  
 // initSmoothScroll();
  processTextElements();
  
  // Create animations for each container
  document.querySelectorAll(".anime-text-container").forEach(container => {
    createAnimationTimeline(container);
  });
});
</script>

<script src="https://unpkg.com/lenis@1.1.5/dist/lenis.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  function animateFontWeight(textElement, container) {
    const startWeight = parseInt(container.getAttribute('af-start-weight')) || 100;
    const endWeight = parseInt(container.getAttribute('af-end-weight')) || 900;
    
    gsap.fromTo(
      textElement,
      { fontWeight: startWeight },
      {
        fontWeight: endWeight,
        duration: 1,
        ease: "none",
        scrollTrigger: {
          trigger: container,
          start: "top bottom",
          end: "bottom top",
          scrub: true,
        },
      }
    );
  }

  const marqueeContainers = document.querySelectorAll(".anim_contain");

  marqueeContainers.forEach((container, index) => {
    const textElement = container.querySelector(".anim_text h2");
    
    if (textElement) {
      animateFontWeight(textElement, container);
    }
  });

  const lenis = new Lenis();
  lenis.on("scroll", ScrollTrigger.update);
  gsap.ticker.add((time) => lenis.raf(time * 1000));
  gsap.ticker.lagSmoothing(0);
});

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>

const tl = gsap.timeline();
const tl2 = gsap.timeline();


tl.to(".a-img", {
    duration: 2.5,
    opacity: 1
})
tl.to("#logo",{
    left: "50%",
    duration: .5,
    ease: "power2.inOut",
})
tl.to("#logo-text p span",{
    color: "#525252",
    duration: .5,
    stagger: 0.3,
    ease: "power2.inOut",
},'a')

tl.to("#logo-text p span",{
    color: "white",
    duration: 1.5,
    stagger: 0.3,
    ease: "power2.inOut",
    delay: 1.5,
},'a')




tl2.to("#prog1 h2",{
    transform: "translateY(0%)",
    duration: 1,
    ease: "power2.inOut",
})
tl2.to("#prog1 h2",{
    duration: 1,
})
tl2.to("#prog1 h2",{
    transform: "translateY(-100%)",
    duration: 1,
    ease: "power2.inOut",
},'b')
tl2.to("#prog2 h2",{
    transform: "translateY(0%)",
    duration: 1,
    ease: "power2.inOut",
},'b')
tl2.to("#prog2 h2",{
    duration: 1,
})
tl2.to("#prog2 h2",{
    transform: "translateY(-100%)",
    duration: 1,
    ease: "power2.inOut",
},'c')
tl2.to("#prog3 h2",{
    transform: "translateY(0%)",
    duration: 1,
    ease: "power2.inOut",
},'c')
tl2.to("#prog3 h2",{
    duration: 1,
})
tl2.to("#prog3 h2",{
    transform: "translateY(-100%)",
    duration: 1,
    ease: "power2.inOut",
},'d')
tl2.to("#prog4 h2",{
    transform: "translateY(0%)",
    duration: 1,
    ease: "power2.inOut",
},'d')

tl2.to("#loader",{
    top: "-150%",
    duration: 1,
    ease: "power2.inOut",
    delay: .3,
},'l')
tl2.to("#loader2",{
    top: "-150%",
    duration: 1.1,
    ease: "power2.inOut",
    delay: .3,
},'l')
tl2.to("#loader3",{
    top: "-150%",
    duration: 1.2,
    ease: "power2.inOut",
    delay: .3,
},'l')

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.module.js",
    "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.162.0/examples/jsm/"
  }
}
</script>

<script type="module">

import * as THREE from "three"
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

const particlesVertexShader = `
uniform vec2 uResolution;
uniform float uSize;
uniform float uProgress;
uniform vec3 uColorA;
uniform vec3 uColorB;

attribute vec3 aPositionTarget;
attribute float aSize;

varying vec3 vColor;

vec4 permute(vec4 x){ return mod(((x*34.0)+1.0)*x, 289.0); }
vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r; }

float simplexNoise3d(vec3 v)
{
    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

    // First corner
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 =   v - i + dot(i, C.xxx) ;

    // Other corners
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );

    //  x0 = x0 - 0. + 0.0 * C 
    vec3 x1 = x0 - i1 + 1.0 * C.xxx;
    vec3 x2 = x0 - i2 + 2.0 * C.xxx;
    vec3 x3 = x0 - 1. + 3.0 * C.xxx;

    // Permutations
    i = mod(i, 289.0 ); 
    vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))  + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

    // Gradients
    // ( N*N points uniformly over a square, mapped onto an octahedron.)
    float n_ = 1.0/7.0; // N=7
    vec3  ns = n_ * D.wyz - D.xzx;

    vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  //  mod(p,N*N)

    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);

    vec4 b0 = vec4( x.xy, y.xy );
    vec4 b1 = vec4( x.zw, y.zw );

    vec4 s0 = floor(b0)*2.0 + 1.0;
    vec4 s1 = floor(b1)*2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));

    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

    vec3 p0 = vec3(a0.xy,h.x);
    vec3 p1 = vec3(a0.zw,h.y);
    vec3 p2 = vec3(a1.xy,h.z);
    vec3 p3 = vec3(a1.zw,h.w);

    // Normalise gradients
    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;

    // Mix final noise value
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
}

void main()
{
    // Mixed position
    float noiseOrigin = simplexNoise3d(position * 0.2);
    float noiseTarget = simplexNoise3d(aPositionTarget * 0.2);
    float noise = mix(noiseOrigin, noiseTarget, uProgress);
    noise = smoothstep(-1.0, 1.0, noise);
    
    float duration = 0.4;
    float delay = (1.0 - duration) * noise;
    float end = delay + duration;
    float progress = smoothstep(delay, end, uProgress);
    vec3 mixedPosition = mix(position, aPositionTarget, progress);

    // Final position
    vec4 modelPosition = modelMatrix * vec4(mixedPosition, 1.0);
    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectedPosition = projectionMatrix * viewPosition;
    gl_Position = projectedPosition;

    // Point size
    gl_PointSize = aSize * uSize * uResolution.y;
    gl_PointSize *= (1.0 / - viewPosition.z);

    // Varyings
    vColor = mix(uColorA, uColorB, noise);
}
`

const particlesFragmentShader = `

varying vec3 vColor;

void main()
{
    vec2 uv = gl_PointCoord;
    float distanceToCenter = length(uv - 0.5);
    float alpha = 0.05 / distanceToCenter - 0.1;
    
    gl_FragColor = vec4(vColor, alpha);
    #include <tonemapping_fragment>
    #include <colorspace_fragment>
}

`

// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger)

/**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Loaders
// const dracoLoader = new DRACOLoader()
// dracoLoader.setDecoderPath('./draco/')
const gltfLoader = new GLTFLoader()
// gltfLoader.setDRACOLoader(dracoLoader)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight,
    pixelRatio: Math.min(window.devicePixelRatio, 2)
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
    sizes.pixelRatio = Math.min(window.devicePixelRatio, 2)

    // Materials
    if(particles)
        particles.material.uniforms.uResolution.value.set(sizes.width * sizes.pixelRatio, sizes.height * sizes.pixelRatio)

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(sizes.pixelRatio)
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(35, sizes.width / sizes.height, 0.1, 100)
camera.position.set(0, 0, 8 * 2)
scene.add(camera)

// Controls
/*const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true */

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true,
    alpha: true,
})

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(sizes.pixelRatio)
// renderer.setClearColor('#160920')

/**
 * Particles
 */
let particles = null

gltfLoader.load('https://cdn.jsdelivr.net/gh/Anyflowagency/3d-model/models3.glb', (gltf) =>
{
    particles = {}
    particles.index = 0

    // Positions
    const positions = gltf.scene.children.map(child => child.geometry.attributes.position)

    particles.maxCount = 0
    for(const position of positions)
    {
        if(position.count > particles.maxCount)
            particles.maxCount = position.count
    }

    particles.positions = []
    for(const position of positions)
    {
        const originalArray = position.array
        const newArray = new Float32Array(particles.maxCount * 3)

        for(let i = 0; i < particles.maxCount; i++)
        {
            const i3 = i * 3

            if(i3 < originalArray.length)
            {
                newArray[i3 + 0] = originalArray[i3 + 0]
                newArray[i3 + 1] = originalArray[i3 + 1]
                newArray[i3 + 2] = originalArray[i3 + 2]
            }
            else
            {
                const randomIndex = Math.floor(position.count * Math.random()) * 3
                newArray[i3 + 0] = originalArray[randomIndex + 0]
                newArray[i3 + 1] = originalArray[randomIndex + 1]
                newArray[i3 + 2] = originalArray[randomIndex + 2]
            }
        }

        particles.positions.push(new THREE.Float32BufferAttribute(newArray, 3))
    }
    
    // Geometry
    const sizesArray = new Float32Array(particles.maxCount)

    for(let i = 0; i < particles.maxCount; i++)
	    sizesArray[i] = Math.random()

    particles.geometry = new THREE.BufferGeometry()
    particles.geometry.setAttribute('position', particles.positions[particles.index])
    particles.geometry.setAttribute('aPositionTarget', particles.positions[3])
    particles.geometry.setAttribute('aSize', new THREE.BufferAttribute(sizesArray, 1))


    // Material
    particles.colorA = '#730fff'
    particles.colorB = '#009e6f'

    particles.material = new THREE.ShaderMaterial({
        vertexShader: particlesVertexShader,
        fragmentShader: particlesFragmentShader,
        uniforms:
        {
            uSize: new THREE.Uniform(0.4),
            uResolution: new THREE.Uniform(new THREE.Vector2(sizes.width * sizes.pixelRatio, sizes.height * sizes.pixelRatio)),
            uProgress: new THREE.Uniform(0),
            uColorA: new THREE.Uniform(new THREE.Color(particles.colorA)),
            uColorB: new THREE.Uniform(new THREE.Color(particles.colorB))
        },
        blending: THREE.AdditiveBlending,
        depthWrite: false
    })

    // Points
    particles.points = new THREE.Points(particles.geometry, particles.material)
    particles.points.frustumCulled = false
    scene.add(particles.points)

    // Methods
    particles.morph = (index) =>
    {
        // Update attributes
        particles.geometry.attributes.position = particles.positions[particles.index]
        particles.geometry.attributes.aPositionTarget = particles.positions[index]

        // Animate uProgress
        gsap.fromTo(
            particles.material.uniforms.uProgress,
            { value: 0 },
            { value: 1, duration: 1, ease: 'linear' } // Reduced duration for faster response
        )

        // Save index
        particles.index = index
    }

    // Page and transition state management
    let isTransitioning = false
    let currentPageIndex = 0
    let targetPageIndex = 0
    let morphTween = null
    let lastScrollTime = 0
    const SCROLL_DELAY = 300 // 300ms delay to determine final target

    const handleMorph = (index) => {
        // Update target page index
        targetPageIndex = index
        
        // If already transitioning, wait for it to complete
        if (isTransitioning) {
            return
        }

        // Start the transition
        startMorph(index)
    }

    const startMorph = (index) => {
        if (isTransitioning || currentPageIndex === index) return

        isTransitioning = true
        currentPageIndex = index

        // Kill any existing tween
        if (morphTween) {
            morphTween.kill()
        }

        // Start the morph animation
        particles.morph(index)

        // Create a tween to track the progress
        morphTween = gsap.to(particles.material.uniforms.uProgress, {
            value: 1,
            duration: 2,
            ease: 'power1.inOut',
            onComplete: () => {
                isTransitioning = false
                // If we have a new target page while transitioning, start that transition
                if (targetPageIndex !== currentPageIndex) {
                    startMorph(targetPageIndex)
                }
            }
        })
    }

    // Initialize first model
    startMorph(0)

    // Create ScrollTrigger instances for each page
    const pages = document.querySelectorAll('.page')
    
    pages.forEach((page, index) => {
        ScrollTrigger.create({
            trigger: page,
            start: "top top",
            end: "bottom top",
            onEnter: () => {
                handleMorph(index)
            },
            onEnterBack: () => {
                handleMorph(index)
            }
        })
    })
})

/**
 * Animate
 */
const tick = () =>
{
    // Update controls
  //  controls.update()

    // Render normal scene
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()
</script>

<script src="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.min.js"></script>

<script type="module">

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.module.js';

// smooth scroll (lenis)
let scroll = {
  scrollY: window.scrollY,
  scrollVelocity: 0
};

const lenis = new Lenis({
  lerp: 0.08,
});

lenis.on('scroll', (e) => {
  scroll.scrollY = window.scrollY;
  scroll.scrollVelocity = e.velocity;
});

function scrollRaf(time) {
  lenis.raf(time);
  requestAnimationFrame(scrollRaf);
}

requestAnimationFrame(scrollRaf);

// Three.js setup
const scene = new THREE.Scene();
const distance = 500;
const fov = 2 * Math.atan(window.innerHeight / 2 / distance) * (180 / Math.PI);
const camera = new THREE.PerspectiveCamera(
  fov,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer({ 
  canvas: document.getElementById('canvas'), 
  alpha: true,
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = distance;

// Shaders
const vertexShader = `
  varying vec2 vUv;
  uniform float uVelocity;

  void main() {
    vec3 newPosition = position;
    newPosition.y += sin(uv.x * 3.14) * uVelocity * 3.0;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
    vUv = uv;
  }
`;

const fragmentShader = `
  varying vec2 vUv;
  uniform sampler2D uTexture;
  uniform vec2 uContainerSize;
  uniform vec2 uImageSize;

  vec2 cover(vec2 uv, vec2 containerSize, vec2 imageSize) {
    float containerRatio = containerSize.x / containerSize.y;
    float imageRatio = imageSize.x / imageSize.y;
    vec2 scale;
    vec2 offset;
    
    if(imageRatio > containerRatio) {
      scale = vec2(containerSize.y / imageSize.y);
      offset = vec2((containerSize.x - imageSize.x * scale.x) * 0.5, 0.0);
    } else {
      scale = vec2(containerSize.x / imageSize.x);
      offset = vec2(0.0, (containerSize.y - imageSize.y * scale.y) * 0.5);
    }
    
    return (uv * containerSize - offset) / (imageSize * scale);
  }
  
  void main() {
    vec2 uv = cover(vUv, uContainerSize, uImageSize);
    gl_FragColor = texture2D(uTexture, uv);
  }
`;

// Image planes setup
const images = document.querySelectorAll('.scroll-img img');
const planes = [];
const textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = 'anonymous';

// Loading state
document.body.classList.add('loading');

const createPlane = (image, index) => {
  const container = image.parentElement;
  const bounds = container.getBoundingClientRect();
  const geometry = new THREE.PlaneGeometry(bounds.width, bounds.height, 12, 12);

  return new Promise((resolve) => {
    textureLoader.load(image.src, (texture) => {
      texture.minFilter = THREE.LinearFilter;
      texture.magFilter = THREE.LinearFilter;
      texture.generateMipmaps = true;
      texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
      texture.needsUpdate = true;

      const material = new THREE.ShaderMaterial({
        uniforms: {
          uTime: { value: 0 },
          uTexture: { value: texture },
          uContainerSize: { value: new THREE.Vector2(bounds.width, bounds.height) },
          uImageSize: { value: new THREE.Vector2(texture.image.naturalWidth, texture.image.naturalHeight) },
          uVelocity: { value: 0 }
        },
        vertexShader,
        fragmentShader,
      });

      const plane = new THREE.Mesh(geometry, material);
      plane.position.set(
        bounds.left - window.innerWidth / 2 + bounds.width / 2,
        -bounds.top + window.innerHeight / 2 - bounds.height / 2,
        0
      );

      planes[index] = plane;
      scene.add(plane);
      resolve();
    });
  });
};

// Load all textures and show content when done
Promise.all(Array.from(images).map((image, index) => createPlane(image, index)))
  .then(() => {
    document.body.classList.remove('loading');
  })
  .catch((error) => {
    console.error('Error loading textures:', error);
  });

// Update plane positions - throttled to improve performance
let ticking = false;
const updatePlanePositions = () => {
  planes.forEach((plane, index) => {
    if (!plane) return;
    const bounds = images[index].parentElement.getBoundingClientRect();
    plane.position.set(
      bounds.left - window.innerWidth / 2 + bounds.width / 2,
      -bounds.top + window.innerHeight / 2 - bounds.height / 2,
      0
    );
  });
  ticking = false;
};

// Animation loop with optimizations
const animate = () => {
  requestAnimationFrame(animate);
  
  // Update velocity for all planes
  planes.forEach(plane => {
    if (plane?.material) {
      plane.material.uniforms.uVelocity.value = scroll.scrollVelocity;
    }
  });

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

animate();

// Handle window resize
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>

<script>

const lenis = new Lenis();

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);


gsap.registerPlugin(ScrollTrigger);


const tl = gsap.timeline({
    scrollTrigger: {
        trigger: ".last",
        start: "top top",
        end: "+=300%",
        scrub: true,
        pin: true,
        // markers: true,
    }
})

tl.to(".line", {
    scaleX: 1,
    onUpdate: function() {
        const progress = this.progress();
        if(progress > 0.8) {
            window.location.href = '/works';
        }
    },
    onComplete: () => {
        tl.to(".line", {
            scaleX: 0,
        });
    }
})
</script>

<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@latest/bundled/lenis.min.js"></script>

<script>

const lenis = new Lenis({
  smoothWheel: true,
  lerp: 0.1
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)


// Parallax effect class for images with parallax class
class ParallaxEffect {
  constructor(lenisInstance) {
    this.lenis = lenisInstance;
    this.parallaxElements = document.querySelectorAll('.parallax');
    this.init();
  }

  init() {
    if (!this.lenis) {
      console.error('Lenis instance is required for parallax effect');
      return;
    }
    
    this.lenis.on('scroll', this.handleScroll.bind(this));
  }

  handleScroll({ scroll }) {
    const windowHeight = window.innerHeight;
    const windowWidth = window.innerWidth;
    const scrollPosition = scroll;
    
    // Calculate strength modifier based on device dimensions
    // For mobile or portrait orientation (height > width), reduce strength
    const isMobileOrPortrait = windowWidth < 768 || (windowHeight > windowWidth);
    const strengthModifier = isMobileOrPortrait ? 0.5 : 1; // Reduce to 50% on mobile/portrait
    
    this.parallaxElements.forEach(element => {
      const image = element.querySelector('img');
      if (!image) return;
      
      const elementTop = element.offsetTop;
      const elementHeight = element.offsetHeight;
      
      if (scrollPosition + windowHeight > elementTop && 
          scrollPosition < elementTop + elementHeight) {
        
        // Get the strength from the attribute or use default 0.1
        // Apply the strength modifier for mobile/portrait devices
        const baseStrength = element.getAttribute('af-strength') || 0.1;
        const adjustedStrength = parseFloat(baseStrength) * strengthModifier;
        
        const parallaxValue = (scrollPosition - elementTop + windowHeight) * adjustedStrength;
        image.style.transform = `translateY(${parallaxValue}px)`;
      }
    });
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new ParallaxEffect(lenis);
});

</script>