<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  overflow: hidden;
  z-index: 100;
}
.preloader.hidden {
  display: none;
}
.text-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
}
.big-text {
  font-family: 'Bebas Neue', sans-serif; 
  font-size: 5rem;
  color: #000000;
  position: absolute;
  font-weight: 900;
  margin: 0;
  letter-spacing: -3px;
  opacity: 0;
}
</style>
<div class="preloader">
  <div class="text-container">
    <h1 class="big-text text-lati">LATI</h1>
    <h1 class="big-text text-derm">DERM</h1>
  </div>    
</div> 
 
<script>
// Verificar si el preloader ya se mostró antes
const preloaderShown = localStorage.getItem('latidermPreloaderShown');

// Si ya se mostró, ocultar el preloader inmediatamente
if (preloaderShown === 'true') {
  document.querySelector('.preloader').classList.add('hidden');
  document.body.style.overflow = 'auto';
} else {
  // Si es la primera vez, mostrar la animación
  const tl = gsap.timeline({
    onComplete: function() {
      // Guardar en localStorage que ya se mostró
      localStorage.setItem('latidermPreloaderShown', 'true');
    }
  });
  
  // Configurar posiciones iniciales con GSAP
  gsap.set(".text-lati", { 
    y: -350,
    x: 0,
    opacity: 1,
    scale: 0.8
  });
  gsap.set(".text-derm", { 
    y: 350,
    x: 0,
    opacity: 1,
    scale: 0.8
  });
   
  tl.to("body", {
    overflow: "hidden"
  })
    // Fade in y escalar mientras se mueven al centro
    .to(".text-lati", {
      duration: 1.8,
      y: 0,
      scale: 1,
      ease: "Power4.inOut"
    })
    .to(".text-derm", {
      duration: 1.8,
      y: 0,
      scale: 1,
      ease: "Power4.inOut"
    }, "<")
    // Pequeña pausa en el centro
    .to({}, {duration: 0.2})
    // Separar horizontalmente con bounce effect
    .to(".text-lati", {
      duration: 0.6,
      x: -95,
      ease: "Back.out(1.2)"
    })
    .to(".text-derm", {
      duration: 0.6,
      x: 95,
      ease: "Back.out(1.2)"
    }, "<")
    // Efecto de pulso cuando se forma la palabra
    .to(".text-container", {
      duration: 0.3,
      scale: 1.05,
      ease: "Power2.out"
    })
    .to(".text-container", {
      duration: 0.3,
      scale: 1,
      ease: "Power2.in"
    })
    // Pausa para apreciar
    .to({}, {duration: 0.8})
    // Fade out suave antes de cerrar
    .to(".text-container", {
      duration: 0.5,
      opacity: 0,
      scale: 0.95,
      ease: "Power2.in"
    })
    // Cerrar el preloader con efecto más suave
    .to(".preloader", {
      duration: 0.8,
      scaleY: 0,
      transformOrigin: "center",
      ease: "Power4.inOut"
    })
    .to("body", {
      overflow: "auto"
    }, "-=0.8")
    .to(".preloader", {
      display: "none"
    });
}
</script>