script.js

document.addEventListener("DOMContentLoaded", () => {
  // --- Global Variables ---
  const container = document.getElementById("container");
  let scene,
    camera,
    renderer,
    cakeGroup,
    giftGroup,
    photoFrame,
    galaxy,
    photoFrameLight,
    giftBoxLight,
    floorGlowLight;
  // NEW GLOBAL VARIABLE FOR THE SECOND FRAME
  let photoFrame2;
  let photoFrameLight2;
  // END NEW GLOBAL VARIABLES
  const candles = [];
  const confettiPieces = [];
  const balloons = [];
  let textMesh;
  let audioContext; // State variables

  let candlesLit = true;
  let isDragging = false;
  let previousMousePosition = { x: 0, y: 0 }; // --- GSAP-like animation helper ---

  const gsapAnimate = (obj, props, duration, onComplete) => {
    const start = {};
    const change = {};
    Object.keys(props).forEach((key) => {
      start[key] = obj[key];
      change[key] = props[key] - start[key];
    });

    let progress = 0;
    const step = 1 / (duration * 60);

    const animate = () => {
      progress += step;
      if (progress >= 1) {
        Object.keys(props).forEach((key) => (obj[key] = props[key]));
        if (onComplete) onComplete();
        return;
      }

      const eased = 1 - Math.pow(1 - progress, 3);
      Object.keys(props).forEach((key) => {
        obj[key] = start[key] + change[key] * eased;
      });
      requestAnimationFrame(animate);
    };
    animate();
  }; // --- Scene Initialization ---

  const initScene = () => {
    if (!container) return;

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(
      75,
      container.clientWidth / container.clientHeight,
      0.1,
      1000
    );
    camera.position.set(0, 3, 8);
    camera.lookAt(0, 1, 0);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.shadowMap.enabled = true;
    container.appendChild(renderer.domElement); // --- Create Objects --- // Galaxy Background (Stars) - (Unchanged)

    const createGalaxy = () => {
      const galaxyGeometry = new THREE.BufferGeometry();
      const galaxyCount = 15000;
      const positions = new Float32Array(galaxyCount * 3);
      const colors = new Float32Array(galaxyCount * 3);
      const galaxyColors = [
        new THREE.Color(0x4a0e78),
        new THREE.Color(0x8e44ad),
        new THREE.Color(0xff1493),
        new THREE.Color(0x00ffff),
        new THREE.Color(0xff69b4),
        new THREE.Color(0x9370db),
      ];

      for (let i = 0; i < galaxyCount; i++) {
        const i3 = i * 3;
        const radius = Math.random() * 50;
        const angle = Math.random() * Math.PI * 2;
        const branch = Math.floor(Math.random() * 5);
        const branchAngle = (branch / 5) * Math.PI * 2;

        const randomX =
          Math.pow(Math.random(), 3) * (Math.random() < 0.5 ? 1 : -1) * 3;
        const randomY =
          Math.pow(Math.random(), 3) * (Math.random() < 0.5 ? 1 : -1) * 3;
        const randomZ =
          Math.pow(Math.random(), 3) * (Math.random() < 0.5 ? 1 : -1) * 3;

        positions[i3] = Math.cos(angle + branchAngle) * radius + randomX;
        positions[i3 + 1] = randomY;
        positions[i3 + 2] = Math.sin(angle + branchAngle) * radius + randomZ;

        const color =
          galaxyColors[Math.floor(Math.random() * galaxyColors.length)];
        colors[i3] = color.r;
        colors[i3 + 1] = color.g;
        colors[i3 + 2] = color.b;
      }

      galaxyGeometry.setAttribute(
        "position",
        new THREE.BufferAttribute(positions, 3)
      );
      galaxyGeometry.setAttribute(
        "color",
        new THREE.BufferAttribute(colors, 3)
      );

      const galaxyMaterial = new THREE.PointsMaterial({
        size: 0.2,
        sizeAttenuation: true,
        depthWrite: false,
        blending: THREE.AdditiveBlending,
        vertexColors: true,
      });

      galaxy = new THREE.Points(galaxyGeometry, galaxyMaterial);
      scene.add(galaxy);

      const starsGeometry = new THREE.BufferGeometry();
      const starVertices = [];
      for (let i = 0; i < 500; i++) {
        starVertices.push(
          (Math.random() - 0.5) * 100,
          Math.random() * 50 + 10,
          (Math.random() - 0.5) * 100
        );
      }
      starsGeometry.setAttribute(
        "position",
        new THREE.Float32BufferAttribute(starVertices, 3)
      );

      const starsMaterial = new THREE.PointsMaterial({
        color: 0xffffff,
        size: 0.3,
        sizeAttenuation: true,
        transparent: true,
        opacity: 0.9,
      });
      scene.add(new THREE.Points(starsGeometry, starsMaterial));
    };
    createGalaxy();

    scene.add(new THREE.AmbientLight(0xffffff, 0.6));
    const pointLight = new THREE.PointLight(0xffffff, 1.5, 100);
    pointLight.position.set(0, 5, 5);
    pointLight.castShadow = true;
    scene.add(pointLight);
    scene.add(new THREE.PointLight(0x8e44ad, 2, 50).position.set(-5, 3, -5));
    scene.add(new THREE.PointLight(0xff69b4, 2, 50).position.set(5, 3, -5)); // Floor and Table (Unchanged)

    const floorMaterial = new THREE.MeshStandardMaterial({
      color: 0x1a0033,
      metalness: 0.8,
      roughness: 0.2,
    });
    const floor = new THREE.Mesh(
      new THREE.PlaneGeometry(30, 30),
      floorMaterial
    );
    floor.rotation.x = -Math.PI / 2;
    floor.receiveShadow = true;
    scene.add(floor);

    const tableMaterial = new THREE.MeshStandardMaterial({
      color: 0x4a0e78,
      metalness: 0.5,
      roughness: 0.5,
    });
    const table = new THREE.Mesh(
      new THREE.BoxGeometry(4, 0.2, 3),
      tableMaterial
    );
    table.position.y = 1;
    table.castShadow = true;
    scene.add(table); // --- NEW: Purple Floor Glow Light (below the table/cake) ---

    floorGlowLight = new THREE.PointLight(0x9333ea, 10, 40); // Bright purple light
    floorGlowLight.position.set(2, 0.5, 0); // Below the table, aimed up
    floorGlowLight.visible = false;
    scene.add(floorGlowLight); // Photo Frame (Initial image load fixed to use TextureLoader)

    const frameGroup = new THREE.Group();
    const frameBorder = new THREE.Mesh(
      new THREE.BoxGeometry(2.8, 2.8, 0.1),
      new THREE.MeshStandardMaterial({
        color: 0xffd700,
        metalness: 1,
        emissive: 0xffaa00,
        emissiveIntensity: 1,
      })
    );
    frameBorder.castShadow = true;
    frameGroup.add(frameBorder);

    const photoPlane = new THREE.Mesh(
      new THREE.PlaneGeometry(4.8, 4.8),
      new THREE.MeshBasicMaterial({ color: 0xffffff })
    );
    photoPlane.position.z = 0.06;
    frameGroup.add(photoPlane); // Load image for the photo frame directly from assets

    new THREE.TextureLoader().load(
      "./assets/anna-pic.png", // 👈 CHANGE THIS PATH to your actual photo file
      (texture) => {
        photoPlane.material.map = texture;
        photoPlane.material.needsUpdate = true;
      },
      undefined,
      (error) => {
        console.error("Error loading photo frame image:", error);
      }
    );

    frameGroup.position.set(0, 3, -3);
    scene.add(frameGroup);
    photoFrame = { group: frameGroup, plane: photoPlane };

    photoFrameLight = new THREE.PointLight(0xffaa00, 1.5, 5);
    photoFrameLight.position.set(0, 3, -2.9);
    photoFrameLight.visible = false;
    scene.add(photoFrameLight);

    // Third one

    // --- 1. Create the Group and Border for Frame 3 ---
    const frameGroup3 = new THREE.Group();
    const frameBorder3 = new THREE.Mesh(
      new THREE.BoxGeometry(2.8, 2.8, 0.1),
      new THREE.MeshStandardMaterial({
        // You can change the color if you want a different frame
        color: 0xffd700,
        metalness: 1,
        emissive: 0xffaa00,
        emissiveIntensity: 1,
      })
    );
    frameBorder3.castShadow = true;
    frameGroup3.add(frameBorder3);

    // --- 2. Create the Photo Plane ---
    const photoPlane3 = new THREE.Mesh(
      new THREE.PlaneGeometry(4.8, 4.8),
      new THREE.MeshBasicMaterial({ color: 0xffffff })
    );
    // Adjust the position of the plane relative to the border
    photoPlane3.position.z = 1;
    photoPlane3.position.x = 1;
    frameGroup3.add(photoPlane3);

    // --- 3. Load the Image for Frame 3 ---
    new THREE.TextureLoader().load(
      "./assets/anna-pic.png", // 👈 IMPORTANT: CHANGE THIS PATH to your third image
      (texture) => {
        photoPlane3.material.map = texture;
        photoPlane3.material.needsUpdate = true;
      },
      undefined,
      (error) => {
        console.error("Error loading third photo frame image:", error);
      }
    );

    // --- 4. Position and Add to Scene ---
    // Position the third frame to the right of the first one.
    // Position `+X` to go right. (Example: 6 units right)
    frameGroup3.position.set(-6, 3, 1);
    // Set rotation to 0, 0, 0 to ensure it stands vertically (North-South)
    frameGroup3.rotation.set(0, 1, 0);

    scene.add(frameGroup3);
    // Store the frame for later reference
    photoFrame3 = { group: frameGroup3, plane: photoPlane3 };

    // --- 5. Add a Light Source ---
    photoFrameLight3 = new THREE.PointLight(0xffaa00, 1.5, 5);
    // Adjust light position slightly in front of the frame
    photoFrameLight3.position.set(-7, 3, -3.9);
    photoFrameLight3.visible = false;
    scene.add(photoFrameLight3);

    // for 2nd
    const frameGroup2 = new THREE.Group();
    const frameBorder2 = new THREE.Mesh(
      new THREE.BoxGeometry(2.8, 2.8, 0.1),
      new THREE.MeshStandardMaterial({
        // You can change the color if you want a different frame
        color: 0xffd700,
        metalness: 1,
        emissive: 0xffaa00,
        emissiveIntensity: 1,
      })
    );
    frameBorder2.castShadow = true;
    frameGroup2.add(frameBorder3);

    // --- 2. Create the Photo Plane ---
    const photoPlane2 = new THREE.Mesh(
      new THREE.PlaneGeometry(4.8, 4.8),
      new THREE.MeshBasicMaterial({ color: 0xffffff })
    );
    // Adjust the position of the plane relative to the border
    photoPlane2.position.z = 1;
    photoPlane2.position.x = -1;
    frameGroup2.add(photoPlane2);

    // --- 3. Load the Image for Frame 3 ---
    new THREE.TextureLoader().load(
      "./assets/anna-pic.png", // 👈 IMPORTANT: CHANGE THIS PATH to your third image
      (texture) => {
        photoPlane2.material.map = texture;
        photoPlane2.material.needsUpdate = true;
      },
      undefined,
      (error) => {
        console.error("Error loading third photo frame image:", error);
      }
    );

    // --- 4. Position and Add to Scene ---
    // Position the third frame to the right of the first one.
    // Position `+X` to go right. (Example: 6 units right)
    frameGroup2.position.set(6, 2, -3);
    // Set rotation to 0, 0, 0 to ensure it stands vertically (North-South)
    frameGroup2.rotation.set(0, -Math.PI / 4, 0);

    scene.add(frameGroup2);
    // Store the frame for later reference
    photoFrame2 = { group: frameGroup2, plane: photoPlane2 };

    // --- 5. Add a Light Source ---
    photoFrameLight2 = new THREE.PointLight(0xffaa00, 1.5, 5);
    // Adjust light position slightly in front of the frame
    photoFrameLight2.position.set(-7, 3, -3.9);
    photoFrameLight2.visible = true;
    scene.add(photoFrameLight2);

    // end third pic

    cakeGroup = new THREE.Group();
    const layer1 = new THREE.Mesh(
      new THREE.CylinderGeometry(1, 1, 0.5, 32),
      new THREE.MeshStandardMaterial({ color: 0xff1493, metalness: 0.3 })
    );
    layer1.position.y = 1.25;
    layer1.castShadow = true;
    cakeGroup.add(layer1);
    const layer2 = new THREE.Mesh(
      new THREE.CylinderGeometry(0.7, 0.7, 0.4, 32),
      new THREE.MeshStandardMaterial({ color: 0xff69b4, metalness: 0.3 })
    );
    layer2.position.y = 1.65;
    layer2.castShadow = true;
    cakeGroup.add(layer2);
    scene.add(cakeGroup); // Candles (Unchanged)

    const candlePositions = [
      { x: -0.3, z: 0 },
      { x: 0, z: 0 },
      { x: 0.3, z: 0 },
    ];
    candles.length = 0;
    candlePositions.forEach((pos) => {
      const group = new THREE.Group();
      const candle = new THREE.Mesh(
        new THREE.CylinderGeometry(0.05, 0.05, 0.4, 16),
        new THREE.MeshStandardMaterial({ color: 0xffff00 })
      );
      candle.position.set(pos.x, 2.1, pos.z);
      candle.castShadow = true;
      group.add(candle);

      const flame = new THREE.Mesh(
        new THREE.SphereGeometry(0.12, 16, 16),
        new THREE.MeshBasicMaterial({ color: 0xff6600 })
      );
      flame.position.set(pos.x, 2.35, pos.z);
      group.add(flame);

      const flameLight = new THREE.PointLight(0xff6600, 1.5, 3);
      flameLight.position.set(pos.x, 2.35, pos.z);
      group.add(flameLight);

      scene.add(group);
      candles.push({ group, flame, light: flameLight });
    }); // 3D Text, Balloons (Unchanged)

    const textMaterial = new THREE.MeshStandardMaterial({
      color: 0xffd700,
      emissive: 0xffaa00,
      emissiveIntensity: 0.5,
    });
    textMesh = new THREE.Mesh(new THREE.BoxGeometry(4, 0.6, 0.2), textMaterial);
    textMesh.position.set(0, 4, 0);
    scene.add(textMesh);

    const balloonColors = [
      0xff1493, 0x00ffff, 0x9370db, 0xff69b4, 0x8e44ad, 0xffd700,
    ];
    balloons.length = 0;
    for (let i = 0; i < 12; i++) {
      const balloon = new THREE.Mesh(
        new THREE.SphereGeometry(0.35, 16, 16),
        new THREE.MeshStandardMaterial({
          color: balloonColors[i % balloonColors.length],
          metalness: 0.5,
          roughness: 0.3,
        })
      );
      balloon.position.set(
        (Math.random() - 0.5) * 10,
        Math.random() * 2,
        (Math.random() - 0.5) * 8 - 2
      );
      balloon.userData = {
        speed: 0.008 + Math.random() * 0.015,
        offset: Math.random() * Math.PI * 2,
      };
      scene.add(balloon);
      balloons.push(balloon);
    } // Gift box - YELLOW with RED ribbons and glowing light (Unchanged)

    giftGroup = new THREE.Group(); // 1. Core Gift Box (Yellow)

    const giftBox = new THREE.Mesh(
      new THREE.BoxGeometry(1.2, 1.2, 1.2),
      new THREE.MeshStandardMaterial({
        color: 0xffff00,
        metalness: 0.6,
        roughness: 0.4,
      })
    );
    giftBox.position.y = 1.6;
    giftBox.castShadow = true; // IMPORTANT: Add an identifier to the box mesh for easy raycasting detection
    giftBox.name = "GiftBoxMesh";
    giftGroup.add(giftBox);

    const ribbonColor = 0xff0000; // Red ribbon color
    const ribbonMaterial = new THREE.MeshStandardMaterial({
      color: ribbonColor,
      metalness: 0.8,
    }); // 2. Ribbons (Red)

    giftGroup.add(
      new THREE.Mesh(
        new THREE.BoxGeometry(1.3, 0.2, 0.2), // Horizontal ribbon
        ribbonMaterial
      ).position.set(0, 1.6, 0)
    );
    giftGroup.add(
      new THREE.Mesh(
        new THREE.BoxGeometry(0.2, 0.2, 1.3), // Vertical ribbon
        ribbonMaterial
      ).position.set(0, 1.6, 0)
    ); // 3. Gift box glowing light

    giftBoxLight = new THREE.PointLight(0xee82ee, 3, 4); // Violet/Purple glow
    giftBoxLight.position.set(0, 1.6, 0);
    giftBoxLight.visible = false;
    giftGroup.add(giftBoxLight);

    giftGroup.visible = false;
    scene.add(giftGroup); // --- Event Listeners ---

    const handleMouseDown = (e) => {
      isDragging = true;
      previousMousePosition = { x: e.clientX, y: e.clientY };
    };

    const handleMouseMove = (e) => {
      if (!isDragging) return;
      const deltaX = e.clientX - previousMousePosition.x;
      const angle = deltaX * 0.01;
      const currentX = camera.position.x;
      const currentZ = camera.position.z;
      const radius = Math.sqrt(currentX * currentX + currentZ * currentZ);

      camera.position.x =
        radius * Math.sin(Math.atan2(currentX, currentZ) + angle);
      camera.position.z =
        radius * Math.cos(Math.atan2(currentX, currentZ) + angle);

      camera.lookAt(0, 1, 0);
      previousMousePosition = { x: e.clientX, y: e.clientY };
    };

    const handleMouseUp = () => {
      isDragging = false;
    };

    const handleClick = (e) => {
      if (isDragging) return;

      const mouse = new THREE.Vector2(
        (e.clientX / window.innerWidth) * 2 - 1,
        -(e.clientY / window.innerHeight) * 2 + 1
      );

      const raycaster = new THREE.Raycaster();
      raycaster.setFromCamera(mouse, camera); // 1. Check for CAKE click (only if lit)

      const cakeIntersects = raycaster.intersectObject(cakeGroup, true);
      if (cakeIntersects.length > 0 && candlesLit) {
        blowOutCandles();
        createConfetti();
        return;
      } // 2. Check for GIFT BOX click (only after candles are blown out)

      if (!candlesLit && giftGroup.visible) {
        // Check specifically for the mesh with the name 'GiftBoxMesh'
        const giftIntersects = raycaster.intersectObject(
          giftGroup.getObjectByName("GiftBoxMesh"),
          true
        );
        if (giftIntersects.length > 0) {
          showGiftSurprise();
        }
      }
    };

    const showGiftSurprise = () => {
      const container = document.getElementById("gift-surprise-container");
      const image = document.getElementById("surprise-image"); // Set the hardcoded image source (G-Wagon) and show the container

      container.classList.remove("hidden");
    };

    renderer.domElement.addEventListener("mousedown", handleMouseDown);
    renderer.domElement.addEventListener("mousemove", handleMouseMove);
    renderer.domElement.addEventListener("mouseup", handleMouseUp);
    renderer.domElement.addEventListener("click", handleClick); // --- Core Functions ---

    const blowOutCandles = () => {
      candlesLit = false;
      const messageContainer = document.getElementById("message-container");

      candles.forEach((candle, i) => {
        setTimeout(() => {
          gsapAnimate(
            candle.flame.scale,
            { x: 0.01, y: 0.01, z: 0.01 },
            0.5,
            () => {
              candle.flame.visible = false;
            }
          );
          gsapAnimate(candle.light, { intensity: 0 }, 0.5);
        }, i * 200);
      });

      setTimeout(() => {
        messageContainer.classList.remove("hidden");
        gsapAnimate(cakeGroup.scale, { x: 0.01, y: 0.01, z: 0.01 }, 1, () => {
          cakeGroup.visible = false;
          giftGroup.visible = true;
          giftGroup.scale.set(0.01, 0.01, 0.01);
          gsapAnimate(giftGroup.scale, { x: 1.5, y: 1.5, z: 1.5 }, 1.5);
          giftBoxLight.visible = true; // Make gift box light visible
        });
      }, 1500);
    };

    const createConfetti = () => {
      confettiPieces.length = 0;
      for (let i = 0; i < 200; i++) {
        const confetti = new THREE.Mesh(
          new THREE.BoxGeometry(0.1, 0.1, 0.1),
          new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })
        );
        confetti.position.set(
          (Math.random() - 0.5) * 2,
          3,
          (Math.random() - 0.5) * 2
        );
        confetti.userData = {
          velocity: {
            x: (Math.random() - 0.5) * 0.15,
            y: Math.random() * 0.15 + 0.1,
            z: (Math.random() - 0.5) * 0.15,
          },
        };
        scene.add(confetti);
        confettiPieces.push(confetti);
      }
    }; // Web Audio API for BGM - LOOPS INDEFINITELY (Unchanged)

    const playBirthdayMusic = () => {
      if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
      }

      const ctx = audioContext;
      const notes = [
        { freq: 264, duration: 0.3 },
        { freq: 264, duration: 0.2 },
        { freq: 297, duration: 0.5 },
        { freq: 264, duration: 0.5 },
        { freq: 352, duration: 0.5 },
        { freq: 330, duration: 1 },
        { freq: 264, duration: 0.3 },
        { freq: 264, duration: 0.2 },
        { freq: 297, duration: 0.5 },
        { freq: 264, duration: 0.5 },
        { freq: 396, duration: 0.5 },
        { freq: 352, duration: 1 },
        { freq: 264, duration: 0.3 },
        { freq: 264, duration: 0.2 },
        { freq: 528, duration: 0.5 },
        { freq: 440, duration: 0.5 },
        { freq: 352, duration: 0.5 },
        { freq: 330, duration: 0.5 },
        { freq: 297, duration: 0.5 },
        { freq: 466, duration: 0.3 },
        { freq: 466, duration: 0.2 },
        { freq: 440, duration: 0.5 },
        { freq: 352, duration: 0.5 },
        { freq: 396, duration: 0.5 },
        { freq: 352, duration: 1 },
      ];

      let noteIndex = 0;
      let currentPlayTime = ctx.currentTime;

      const scheduleNextNote = () => {
        if (!audioContext) return;

        const note = notes[noteIndex];
        if (!note) {
          noteIndex = 0;
          currentPlayTime = ctx.currentTime + 0.5;
          setTimeout(scheduleNextNote, 500);
          return;
        }

        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.connect(gain);
        gain.connect(ctx.destination);

        osc.frequency.value = note.freq;
        osc.type = "sine";

        gain.gain.setValueAtTime(0.15, currentPlayTime);
        gain.gain.exponentialRampToValueAtTime(
          0.01,
          currentPlayTime + note.duration
        );

        osc.start(currentPlayTime);
        osc.stop(currentPlayTime + note.duration);

        currentPlayTime += note.duration;
        noteIndex++;

        const delayMs = Math.max(0, (currentPlayTime - ctx.currentTime) * 1000);
        setTimeout(scheduleNextNote, delayMs + 10);
      };

      scheduleNextNote();
    };

    const startMusicSafely = () => {
      if (audioContext && audioContext.state === "suspended") {
        audioContext.resume().then(() => {
          playBirthdayMusic();
        });
      } else if (!audioContext || audioContext.state === "running") {
        playBirthdayMusic();
      }
    };

    document.body.addEventListener("click", startMusicSafely, { once: true });
    document.body.addEventListener("keydown", startMusicSafely, { once: true }); // --- Animation Loop ---

    let time = 0;
    const animate = () => {
      requestAnimationFrame(animate);
      time += 0.01;

      if (galaxy) {
        galaxy.rotation.y = time * 0.05;
      }

      if (candlesLit) {
        candles.forEach((candle, i) => {
          const flicker = Math.sin(time * 15 + i) * 0.08;
          candle.flame.scale.set(1 + flicker, 1 + flicker * 2, 1 + flicker);
          candle.light.intensity = 1.5 + flicker;
        });
      }

      if (textMesh) {
        textMesh.position.y = 4 + Math.sin(time * 0.8) * 0.15;
        textMesh.rotation.y = Math.sin(time * 0.3) * 0.15;
      }

      balloons.forEach((balloon) => {
        balloon.position.y += balloon.userData.speed;
        balloon.position.x += Math.sin(time + balloon.userData.offset) * 0.015;
        balloon.rotation.y += 0.02;
        if (balloon.position.y > 12) {
          balloon.position.y = 0;
        }
      });

      confettiPieces.forEach((piece) => {
        piece.position.x += piece.userData.velocity.x;
        piece.position.y -= 0.03;
        piece.position.z += piece.userData.velocity.z;
        piece.rotation.x += 0.15;
        piece.rotation.y += 0.15;

        if (piece.position.y < 0) {
          piece.position.y = 0;
          piece.userData.velocity.y = 0;
        }
      });

      if (giftGroup && giftGroup.visible) {
        giftGroup.rotation.y += 0.02; // Animate gift box light intensity
        if (giftBoxLight && giftBoxLight.visible) {
          giftBoxLight.intensity = 2.5 + Math.sin(time * 5) * 1.5; // Pulsating glow
        }
      } // Animate floor glow light

      if (floorGlowLight) {
        floorGlowLight.intensity = 5 + Math.sin(time * 3) * 2; // Slow, strong pulse
      }

      if (photoFrame) {
        photoFrame.group.rotation.y = Math.sin(time * 0.5) * 0.1;
        photoFrame.group.position.y = 3 + Math.sin(time * 0.6) * 0.1;
        if (photoFrameLight) {
          photoFrameLight.position.copy(photoFrame.group.position);
          photoFrameLight.position.z -= 0.1;
        }
      }

      // NEW ANIMATION CODE FOR SECOND FRAME
      if (photoFrame2) {
        photoFrame2.group.rotation.y = Math.sin(time * 0.5 + 1) * 0.1;
        photoFrame2.group.position.y = 3 + Math.sin(time * 0.6 + 1) * 0.1;
        if (photoFrameLight2) {
          photoFrameLight2.position.copy(photoFrame2.group.position);
          photoFrameLight2.position.z -= 0.1;
        }
      }
      // END NEW ANIMATION CODE

      renderer.render(scene, camera);
    };
    animate(); // --- Resize Handler ---

    const handleResize = () => {
      if (!container) return;
      camera.aspect = container.clientWidth / container.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(container.clientWidth, container.clientHeight);
    };
    window.addEventListener("resize", handleResize); // --- UI Handlers (Closure buttons remain the same) ---

    document.getElementById("close-message").addEventListener("click", () => {
      document.getElementById("message-container").classList.add("hidden");
    });

    document.getElementById("close-surprise").addEventListener("click", () => {
      document
        .getElementById("gift-surprise-container")
        .classList.add("hidden");
    });
  };

  initScene();
});