<div class="sc-c8dde83c-1 ibCODO"><script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.7/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.7/ScrollTrigger.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">

<section id="loni-start" class="min-h-screen bg-neutral-900 flex items-center justify-center relative overflow-hidden font-['Raleway']">
  <div class="absolute inset-0 bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 opacity-60"></div>
  
  <div class="relative z-10 text-center px-6 py-24 max-w-5xl mx-auto">
    <h1 class="loni-animate-title text-6xl md:text-8xl lg:text-9xl font-light text-white tracking-[0.08em] mb-8 uppercase">
      Loni Baur
    </h1>
    
    <p class="loni-animate-subtitle text-xl md:text-2xl lg:text-3xl font-light text-neutral-300 tracking-[0.15em] mb-6">
      Make-up Artist &amp; Beauty Expert
    </p>
    
    <div class="loni-animate-founder mb-20 mt-8">
      <a href="https://www.instagram.com/lonibaureditions/" target="_blank" rel="noopener noreferrer" class="inline-block text-neutral-400 hover:text-white transition-colors duration-500 text-lg md:text-xl tracking-wide border-b border-neutral-600 hover:border-white pb-2">
        Founder of @lonibaureditions
      </a>
    </div>
    
    <div class="flex flex-col sm:flex-row items-center justify-center gap-8 md:gap-12">
      <a href="https://lonibaur-editions.com/" target="_blank" rel="noopener noreferrer" class="loni-animate-btn group relative px-16 py-5 bg-white text-neutral-900 text-sm font-semibold tracking-[0.25em] uppercase overflow-hidden transition-all duration-500 hover:bg-neutral-200 hover:scale-105 min-w-[240px]">
        <span class="relative z-10">SHOP</span>
      </a>
      
      <a href="https://www.lonibaur.com/portfolio/" target="_blank" rel="noopener noreferrer" class="loni-animate-btn group relative px-16 py-5 border border-white text-white text-sm font-semibold tracking-[0.25em] uppercase overflow-hidden transition-all duration-500 hover:bg-white hover:text-neutral-900 hover:scale-105 min-w-[240px]">
        <span class="relative z-10">PORTFOLIO</span>
      </a>
    </div>
  </div>
  
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      gsap.registerPlugin(ScrollTrigger);
      
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: "#loni-start",
          start: "top 80%",
          toggleActions: "play none none reverse"
        }
      });
      
      tl.from(".loni-animate-title", {
        y: 80,
        opacity: 0,
        duration: 1.2,
        ease: "power3.out"
      })
      .from(".loni-animate-subtitle", {
        y: 50,
        opacity: 0,
        duration: 1,
        ease: "power3.out"
      }, "-=0.8")
      .from(".loni-animate-founder", {
        y: 30,
        opacity: 0,
        duration: 0.8,
        ease: "power3.out"
      }, "-=0.6")
      .from(".loni-animate-btn", {
        y: 40,
        opacity: 0,
        duration: 0.8,
        stagger: 0.2,
        ease: "power3.out"
      }, "-=0.4");
    });
  </script>
</section></div>