<section class="nb-stk" aria-label="Sylve sticky scroll navbar demo">
  <div class="progress-bar" data-nb-stk-progress aria-hidden="true"></div>

  <nav data-nb-stk-nav aria-label="Primary">
    <div class="nav-inner">
      <a href="#nb-stk-home" class="brand">
        <span class="brand-main">Sylvé</span>
        <span class="brand-sub">Sustainable Living</span>
      </a>
      <ul class="nav-links">
        <li><a href="#nb-stk-home" class="active">Home</a></li>
        <li><a href="#nb-stk-about">About</a></li>
        <li><a href="#nb-stk-products">Products</a></li>
        <li><a href="#nb-stk-journal">Journal</a></li>
        <li><a href="#nb-stk-contact">Contact</a></li>
      </ul>
      <div class="nav-actions">
        <button class="btn-ghost" type="button">Log in</button>
        <button class="btn-solid" type="button">Shop Now</button>
      </div>
    </div>
  </nav>

  <section class="hero" id="nb-stk-home">
    <div class="hero-circle hc-1" aria-hidden="true"></div>
    <div class="hero-circle hc-2" aria-hidden="true"></div>
    <div class="hero-circle hc-3" aria-hidden="true"></div>
    <div class="hero-circle hc-4" aria-hidden="true"></div>
    <div class="hero-inner">
      <p class="hero-eyebrow">New Collection 2026</p>
      <h1>Living in<br>full <em>bloom</em></h1>
      <p class="hero-body">Scroll down to watch the navbar gracefully compress and transform — growing more refined as you descend deeper into the page.</p>
      <div class="hero-ctas">
        <button class="cta-primary" type="button">Explore Collection</button>
        <a href="#nb-stk-about" class="cta-secondary">
          Learn more
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
      </div>
    </div>
    <div class="scroll-hint" aria-hidden="true">
      <div class="scroll-mouse"></div>
      <span class="scroll-hint-text">Scroll to see nav transform</span>
    </div>
  </section>

  <section class="section" id="nb-stk-about">
    <div class="section-inner">
      <p class="section-label">Our Philosophy</p>
      <h2 class="section-title">Designed with the<br><em>earth in mind</em></h2>
      <p class="section-body">Every product in our collection is crafted with deep respect for natural systems. We source exclusively from regenerative farms and artisan workshops that prioritize ecological balance over extraction.</p>
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-num">01</div>
          <div class="feature-title">Regenerative</div>
          <div class="feature-text">All materials sourced from certified regenerative agriculture operations that actively restore soil biodiversity.</div>
        </div>
        <div class="feature-card">
          <div class="feature-num">02</div>
          <div class="feature-title">Zero-Waste</div>
          <div class="feature-text">Our production process generates zero landfill waste. All offcuts are composted or repurposed into secondary goods.</div>
        </div>
        <div class="feature-card">
          <div class="feature-num">03</div>
          <div class="feature-title">Transparent</div>
          <div class="feature-text">Every product includes a full supply chain trace, from seed to shelf, available in your account dashboard.</div>
        </div>
      </div>
    </div>
  </section>

  <div class="divider-section" id="nb-stk-products">
    <div class="section-inner divider-inner">
      <h2>"The most sustainable product<br>is one that lasts a lifetime."</h2>
      <button type="button">Browse All Products →</button>
    </div>
  </div>

  <section class="section long-section" id="nb-stk-journal">
    <div class="section-inner">
      <p class="section-label">From the Journal</p>
      <h2 class="section-title">Stories of<br><em>slow living</em></h2>
      <p class="section-body">Reflections on seasonality, craft, ecology, and the small daily choices that accumulate into a life well-lived in relationship with the living world.</p>
    </div>
  </section>

  <section class="section long-section" id="nb-stk-contact">
    <div class="section-inner">
      <p class="section-label">Get in Touch</p>
      <h2 class="section-title">Let's grow<br><em>together</em></h2>
      <p class="section-body">Whether you're a stockist, collaborator, or simply curious — we'd love to hear from you. Reach us at [email protected]</p>
    </div>
  </section>
</section>

/* ─── 05 Sylvé — sticky scroll-transforming navbar UI ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,900;1,9..144,300;1,9..144,600&family=Mulish:wght@300;400;600&display=swap');

.nb-stk {
  --nb-stk-sage: #3a5a40;
  --nb-stk-sage-light: #4e7c57;
  --nb-stk-sand: #f7f4ef;
  --nb-stk-warm: #e8e0d0;
  --nb-stk-warm-2: #d4c9b4;
  --nb-stk-clay: #8b6f47;
  --nb-stk-text: #1c2417;
  --nb-stk-muted: #7a8c72;
  --nb-stk-nav-h-tall: 96px;
  --nb-stk-nav-h-short: 60px;

  position: relative;
  width: 100%;
  min-height: 1800px;
  background: var(--nb-stk-sand);
  color: var(--nb-stk-text);
  font-family: 'Mulish', sans-serif;
  /* overflow:clip keeps horizontal escapes contained without
     establishing a scrolling container — overflow:hidden would make
     this wrapper the scrolling ancestor for the sticky nav and break
     sticky behavior inside the iframe + gallery context. */
  overflow: clip;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
.nb-stk *, .nb-stk *::before, .nb-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-stk .progress-bar { position: absolute; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--nb-stk-sage), var(--nb-stk-clay)); z-index: 200; transform-origin: left; transform: scaleX(0); transition: transform 0.05s linear; border-radius: 0 2px 2px 0; width: 100%; }

.nb-stk nav { position: sticky; top: 0; left: 0; right: 0; z-index: 100; height: var(--nb-stk-nav-h-tall); background: transparent; transition: height 0.4s cubic-bezier(0.4,0,0.2,1), background 0.4s ease, box-shadow 0.4s ease, border-bottom 0.4s ease; }
.nb-stk nav.scrolled { height: var(--nb-stk-nav-h-short); background: rgba(247,244,239,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(58,90,64,0.1), 0 8px 32px rgba(28,36,23,0.06); }
.nb-stk .nav-inner { max-width: 1320px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 3rem; gap: 2rem; transition: padding 0.4s cubic-bezier(0.4,0,0.2,1); }
.nb-stk nav.scrolled .nav-inner { padding: 0 2rem; }
.nb-stk .brand { text-decoration: none; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; }
.nb-stk .brand-main { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; color: var(--nb-stk-sage); line-height: 1; transition: font-size 0.4s cubic-bezier(0.4,0,0.2,1); }
.nb-stk .brand-sub { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-stk-muted); line-height: 1; margin-top: 3px; transition: opacity 0.3s, max-height 0.3s, margin 0.3s; max-height: 20px; overflow: hidden; }
.nb-stk nav.scrolled .brand-main { font-size: 1.3rem; }
.nb-stk nav.scrolled .brand-sub { opacity: 0; max-height: 0; margin: 0; }
.nb-stk .nav-links { display: flex; align-items: center; list-style: none; gap: 0.25rem; flex: 1; justify-content: center; }
.nb-stk .nav-links a { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-muted); text-decoration: none; padding: 8px 14px; border-radius: 100px; transition: color 0.2s, background 0.2s; position: relative; }
.nb-stk .nav-links a:hover { color: var(--nb-stk-sage); background: rgba(58,90,64,0.06); }
.nb-stk .nav-links a.active { color: var(--nb-stk-sage); background: rgba(58,90,64,0.1); }
.nb-stk .nav-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nb-stk .btn-ghost { font-family: 'Mulish', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-sage); background: none; border: 1.5px solid var(--nb-stk-warm-2); border-radius: 100px; padding: 8px 18px; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.nb-stk .btn-ghost:hover { border-color: var(--nb-stk-sage); background: rgba(58,90,64,0.04); }
.nb-stk .btn-solid { font-family: 'Mulish', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-sand); background: var(--nb-stk-sage); border: 1.5px solid var(--nb-stk-sage); border-radius: 100px; padding: 8px 20px; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.nb-stk .btn-solid:hover { background: var(--nb-stk-sage-light); transform: translateY(-1px); }

.nb-stk .hero { min-height: 680px; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 1rem; }
.nb-stk .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(58,90,64,0.06) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(139,111,71,0.06) 0%, transparent 50%); }
.nb-stk .hero-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.nb-stk .hc-1 { width: 500px; height: 500px; border: 1px solid rgba(58,90,64,0.1); top: 10%; right: -100px; }
.nb-stk .hc-2 { width: 300px; height: 300px; border: 1px solid rgba(58,90,64,0.08); top: 25%; right: 50px; }
.nb-stk .hc-3 { width: 40px; height: 40px; background: rgba(58,90,64,0.12); bottom: 30%; left: 10%; animation: nb-stk-float 8s ease-in-out infinite; }
.nb-stk .hc-4 { width: 16px; height: 16px; background: var(--nb-stk-clay); opacity: 0.3; top: 35%; left: 25%; animation: nb-stk-float 12s ease-in-out infinite reverse; border-radius: 50%; }
@keyframes nb-stk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.nb-stk .hero-inner { max-width: 1320px; margin: 0 auto; padding: 4rem 3rem; position: relative; z-index: 1; width: 100%; }
.nb-stk .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-stk-clay); margin-bottom: 2rem; }
.nb-stk .hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--nb-stk-clay); }
.nb-stk h1 { font-family: 'Fraunces', serif; font-size: clamp(4rem, 7vw, 8rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--nb-stk-text); margin-bottom: 2rem; max-width: 14ch; }
.nb-stk h1 em { font-style: italic; color: var(--nb-stk-sage); }
.nb-stk .hero-body { font-size: 1.05rem; color: var(--nb-stk-muted); line-height: 1.7; max-width: 42ch; margin-bottom: 2.5rem; }
.nb-stk .hero-ctas { display: flex; gap: 1rem; align-items: center; }
.nb-stk .cta-primary { font-family: 'Mulish', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-stk-sand); background: var(--nb-stk-sage); border: none; border-radius: 100px; padding: 14px 32px; cursor: pointer; transition: background 0.2s, transform 0.15s; box-shadow: 0 4px 24px rgba(58,90,64,0.3); }
.nb-stk .cta-primary:hover { background: var(--nb-stk-sage-light); transform: translateY(-2px); }
.nb-stk .cta-secondary { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--nb-stk-muted); text-decoration: none; transition: color 0.2s, gap 0.2s; }
.nb-stk .cta-secondary:hover { color: var(--nb-stk-sage); gap: 12px; }

.nb-stk .section { padding: 8rem 0; }
.nb-stk .section-inner { max-width: 1320px; margin: 0 auto; padding: 0 3rem; }
.nb-stk .section-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-stk-clay); margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }
.nb-stk .section-label::after { content: ''; flex: 1; max-width: 40px; height: 1px; background: var(--nb-stk-clay); }
.nb-stk .section-title { font-family: 'Fraunces', serif; font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 300; letter-spacing: -0.02em; color: var(--nb-stk-text); line-height: 1.1; margin-bottom: 1.5rem; }
.nb-stk .section-title em { font-style: italic; color: var(--nb-stk-sage); }
.nb-stk .section-body { font-size: 1rem; color: var(--nb-stk-muted); max-width: 52ch; line-height: 1.75; }

.nb-stk .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; margin-top: 4rem; background: var(--nb-stk-warm-2); border: 1.5px solid var(--nb-stk-warm-2); }
.nb-stk .feature-card { background: var(--nb-stk-sand); padding: 2.5rem 2rem; transition: background 0.2s; }
.nb-stk .feature-card:hover { background: var(--nb-stk-warm); }
.nb-stk .feature-num { font-family: 'Fraunces', serif; font-size: 2.5rem; font-weight: 900; color: rgba(58,90,64,0.12); line-height: 1; margin-bottom: 1rem; }
.nb-stk .feature-title { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: var(--nb-stk-text); margin-bottom: 0.75rem; }
.nb-stk .feature-text { font-size: 0.85rem; color: var(--nb-stk-muted); line-height: 1.65; }

.nb-stk .divider-section { background: var(--nb-stk-sage); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
.nb-stk .divider-section::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px); }
.nb-stk .divider-inner { position: relative; z-index: 1; }
.nb-stk .divider-inner h2 { font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; font-style: italic; color: rgba(247,244,239,0.95); line-height: 1.2; margin-bottom: 2rem; }
.nb-stk .divider-inner button { font-family: 'Mulish', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-stk-sage); background: var(--nb-stk-sand); border: none; border-radius: 100px; padding: 13px 30px; cursor: pointer; }
.nb-stk .long-section { padding: 6rem 0; border-top: 1px solid var(--nb-stk-warm-2); }

.nb-stk .scroll-hint { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--nb-stk-muted); z-index: 1; }
.nb-stk .scroll-hint-text { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; }
.nb-stk .scroll-mouse { width: 22px; height: 34px; border: 1.5px solid var(--nb-stk-warm-2); border-radius: 12px; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.nb-stk .scroll-mouse::after { content: ''; width: 4px; height: 8px; background: var(--nb-stk-sage); border-radius: 2px; animation: nb-stk-scrollDot 1.8s ease-in-out infinite; }
@keyframes nb-stk-scrollDot { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.2; transform: translateY(6px); } }

@media (max-width: 768px) {
  .nb-stk .feature-grid { grid-template-columns: 1fr; }
  .nb-stk .hero-inner { padding: 3rem 1.5rem; }
  .nb-stk .section-inner { padding: 0 1.5rem; }
  .nb-stk .nav-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-stk nav, .nb-stk .brand-main, .nb-stk .brand-sub, .nb-stk .hc-3, .nb-stk .hc-4, .nb-stk .scroll-mouse::after { animation: none !important; transition: none !important; }
}

(() => {
  // Scoped sticky-scroll navbar wiring. The source mock bound a
  // `window.scroll` listener and read documentElement.scrollTop —
  // that would track the host gallery's scroll. Re-scope: use a
  // sentinel `hero` element to toggle the .scrolled class via
  // IntersectionObserver (fires when the hero top passes 60px below
  // the viewport top), and compute reading progress from the wrapper's
  // own bounding rect against the viewport.
  const root = document.querySelector('.nb-stk');
  if (!root) return;
  const nav = root.querySelector('[data-nb-stk-nav]');
  const progress = root.querySelector('[data-nb-stk-progress]');
  const hero = root.querySelector('.hero');
  if (!nav || !progress) return;

  // Toggle .scrolled when the hero crosses 60px below the viewport top.
  if (hero && 'IntersectionObserver' in window) {
    const io = new IntersectionObserver(
      ([entry]) => {
        // entry.boundingClientRect.top < -60 means the hero has scrolled
        // up past the threshold. We rely on entry.isIntersecting plus
        // the sentinel offset.
        const top = entry.boundingClientRect.top;
        nav.classList.toggle('scrolled', top < -60);
      },
      { threshold: [0], rootMargin: '-60px 0px 0px 0px' }
    );
    io.observe(hero);
  }

  function updateProgress() {
    const r = root.getBoundingClientRect();
    const vh = window.innerHeight;
    const total = root.offsetHeight - vh;
    if (total <= 0) { progress.style.transform = 'scaleX(0)'; return; }
    const scrolled = Math.min(Math.max(-r.top, 0), total);
    const pct = scrolled / total;
    progress.style.transform = 'scaleX(' + pct.toFixed(4) + ')';
  }
  window.addEventListener('scroll', updateProgress, { passive: true });
  window.addEventListener('resize', updateProgress);
  updateProgress();

  // Smooth scroll for in-page anchors.
  root.querySelectorAll('.nav-links a').forEach((a) => {
    a.addEventListener('click', (e) => {
      const href = a.getAttribute('href');
      if (!href || !href.startsWith('#')) return;
      const target = root.querySelector(href);
      if (!target) return;
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      root.querySelectorAll('.nav-links a').forEach((l) => l.classList.remove('active'));
      a.classList.add('active');
    });
  });
})();