script.js

/* ============================================
   ESSENTIQUE — Interactions & Animations
   Apple-level micro-interactions
   ============================================ */

document.addEventListener('DOMContentLoaded', () => {
  // ---- Preloader ----
  window.addEventListener('load', () => {
    setTimeout(() => {
      document.getElementById('preloader').classList.add('loaded');
      initHeroAnimations();
    }, 1800);
  });

  // Fallback: remove preloader after 3s regardless
  setTimeout(() => {
    document.getElementById('preloader').classList.add('loaded');
    initHeroAnimations();
  }, 3000);

  // ---- Hero animations ----
  let heroInitialized = false;

  function initHeroAnimations() {
    if (heroInitialized) return;
    heroInitialized = true;

    // Slow zoom on hero image
    const heroImg = document.querySelector('.hero-img');
    if (heroImg) {
      setTimeout(() => heroImg.classList.add('loaded'), 100);
    }

    // Typing animation
    const tagline = 'Luxurious Essential Oils \u00B7 Handcrafted Naturally';
    const typedEl = document.querySelector('.tagline-typed');
    if (typedEl) {
      let i = 0;
      const typeInterval = setInterval(() => {
        if (i < tagline.length) {
          typedEl.textContent += tagline[i];
          i++;
        } else {
          clearInterval(typeInterval);
          setTimeout(() => typedEl.classList.add('done'), 2000);
        }
      }, 45);
    }

    // Stagger hero reveals
    const heroReveals = document.querySelectorAll('#hero .reveal');
    heroReveals.forEach((el, i) => {
      setTimeout(() => {
        el.classList.add('visible');
      }, 300 + i * 200);
    });
  }

  // ---- Navbar scroll ----
  const navbar = document.getElementById('navbar');

  function handleNavScroll() {
    const scrollY = window.scrollY;
    if (scrollY > 80) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  }

  window.addEventListener('scroll', handleNavScroll, { passive: true });

  // ---- Mobile menu ----
  const toggle = document.querySelector('.nav-toggle');
  const mobileMenu = document.getElementById('mobile-menu');

  if (toggle && mobileMenu) {
    toggle.addEventListener('click', () => {
      toggle.classList.toggle('active');
      mobileMenu.classList.toggle('open');
      document.body.style.overflow = mobileMenu.classList.contains('open') ? 'hidden' : '';
    });

    mobileMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        toggle.classList.remove('active');
        mobileMenu.classList.remove('open');
        document.body.style.overflow = '';
      });
    });
  }

  // ---- Smooth anchor scrolling ----
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', (e) => {
      e.preventDefault();
      const target = document.querySelector(anchor.getAttribute('href'));
      if (target) {
        const offset = 80;
        const top = target.getBoundingClientRect().top + window.scrollY - offset;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    });
  });

  // ---- Intersection Observer — Reveal on scroll ----
  const observerOptions = {
    root: null,
    rootMargin: '0px 0px -60px 0px',
    threshold: 0.1
  };

  const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const delay = entry.target.style.animationDelay;
        if (delay) {
          const ms = parseFloat(delay) * 1000;
          setTimeout(() => entry.target.classList.add('visible'), ms);
        } else {
          entry.target.classList.add('visible');
        }
        revealObserver.unobserve(entry.target);
      }
    });
  }, observerOptions);

  // Observe all reveal elements except hero (hero is handled separately)
  document.querySelectorAll('.reveal:not(#hero .reveal), .reveal-slide-right, .reveal-scale').forEach(el => {
    revealObserver.observe(el);
  });

  // ---- Parallax on hero ----
  let ticking = false;

  function updateParallax() {
    const scrollY = window.scrollY;
    const heroImg = document.querySelector('.hero-img');
    if (heroImg && scrollY < window.innerHeight) {
      heroImg.style.transform = 'scale(' + (1 + scrollY * 0.0001) + ') translateY(' + (scrollY * 0.3) + 'px)';
    }
    ticking = false;
  }

  window.addEventListener('scroll', () => {
    if (!ticking) {
      requestAnimationFrame(updateParallax);
      ticking = true;
    }
  }, { passive: true });

  // ---- Gallery infinite scroll (clone items via DOM methods) ----
  const galleryTrack = document.querySelector('.gallery-track');
  if (galleryTrack) {
    const items = Array.from(galleryTrack.children);
    items.forEach(item => {
      const clone = item.cloneNode(true);
      galleryTrack.appendChild(clone);
    });
  }

  // ---- Gold line draw animation on scroll ----
  const goldLines = document.querySelectorAll('.gold-line, .gold-line-sm');
  const lineObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.animation = 'drawLine 1s var(--ease-out) forwards';
        lineObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.5 });

  goldLines.forEach(line => {
    line.style.transform = 'scaleX(0)';
    lineObserver.observe(line);
  });

  // Add the drawLine keyframe dynamically
  const styleSheet = document.createElement('style');
  styleSheet.textContent = '@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }';
  document.head.appendChild(styleSheet);

  // ---- Smooth hover tilt on product cards ----
  document.querySelectorAll('.product-card').forEach(card => {
    card.addEventListener('mousemove', (e) => {
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;
      const tiltX = (y - centerY) / centerY * 2;
      const tiltY = (centerX - x) / centerX * 2;
      card.style.transform = 'translateY(-4px) perspective(800px) rotateX(' + tiltX + 'deg) rotateY(' + tiltY + 'deg)';
    });

    card.addEventListener('mouseleave', () => {
      card.style.transform = 'translateY(0) perspective(800px) rotateX(0) rotateY(0)';
    });
  });

  // ---- Ambient cursor glow ----
  const cursor = document.createElement('div');
  cursor.id = 'cursor-glow';
  cursor.style.position = 'fixed';
  cursor.style.width = '200px';
  cursor.style.height = '200px';
  cursor.style.borderRadius = '50%';
  cursor.style.background = 'radial-gradient(circle, rgba(201,169,110,0.06) 0%, transparent 70%)';
  cursor.style.pointerEvents = 'none';
  cursor.style.zIndex = '9998';
  cursor.style.transform = 'translate(-50%, -50%)';
  cursor.style.transition = 'opacity 0.3s';
  cursor.style.opacity = '0';
  document.body.appendChild(cursor);

  let cursorVisible = false;

  document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';

    if (!cursorVisible) {
      cursorVisible = true;
      cursor.style.opacity = '1';
    }
  });

  document.addEventListener('mouseleave', () => {
    cursorVisible = false;
    cursor.style.opacity = '0';
  });
});