<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LUMEN & Co.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,400;1,500&family=Manrope:wght@300;400;600&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#0a0908;
    --surface:#141210;
    --gold:#c9a15a;
    --gold-soft:#e8cd94;
    --gold-dim:#7a6337;
    --ink:#efe9dd;
    --ink-dim:#8f887a;
    --line:rgba(201,161,90,0.14);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:var(--gold);color:#0a0908;}
  h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:400;}
  a{color:inherit;text-decoration:none;}

  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events:none; z-index:9999; mix-blend-mode:overlay;
  }

  .progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-soft));z-index:1000;}

  nav{
    position:fixed; top:0; left:0; right:0;
    display:flex; justify-content:space-between; align-items:center;
    padding:34px 6vw; z-index:100;
    mix-blend-mode:difference;
  }
  .logo{font-family:'Cormorant Garamond',serif;font-size:1.4rem;letter-spacing:0.04em;color:#fff;}
  .logo em{font-style:italic;}
  .nav-links{display:flex;gap:34px;font-size:0.76rem;letter-spacing:0.08em;text-transform:uppercase;color:#fff;}
  .nav-links a{opacity:0.75;transition:opacity 0.3s;}
  .nav-links a:hover{opacity:1;}
  @media(max-width:800px){.nav-links{display:none;}}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    height:100vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    background:
      radial-gradient(ellipse 70% 60% at 50% 30%, rgba(201,161,90,0.10), transparent 65%),
      radial-gradient(ellipse 50% 40% at 20% 80%, rgba(122,99,55,0.12), transparent 60%),
      #0a0908;
    overflow:hidden;
  }
  .hero-glow{
    position:absolute; top:38%; left:50%;
    width:520px; height:520px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(201,161,90,0.16), transparent 70%);
    filter:blur(40px);
    animation:pulse 6s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1);}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.12);}
  }
  .hero-fixture{
    position:relative; z-index:1;
    margin-bottom:8px;
    opacity:0; animation:fadeIn 1.4s ease 0.2s forwards;
  }
  .hero-fixture svg{width:130px;filter:drop-shadow(0 0 40px rgba(201,161,90,0.45));}
  .hero h1{
    position:relative; z-index:1;
    font-size:clamp(3.4rem, 9vw, 8rem);
    line-height:0.98;
    letter-spacing:-0.01em;
    opacity:0; animation:fadeUp 1.2s ease 0.5s forwards;
  }
  .hero h1 em{font-style:italic;color:var(--gold-soft);}
  .hero .eyebrow{
    position:relative; z-index:1;
    font-size:0.72rem; letter-spacing:0.4em; text-transform:uppercase;
    color:var(--gold); margin-bottom:26px;
    opacity:0; animation:fadeUp 1s ease 0.3s forwards;
  }
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}

  .scroll-hint{
    position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
    font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--ink-dim);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    opacity:0; animation:fadeUp 1s ease 1.1s forwards;
  }
  .scroll-hint .line{width:1px;height:34px;background:var(--gold-dim);animation:scrollLine 2.2s ease-in-out infinite;}
  @keyframes scrollLine{
    0%{transform:scaleY(0);transform-origin:top;}
    50%{transform:scaleY(1);transform-origin:top;}
    50.1%{transform-origin:bottom;}
    100%{transform:scaleY(0);transform-origin:bottom;}
  }

  /* ============ MARQUEE ============ */
  .marquee{
    padding:24px 0; overflow:hidden; white-space:nowrap;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .marquee-track{display:inline-flex; animation:marquee 30s linear infinite;}
  .marquee-track span{
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.3rem;
    color:var(--ink-dim); padding:0 36px; display:inline-flex; align-items:center; gap:36px;
  }
  .marquee-track span::after{content:"✦";color:var(--gold-dim);font-style:normal;font-size:0.8rem;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ============ SIGNATURE FIXTURE GALLERY ============ */
  /* Big alternating showcase, each panel is a rendered SVG "photo" of a fixture in a moody room-toned frame */
  .showcase{padding:0;}
  .panel{
    position:relative;
    height:100vh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .panel-bg{
    position:absolute; inset:-8%;
    will-change:transform;
  }
  .panel:nth-child(1) .panel-bg{background:radial-gradient(ellipse 60% 50% at 50% 35%, #241c12, #0a0908 70%);}
  .panel:nth-child(2) .panel-bg{background:radial-gradient(ellipse 60% 50% at 50% 40%, #1c1710, #0a0908 70%);}
  .panel:nth-child(3) .panel-bg{background:radial-gradient(ellipse 60% 50% at 50% 35%, #221a10, #0a0908 70%);}

  .panel-fixture{
    position:relative; z-index:2;
    width:min(340px, 40vw);
  }
  .panel-fixture svg{width:100%; transition:filter 0.6s ease;}
  .panel:hover .panel-fixture svg{filter:drop-shadow(0 0 55px rgba(201,161,90,0.5));}

  .panel-label{
    position:absolute; z-index:2;
    bottom:10%; left:50%; transform:translateX(-50%);
    text-align:center;
  }
  .panel-label .eyebrow{font-size:0.68rem;letter-spacing:0.3em;margin-bottom:10px;}
  .panel-label h2{font-size:clamp(2.2rem,4.5vw,3.6rem);}
  .panel-label h2 em{font-style:italic;color:var(--gold-soft);}

  /* ============ MASONRY (rendered swatches, not photos) ============ */
  .gallery-section{padding:160px 6vw 120px;}
  .g-head{text-align:center;margin-bottom:80px;}
  .g-head .eyebrow{display:block;margin-bottom:18px;}
  .g-head h2{font-size:clamp(2.4rem,5vw,4rem);}
  .g-head h2 em{font-style:italic;color:var(--gold-soft);}

  .masonry{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:15vw;
    gap:12px;
  }
  .m-item{position:relative;overflow:hidden;border-radius:2px;background:var(--surface);}
  .m-item:nth-child(1){grid-column:span 2;grid-row:span 2;}
  .m-item:nth-child(2){grid-column:span 2;grid-row:span 1;}
  .m-item:nth-child(3){grid-column:span 1;grid-row:span 1;}
  .m-item:nth-child(4){grid-column:span 1;grid-row:span 2;}
  .m-item:nth-child(5){grid-column:span 2;grid-row:span 1;}
  .m-item:nth-child(6){grid-column:span 2;grid-row:span 2;}
  .m-item:nth-child(7){grid-column:span 1;grid-row:span 1;}
  .m-item:nth-child(8){grid-column:span 1;grid-row:span 1;}

  .m-visual{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 40% 30%, #1e170d, #0d0b08 75%);
    transition:transform 1s cubic-bezier(0.16,1,0.3,1);
  }
  .m-item:hover .m-visual{transform:scale(1.06);}
  .m-visual svg{width:46%; opacity:0.7; transition:opacity 0.6s ease, filter 0.6s ease;}
  .m-item:hover .m-visual svg{opacity:1;filter:drop-shadow(0 0 26px rgba(201,161,90,0.55));}

  .m-caption{
    position:absolute; left:0; right:0; bottom:0;
    padding:18px 20px;
    background:linear-gradient(to top, rgba(10,9,8,0.9), transparent);
    opacity:0; transform:translateY(8px);
    transition:opacity 0.4s ease, transform 0.4s ease;
  }
  .m-item:hover .m-caption{opacity:1;transform:translateY(0);}
  .m-caption h4{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:400;color:#fff;}

  @media(max-width:900px){
    .masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:38vw;}
    .m-item{grid-column:span 1 !important;grid-row:span 1 !important;}
  }

  /* ============ CTA ============ */
  .cta{
    text-align:center; padding:200px 6vw;
    position:relative;
  }
  .cta .eyebrow{display:block;margin-bottom:22px;}
  .cta h2{font-size:clamp(3rem,7vw,5.6rem);line-height:1.05;}
  .cta h2 em{font-style:italic;color:var(--gold-soft);}
  .btn-primary{
    margin-top:48px;
    display:inline-block;
    background:var(--gold);
    color:#0a0908;
    padding:18px 44px;
    font-size:0.82rem;
    letter-spacing:0.08em;
    font-weight:600;
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(201,161,90,0.28);}

  footer{
    padding:44px 6vw; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
    font-size:0.74rem; color:var(--ink-dim);
  }

  .reveal{opacity:0;transform:translateY(32px);transition:opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-scale{opacity:0;transform:scale(0.94);transition:opacity 1.1s ease, transform 1.1s cubic-bezier(0.16,1,0.3,1);}
  .reveal-scale.in{opacity:1;transform:scale(1);}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
    .hero .eyebrow,.hero h1,.hero-fixture,.scroll-hint{opacity:1;animation:none;}
  }
</style>
</head>
<body>

<div class="progress" id="progress"></div>

<nav>
  <div class="logo">LUMEN <em>& Co.</em></div>
  <div class="nav-links">
    <a href="#koleksi">Koleksi</a>
    <a href="#kontak">Kontak</a>
  </div>
</nav>

<!-- HERO -->
<section class="hero">
  <div class="hero-glow"></div>
  <div>
    <span class="eyebrow">Fixtures Langka</span>
    <div class="hero-fixture">
      <svg viewBox="0 0 200 220" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 0 L100 26" stroke="#c9a15a" stroke-width="1.2"/>
        <ellipse cx="100" cy="34" rx="7" ry="7" fill="#e8cd94"/>
        <path d="M100 40 C 45 55, 35 130, 72 160 C 90 174, 110 174, 128 160 C 165 130, 155 55, 100 40 Z"
              stroke="#c9a15a" stroke-width="1" fill="rgba(201,161,90,0.06)"/>
        <path d="M62 82 C 82 68, 118 68, 138 82" stroke="#c9a15a" stroke-width="0.7" opacity="0.55"/>
        <path d="M58 110 C 80 96, 120 96, 142 110" stroke="#c9a15a" stroke-width="0.7" opacity="0.55"/>
        <circle cx="100" cy="122" r="3.5" fill="#e8cd94"/>
      </svg>
    </div>
    <h1>Cahaya <em>langka.</em></h1>
  </div>
  <div class="scroll-hint"><div class="line"></div>Scroll</div>
</section>

<div class="marquee">
  <div class="marquee-track">
    <span>Residensial</span><span>Hospitality</span><span>Edisi Terbatas</span><span>Bespoke</span>
    <span>Residensial</span><span>Hospitality</span><span>Edisi Terbatas</span><span>Bespoke</span>
  </div>
</div>

<!-- SHOWCASE PANELS -->
<div class="showcase">
  <div class="panel">
    <div class="panel-bg parallax-bg"></div>
    <div class="panel-fixture">
      <svg viewBox="0 0 200 240" fill="none">
        <path d="M100 0 L100 20" stroke="#c9a15a" stroke-width="1"/>
        <path d="M40 30 C60 15, 140 15, 160 30" stroke="#c9a15a" stroke-width="1"/>
        <path d="M46 55 C65 42, 135 42, 154 55" stroke="#c9a15a" stroke-width="1"/>
        <path d="M52 80 C68 68, 132 68, 148 80" stroke="#c9a15a" stroke-width="1"/>
        <circle cx="100" cy="30" r="3" fill="#e8cd94"/>
        <circle cx="100" cy="55" r="3" fill="#e8cd94"/>
        <circle cx="100" cy="80" r="3" fill="#e8cd94"/>
      </svg>
    </div>
    <div class="panel-label reveal">
      <span class="eyebrow">Residensial</span>
      <h2>Ruang tamu, <em>berkarakter.</em></h2>
    </div>
  </div>

  <div class="panel">
    <div class="panel-bg parallax-bg"></div>
    <div class="panel-fixture">
      <svg viewBox="0 0 200 200" fill="none">
        <circle cx="100" cy="100" r="70" stroke="#c9a15a" stroke-width="1"/>
        <circle cx="100" cy="100" r="48" stroke="#c9a15a" stroke-width="0.8"/>
        <circle cx="100" cy="100" r="26" stroke="#e8cd94" stroke-width="0.8"/>
        <circle cx="100" cy="100" r="6" fill="#e8cd94"/>
      </svg>
    </div>
    <div class="panel-label reveal">
      <span class="eyebrow">Hospitality</span>
      <h2>Lobby, <em>tak terlupakan.</em></h2>
    </div>
  </div>

  <div class="panel">
    <div class="panel-bg parallax-bg"></div>
    <div class="panel-fixture">
      <svg viewBox="0 0 200 220" fill="none">
        <path d="M30 40 Q100 20 170 40 L155 170 Q100 195 45 170 Z" stroke="#c9a15a" stroke-width="1" fill="rgba(201,161,90,0.05)"/>
        <path d="M100 40 L100 195" stroke="#c9a15a" stroke-width="0.5" opacity="0.5"/>
      </svg>
    </div>
    <div class="panel-label reveal">
      <span class="eyebrow">Material</span>
      <h2>Detail, <em>terasa mewah.</em></h2>
    </div>
  </div>
</div>

<!-- GALLERY -->
<section class="gallery-section" id="koleksi">
  <div class="g-head reveal">
    <span class="eyebrow">Koleksi</span>
    <h2>Bentuk <em>terpilih.</em></h2>
  </div>

  <div class="masonry reveal-scale">
    <div class="m-item">
      <div class="m-visual">
        <svg viewBox="0 0 100 100" fill="none"><path d="M20 30 C40 15,60 15,80 30" stroke="#c9a15a" stroke-width="1"/><path d="M25 45 C42 32,58 32,75 45" stroke="#c9a15a" stroke-width="1"/><path d="M30 60 C44 50,56 50,70 60" stroke="#c9a15a" stroke-width="1"/><circle cx="50" cy="30" r="2.5" fill="#e8cd94"/><circle cx="50" cy="45" r="2.5" fill="#e8cd94"/><circle cx="50" cy="60" r="2.5" fill="#e8cd94"/></svg>
      </div>
      <div class="m-caption"><h4>Cascade Noir</h4></div>
    </div>
    <div class="m-item">
      <div class="m-visual">
        <svg viewBox="0 0 100 100" fill="none"><circle cx="50" cy="40" r="20" stroke="#c9a15a" stroke-width="1"/><circle cx="50" cy="40" r="12" stroke="#c9a15a" stroke-width="0.6"/><line x1="50" y1="0" x2="50" y2="20" stroke="#c9a15a" stroke-width="1"/></svg>
      </div>
      <div class="m-caption"><h4>Orbit Brass</h4></div>
    </div>
    <div class="m-item">
      <div class="m-visual">
        <svg viewBox="0 0 100 100" fill="none"><path d="M32 20 Q50 12 68 20 L63 78 Q50 86 37 78 Z" stroke="#c9a15a" stroke-width="1"/></svg>
      </div>
      <div class="m-caption"><h4>Vessel Amber</h4></div>
    </div>
    <div class="m-item">
      <div class="m-visual">
        <svg viewBox="0 0 100 140" fill="none"><path d="M50 10 L75 45 L50 80 L25 45 Z" stroke="#c9a15a" stroke-width="1"/><line x1="50" y1="80" x2="50" y2="130" stroke="#c9a15a" stroke-width="0.6" opacity="0.5"/></svg>
      </div>
      <div class="m-caption"><h4>Facet Bronze</h4></div>
    </div>
    <div class="m-item">
      <div class="m-visual">
        <svg viewBox="0 0 100 100" fill="none"><path d="M35 15 Q50 35 35 55 Q50 75 35 95" stroke="#c9a15a" stroke-width="1" fill="none"/><path d="M65 15 Q50 35 65 55 Q50 75 65 95" stroke="#c9a15a" stroke-width="1" fill="none"/></svg>
      </div>
      <div class="m-caption"><h4>Ripple Standing</h4></div>
    </div>
    <div class="m-item">
      <div class="m-visual">
        <svg viewBox="0 0 100 100" fill="none"><circle cx="50" cy="50" r="34" stroke="#c9a15a" stroke-width="1"/><circle cx="50" cy="50" r="22" stroke="#c9a15a" stroke-width="0.7"/><circle cx="50" cy="50" r="10" stroke="#e8cd94" stroke-width="0.7"/></svg>
      </div>
      <div class="m-caption"><h4>Halo Concentric</h4></div>
    </div>
    <div class="m-item">
      <div class="m-visual">
        <svg viewBox="0 0 100 100" fill="none"><path d="M50 15 L50 85 M20 50 L80 50" stroke="#c9a15a" stroke-width="1"/><circle cx="50" cy="50" r="8" fill="#e8cd94" opacity="0.8"/></svg>
      </div>
      <div class="m-caption"><h4>Compass Gold</h4></div>
    </div>
    <div class="m-item">
      <div class="m-visual">
        <svg viewBox="0 0 100 100" fill="none"><ellipse cx="50" cy="50" rx="34" ry="18" stroke="#c9a15a" stroke-width="1"/><ellipse cx="50" cy="50" rx="18" ry="9" stroke="#e8cd94" stroke-width="0.7"/></svg>
      </div>
      <div class="m-caption"><h4>Ember Warm</h4></div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="cta" id="kontak">
  <span class="eyebrow reveal">Mulai</span>
  <h2 class="reveal">Cahaya <em>Anda,</em><br>menanti.</h2>
  <a href="mailto:hello@lumenco.id" class="btn-primary reveal">Hubungi Kami →</a>
</section>

<footer>
  <span>© 2026 Lumen & Co.</span>
  <span>Surabaya, Indonesia</span>
</footer>

<script>
  const progress = document.getElementById('progress');
  window.addEventListener('scroll', () => {
    const h = document.documentElement;
    progress.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100 + '%';
  });

  const revealEls = document.querySelectorAll('.reveal, .reveal-scale');
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => { if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
  }, {threshold:0.12});
  revealEls.forEach(el => io.observe(el));

  const parallaxEls = document.querySelectorAll('.parallax-bg');
  let ticking = false;
  function updateParallax(){
    parallaxEls.forEach(el => {
      const rect = el.parentElement.getBoundingClientRect();
      if(rect.bottom > -200 && rect.top < window.innerHeight + 200){
        const offset = (rect.top - window.innerHeight/2) * 0.15;
        el.style.transform = `translateY(${offset}px)`;
      }
    });
    ticking = false;
  }
  window.addEventListener('scroll', () => {
    if(!ticking){ window.requestAnimationFrame(updateParallax); ticking = true; }
  });
  updateParallax();
</script>

</body>
</html>