script.js

const revealNodes = document.querySelectorAll('.reveal');

const io = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        io.unobserve(entry.target);
      }
    });
  },
  {
    threshold: 0.01,
    rootMargin: '0px 0px -8% 0px',
  }
);

revealNodes.forEach((node) => io.observe(node));

const copyBibBtn = document.getElementById('copyBib');
const bibtexNode = document.getElementById('bibtex');

if (copyBibBtn && bibtexNode) {
  copyBibBtn.addEventListener('click', async () => {
    const text = bibtexNode.innerText;
    try {
      await navigator.clipboard.writeText(text);
      copyBibBtn.textContent = 'Copied';
    } catch {
      copyBibBtn.textContent = 'Copy failed';
    }

    setTimeout(() => {
      copyBibBtn.textContent = 'Copy BibTeX';
    }, 1600);
  });
}

const managedVideos = [...document.querySelectorAll('video')].filter((video) => {
  const source = video.querySelector('source');
  const src = source?.getAttribute('src')?.trim();
  return Boolean(src && src !== '#');
});

managedVideos.forEach((video) => {
  video.preload = 'metadata';
});

const videoObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      const video = entry.target;
      if (entry.isIntersecting && entry.intersectionRatio >= 0.35) {
        video.play().catch(() => {
          // Ignore autoplay rejections from browser policies.
        });
      } else {
        video.pause();
      }
    });
  },
  {
    threshold: [0, 0.35, 0.7],
    rootMargin: '120px 0px 120px 0px',
  }
);

managedVideos.forEach((video) => videoObserver.observe(video));

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    managedVideos.forEach((video) => video.pause());
  }
});

const promptCards = [...document.querySelectorAll('.matrix-video')];
const promptTextMap = {
  '000':
    'A stylish woman strolls down a bustling Tokyo street, the warm glow of neon lights and animated city signs casting vibrant reflections. She wears a sleek black leather jacket paired with a flowing red dress and black boots, her black purse slung over her shoulder. Sunglasses perched on her nose and a bold red lipstick add to her confident, casual demeanor. The street is damp and reflective, creating a mirror-like effect that enhances the colorful lights and shadows. Pedestrians move about, adding to the lively atmosphere. The scene is captured in a dynamic medium shot with the woman walking slightly to one side, highlighting her graceful strides.',
  '010':
    'A close-up view of a glass sphere containing a tranquil Zen garden. Inside, a small Eastern dwarf with weathered skin and a serene expression is raking the sand, meticulously creating intricate patterns with a bamboo rake. His movements are deliberate and meditative, enhancing the peaceful atmosphere of the scene. The background is blurred, revealing only hints of greenery and rocks, adding to the serene setting. The sphere itself is polished, reflecting the surroundings subtly. The camera angle captures the dwarf from a slightly elevated position, emphasizing his focused and contemplative pose.',
  '016':
    "A 3D animation of a small, round, fluffy creature with big, expressive eyes exploring a vibrant, enchanted forest. The creature, a whimsical blend of a rabbit and a squirrel, has soft blue fur and a bushy, striped tail. It hops along a sparkling stream, its eyes wide with wonder. The forest is alive with magical elements: flowers that glow and change colors, trees with leaves in shades of purple and silver, and small floating lights that resemble fireflies. The creature stops to interact playfully with a group of tiny, fairy-like beings dancing around a mushroom ring. The creature looks up in awe at a large, glowing tree that seems to be the heart of the forest. The scene is rendered in a detailed, fantasy style, with a soft, ethereal lighting that enhances the enchantment. The camera follows the creature as it moves, capturing its playful interactions and the magical ambiance of the forest. A medium shot with a dynamic angle that highlights the creature's expressions and the enchanting environment.",
  '052':
    'A highly detailed close-up shot in HD, focusing on dew droplets glistening on the delicate petals of a blue rose. The petals are soft and velvety, with intricate patterns and subtle color gradients. Each dew drop sparkles like tiny diamonds, catching the light and creating a mesmerizing effect. The background is blurred, emphasizing the dew and petals, with a soft focus on the edges. The photo has a clear, crisp texture, highlighting the beauty and fragility of nature.',
  '075':
    "A handheld tracking shot following a red balloon floating above the ground in an abandoned street. The balloon drifts gracefully, its bright red color contrasting sharply against the decaying urban backdrop. The street is littered with debris and graffiti-covered walls, with broken windows and rusted cars scattered about. Shadows dance across the scene as sunlight filters through gaps in the buildings. The camera moves fluidly, capturing the balloon's gentle ascent and descent, emphasizing its playful motion. A close-up of the balloon transitions to a wider shot, showcasing the desolate environment.",
  '164':
    "A high-energy motorcycle stunt scene, capturing a daring backflip mid-air over a ramp. The stunt rider, wearing a black helmet and racing suit, soars through the air with intense concentration and a fierce expression. The motorcycle spins gracefully, its wheels barely touching the ramp as it executes the backflip. The background features a blurred outdoor setting with a bright blue sky and distant mountains, emphasizing the dynamic movement and the thrill of the stunt. A dynamic shot from a low-angle perspective, highlighting the rider's momentum and the dramatic arc of the flip.",
  '165':
    'A serene night scene in traditional Chinese countryside style, depicting a rural road under a starry sky with the full moon hanging high. The road winds through lush fields, with the leaves and grass on both sides swaying gently, intermittently, and slowly in the breeze. The stars twinkle brightly overhead, casting a soft glow over the landscape. The path is quiet and peaceful, with a gentle rustling of leaves and grass creating a soothing ambiance. A wide-angle shot capturing the vastness of the night sky and the tranquil road.',
  '185':
    "A whimsical illustration in a watercolor style depicts a large, fluffy cat walking through a lush cabbage patch. The cat, with green eyes and a playful expression, spots its favorite cabbage and playfully flops down on top of it, stretching and rolling with satisfaction. The background features vibrant green cabbages and colorful wildflowers, with soft, blurred edges to highlight the cat's cozy pose. A close-up shot from a slightly lower angle captures the cat's joyful moment.",
  '203':
    "A high-energy road race photograph capturing a cyclist powering up a steep hill. The cyclist is a middle-aged man with a determined expression, sweat glistening on his brow. He is dressed in a sleek, aerodynamic racing jersey and cycling shorts, with race number clearly visible on his back. His helmet is snugly fastened, and he grips the handlebars tightly. The background shows a winding road leading upwards, with blurred trees and bushes rushing past. The sky is a mix of dark clouds and bright sunlight, creating dramatic contrast. The scene is captured from a low-angle shot, emphasizing the cyclist's struggle and determination.",
  '231':
    "A realistic photo-style image of a middle-aged man with a furrowed brow, attentively listening to his friend's troubles. The man has a serious expression, deep-set eyes, and a slightly weathered face, indicating years of experience and wisdom. His posture is slightly leaning forward, showing empathy and concern. The background is a cozy living room with soft lighting, hints of books on shelves, and a couch nearby. The friend is speaking animatedly, possibly gesturing with their hands. The photo captures the moment with a medium shot, emphasizing the emotional connection between the two men.",
  '294':
    'A dynamic hip-hop dance scene in a vibrant urban style, featuring an Asian girl in a bright yellow T-shirt and white pants. She is mid-dance move, arms stretched out and feet rhythmically stepping, exuding energy and confidence. Her hair is tied up in a ponytail, and she has a mischievous smile on her face. The background shows a bustling city street with blurred reflections of tall buildings and passing cars. The scene captures the lively and energetic atmosphere of a hip-hop performance, with a slightly grainy texture. A medium shot from a low-angle perspective.',
  '296':
    "A dramatic underwater photograph captures a man performing an intense drumming session. He is submerged in clear blue water, with his face partially obscured by bubbles. His arms move rhythmically, striking the drums with powerful strokes. The drums, made of durable material, are suspended above him, reflecting the vibrant underwater environment. The background features a colorful coral reef with fish swimming around, adding to the vividness of the scene. The water has a soft, ethereal quality, creating a mesmerizing effect. A dynamic low-angle shot from below the surface, emphasizing the man's energetic movements and the aquatic surroundings.",
  '317':
    "A vibrant concert poster-style image of a singer performing on stage, their mouth wide open as they hit a high note. The singer, a young woman with striking blue eyes and long wavy blonde hair, is dressed in a black sequined dress with a plunging neckline and glittering accents. She stands confidently with one hand raised, exuding passion and energy. The background features a blurred stage with colorful lights and a grand piano in the corner, creating a lively and dynamic atmosphere. A medium shot from a slightly elevated angle capturing the singer's intense performance.",
  '865':
    "A miniature 3D render in an octane engine style depicting adorable wool and felt monsters dancing together in a dreamy, bokeh-filled setting. These soft, cuddly creatures, with big expressive eyes and fluffy bodies, are illuminated by gentle, diffused lighting that casts a warm, ethereal glow. The background features a soft, hazy backdrop with a dreamy bokeh effect, adding a cinematic quality to the scene. The monsters are shown from various angles, capturing their playful movements and expressions, creating a charming and enchanting atmosphere. A medium shot with a dynamic camera angle, highlighting the natural and joyful dance of these woolen monsters.",
  '950':
    "An adorable kangaroo wearing blue jeans and a white t-shirt takes a pleasant stroll in Mumbai, India, during a vibrant and colorful festival. The kangaroo has soft, fluffy fur and a friendly expression, looking around curiously at the bustling crowd. It moves gracefully, its legs springing lightly with each step. The background features a lively scene with people in traditional Indian attire, colorful decorations, and vendors selling various goods. The sky is a brilliant blue with a few fluffy clouds, and there are bursts of fireworks in the distance. The photo has a warm and joyful atmosphere, capturing the essence of the festival. A medium shot from a slightly elevated angle, emphasizing the kangaroo's natural movements.",
  '033':
    "A cinematic film shot in 35mm capturing a dynamic step-printing scene of a person running. The runner is a young man with short, tousled brown hair and determined eyes, sprinting down a city street lined with tall buildings and neon signs. His arms are pumped vigorously, and he looks focused and energetic. The background features blurred motion with the cityscape gradually fading into a soft, sepia tone. The camera follows him closely, capturing his every stride and movement. The scene has a nostalgic and vintage film texture, enhancing the dramatic intensity of the run. A close-up shot from a slightly behind-the-subject angle.",
  '070':
    "A subtle and elegant photograph in a Japanese style, capturing a woman with gentle, contemplative eyes and flowing dark hair sitting by the window of a high-speed train. The train moves rapidly through a bustling cityscape, with blurred reflections of the city lights and buildings on the window pane. The woman appears serene, her hands resting gently on her lap. The background features a blend of traditional Japanese architecture and modern skyscrapers, with a soft, muted color palette. The photo has a vintage film texture, emphasizing the movement and energy of the scene. A medium shot from a slightly angled perspective, highlighting the woman's thoughtful gaze and the dynamic motion of the train.",
  '087':
    "An extreme close-up shot of an ant emerging from its nest, capturing the moment of its journey with vivid detail. The ant is small but resilient, with its body glistening slightly in the sunlight. As the camera pulls back, we see a picturesque neighborhood beyond the hill, with rows of houses and trees in the background. The hill itself is covered in lush green grass and wildflowers, adding to the natural setting. The scene has a warm, natural lighting effect, highlighting the tiny yet significant action of the ant. A gradual pull-back shot, emphasizing both the ant's movement and the broader landscape.",
};

promptCards.forEach((card) => {
  const overlay = card.querySelector('.prompt-overlay');
  if (!overlay) return;
  const match = overlay.textContent.match(/Prompt\s+(\d{3})\s*:/i);
  if (!match) return;

  const promptId = match[1];
  const promptText = promptTextMap[promptId];
  if (promptText) {
    overlay.textContent = promptText;
  }
});

promptCards.forEach((card) => {
  const video = card.querySelector('video');
  const overlay = card.querySelector('.prompt-overlay');
  if (!video || !overlay) return;

  let hoverTimerId = null;
  let insideCard = false;
  let isSeeking = false;

  const clearPromptTimer = () => {
    if (hoverTimerId) {
      clearTimeout(hoverTimerId);
      hoverTimerId = null;
    }
  };

  const hidePrompt = () => {
    clearPromptTimer();
    card.classList.remove('show-prompt');
  };

  const schedulePrompt = () => {
    hidePrompt();
    if (isSeeking) return;

    hoverTimerId = setTimeout(() => {
      if (insideCard && !isSeeking) {
        card.classList.add('show-prompt');
      }
    }, 1500);
  };

  card.addEventListener('mouseenter', () => {
    insideCard = true;
    schedulePrompt();
  });

  card.addEventListener('mouseleave', () => {
    insideCard = false;
    hidePrompt();
  });

  card.addEventListener('focusin', () => {
    insideCard = true;
    schedulePrompt();
  });

  card.addEventListener('focusout', () => {
    insideCard = false;
    hidePrompt();
  });

  video.addEventListener('seeking', () => {
    isSeeking = true;
    hidePrompt();
  });

  video.addEventListener('seeked', () => {
    isSeeking = false;
    if (insideCard) {
      schedulePrompt();
    }
  });
});