Funcionalidad JS Invitacion Digital

<script>
document.addEventListener('DOMContentLoaded', function () {

  // ---- Selectores ----
  const curtain        = document.getElementById('ov-curtain');
  const panelLeft      = document.querySelector('.ov-panel-left');
  const panelRight     = document.querySelector('.ov-panel-right');
  const playBtn        = document.getElementById('ov-play-btn');
  const main           = document.querySelector('.ov-main');
  const audio          = document.getElementById('bg-audio');
  const audioIndicator = document.getElementById('audio-indicator');
  const bars           = document.getElementById('bars');
  const audioLabel     = document.getElementById('audio-label');
  const ctaBtn         = document.querySelector('.ov-cta-btn');
  const waOverlay      = document.getElementById('wa-overlay');
  const waClose        = document.getElementById('wa-close');
  const waName         = document.getElementById('wa-name');
  const waSend         = document.getElementById('wa-send');
  const waError        = document.getElementById('wa-error');

  const WA_NUMBER = '529512345678'; // NÚMERO WHATSAPP

  // ---- Confetti ----
  const confColors = ['#FF6B9D','#FFD93D','#4ECDC4','#A29BFE','#FF9F43','#55EFC4'];

  function createConfetti() {
    const container = document.getElementById('ov-confetti-bg');
    if (!container) return;
    for (let i = 0; i < 45; i++) {
      const el = document.createElement('div');
      el.className = 'ov-conf';
      const size = 6 + Math.random() * 8;
      el.style.cssText = [
        'position:absolute',
        'border-radius:' + (Math.random() > 0.5 ? '50%' : '2px'),
        'width:' + size + 'px',
        'height:' + (size * 0.5) + 'px',
        'background:' + confColors[Math.floor(Math.random() * confColors.length)],
        'left:' + (Math.random() * 100) + '%',
        'top:' + (Math.random() * -20) + '%',
        'opacity:0.6',
        'animation:ov-fall ' + (4 + Math.random() * 5) + 's ' + (Math.random() * 5) + 's linear infinite',
        'transform:rotate(' + (Math.random() * 360) + 'deg)'
      ].join(';');
      container.appendChild(el);
    }
  }

  // ---- Botón PLAY ----
  if (playBtn) {
    playBtn.style.cursor = 'pointer';
    playBtn.addEventListener('click', function () {

      // Ocultar botón PLAY
      playBtn.style.opacity = '0';
      playBtn.style.transition = 'opacity 0.4s';
      playBtn.style.pointerEvents = 'none';

      // Abrir paneles a los 300ms
      setTimeout(function () {
        if (panelLeft)  panelLeft.style.transform  = 'translateX(-100%)';
        if (panelRight) panelRight.style.transform = 'translateX(100%)';
      }, 300);

      // Bajar z-index mientras paneles aún se mueven
      setTimeout(function () {
        curtain.style.zIndex = '-1';
        curtain.style.pointerEvents = 'none';
      }, 800);

      // Fade in del main encadenado con la cortina
      setTimeout(function () {
        main.style.opacity = '1';
        audioIndicator.classList.add('visible');
        createConfetti();
        tryPlayAudio();
      }, 900);

    });
  }

  // ---- Audio ----
  function tryPlayAudio() {
    audio.volume = 0;
    audio.play()
      .then(function () { fadeInAudio(); })
      .catch(function () { audioLabel.textContent = 'Activar música'; });
  }

  function fadeInAudio() {
    let vol = 0;
    const fade = setInterval(function () {
      vol = Math.min(vol + 0.025, 0.5);
      audio.volume = vol;
      if (vol >= 0.5) clearInterval(fade);
    }, 100);
  }

  audioIndicator.addEventListener('click', function () {
    if (audio.paused) {
      audio.play().then(function () {
        bars.classList.remove('paused');
        audioLabel.textContent = 'Música';
        fadeInAudio();
      });
    } else {
      audio.pause();
      bars.classList.add('paused');
      audioLabel.textContent = 'Pausado';
    }
  });

  // ---- Botón CTA → modal WhatsApp ----
  if (ctaBtn) {
    ctaBtn.addEventListener('click', function (e) {
      e.preventDefault();
      waOverlay.classList.add('show');
      waName.focus();
    });
  }

  // ---- Modal WhatsApp ----
  waClose.addEventListener('click', function () {
    waOverlay.classList.remove('show');
    waName.value = '';
    waError.textContent = '';
  });

  waOverlay.addEventListener('click', function (e) {
    if (e.target === waOverlay) {
      waOverlay.classList.remove('show');
      waName.value = '';
      waError.textContent = '';
    }
  });

  waName.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') waSend.click();
  });

  waSend.addEventListener('click', function () {
    const nombre = waName.value.trim();
    if (!nombre) {
      waError.textContent = '¡Escribe tu nombre para continuar!';
      waName.focus();
      return;
    }
    waError.textContent = '';
    const msg = encodeURIComponent(
      '¡Hola! Soy *' + nombre + '* y confirmo mi asistencia a la fiesta de cumpleaños de Mateo. ¡Ahí estaré!'
    );
    window.open('https://wa.me/' + WA_NUMBER + '?text=' + msg, '_blank');
    waOverlay.classList.remove('show');
    waName.value = '';
  });

});
</script>