<section class="cd-flb" aria-label="Page-turn flipbook demo">
  <div class="card">
    <div class="book-scene">
      <div class="book" data-cd-flb-book>
        <div class="book-shadow" aria-hidden="true"></div>

        <div class="left-cover" data-cd-flb-cover>
          <div class="cover-art">
            <div class="cover-eyebrow">FORMA STUDIO</div>
            <div class="cover-rule"></div>
            <div class="cover-title">FORMA<span class="cover-vol">Vol. VI</span></div>
            <div class="cover-rule"></div>
            <div class="cover-sub">Design · Architecture · Thought</div>
          </div>
        </div>

        <div class="page" data-page="0">
          <div class="page-front paper-warm">
            <div class="pg pg-warm">
              <div class="spread-label">Chapter One</div>
              <div class="spread-title sm">The Weight<br />of Silence</div>
              <div class="spread-rule"></div>
              <p class="spread-body">There is a moment before speech when the world holds its breath. Architecture inhabits this pause — not the buildings themselves, but the spaces they carve from air.</p>
              <p class="spread-body mt">The corridor narrows, draws the eye forward. Light slants from an unseen source. To walk through is to be composed by the building.</p>
              <span class="pg-num right">1</span>
              <span class="spread-big-num">I</span>
            </div>
          </div>
          <div class="page-back paper-cool">
            <div class="pg pg-cool">
              <div class="spread-label">Essay II</div>
              <div class="spread-title xs">Form<br />Without<br />Apology</div>
              <div class="spread-rule alt"></div>
              <p class="spread-body alt">To design is to make a claim about the world as it should be — not as it is. The blueprint precedes the building, and in that gap lives everything called imagination.</p>
              <span class="pg-num left">2</span>
            </div>
          </div>
        </div>

        <div class="page" data-page="1">
          <div class="page-front paper-sage">
            <div class="pg pg-sage">
              <div class="spread-label">Visual Field</div>
              <div class="spread-img sage-img">
                <div class="circle-outer">
                  <div class="circle-inner"></div>
                </div>
              </div>
              <div class="spread-pullquote sage">"Growth is not linear. It is fractal — repeating at every scale."</div>
              <p class="spread-body sage-body">The forest does not plan its canopy. Each tree reaches for light by the same simple rule: grow toward the sun. The emergent whole is unplanned and irreducible.</p>
              <span class="pg-num right sage">3</span>
            </div>
          </div>
          <div class="page-back paper-rose">
            <div class="pg pg-rose">
              <div class="spread-label">Interlude</div>
              <div class="spread-title sm rose">Red<br />Notation</div>
              <div class="spread-rule rose"></div>
              <p class="spread-body rose-body">Color arrives before language. Red is felt in the chest before named by the tongue. The ancient painters knew this — their ochre hands pressed flat on cave walls were not decoration. They were declaration.</p>
              <span class="pg-num left rose">4</span>
            </div>
          </div>
        </div>

        <div class="page" data-page="2">
          <div class="page-front paper-warm">
            <div class="pg pg-warm">
              <div class="spread-label">Final Study</div>
              <div class="spread-title sm">Endings<br />as Form</div>
              <div class="spread-rule"></div>
              <p class="spread-body">Every designed thing must eventually end — the page turn, the last note, the exit from the building. The best designs make their endings feel inevitable, not arbitrary.</p>
              <div class="spread-pullquote warm">"The final line is the first thing written."</div>
              <span class="pg-num right">5</span>
            </div>
          </div>
          <div class="page-back paper-ink">
            <div class="pg pg-ink">
              <div class="colophon-label">COLOPHON</div>
              <div class="colophon-title">FORMA</div>
              <div class="colophon-sub">A Journal of Design Thought</div>
              <p class="colophon-body">Issue VI · Printed on FSC-certified stock · Typography set in Playfair Display and EB Garamond · All rights reserved ©</p>
              <span class="pg-num left ink">6</span>
            </div>
          </div>
        </div>

      </div>

      <div class="nav">
        <button class="nav-btn" type="button" data-cd-flb-prev disabled>← Prev</button>
        <span class="page-counter" data-cd-flb-counter>Spread 1 of 4</span>
        <button class="nav-btn" type="button" data-cd-flb-next>Next →</button>
      </div>

    </div>
  </div>
</section>

/* ─── 04 Page-Turn Flipbook — editorial book ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

.cd-flb {
  --cd-flb-bg: #1c1410;

  position: relative;
  width: 100%;
  min-height: 600px;
  background: var(--cd-flb-bg);
  font-family: 'EB Garamond', Georgia, serif;
  overflow: hidden;
  perspective: 2400px;
  box-sizing: border-box;
}

.cd-flb *,
.cd-flb *::before,
.cd-flb *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cd-flb .card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}
.cd-flb .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(180,120,40,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cd-flb .book-scene {
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-4deg);
  transition: transform 0.6s ease;
  position: relative;
  z-index: 1;
}
.cd-flb .book-scene:hover { transform: rotateX(4deg) rotateY(-2deg); }

.cd-flb .book {
  width: 560px;
  height: 360px;
  position: relative;
  transform-style: preserve-3d;
}
.cd-flb .book::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 12px;
  transform: translateX(-50%) translateZ(1px);
  background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.4) 100%);
  z-index: 20;
  pointer-events: none;
}

.cd-flb .page {
  position: absolute;
  width: 280px;
  height: 360px;
  top: 0;
  left: 280px;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cd-flb .page.flipped { transform: rotateY(-180deg); }

.cd-flb .page-front,
.cd-flb .page-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
}
.cd-flb .page-back { transform: rotateY(180deg); }

.cd-flb .left-cover {
  position: absolute;
  left: 0; top: 0;
  width: 280px; height: 360px;
  z-index: 0;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
}

.cd-flb .pg {
  width: 100%; height: 100%;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cd-flb .pg-warm { color: #2a1f14; }
.cd-flb .pg-cool { color: #2a2432; }
.cd-flb .pg-rose { color: #2a1418; }
.cd-flb .pg-sage { color: #1a2a1e; }
.cd-flb .pg-ink  { color: #e8d8c0; }

.cd-flb .pg-num {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  letter-spacing: 2px;
  position: absolute;
  bottom: 16px;
}
.cd-flb .pg-num.right { right: 22px; color: #8a6a4a; }
.cd-flb .pg-num.left  { left: 22px; color: #7a6898; }
.cd-flb .pg-num.rose  { color: #8a4050; }
.cd-flb .pg-num.sage  { color: #4a7a50; }
.cd-flb .pg-num.ink   { color: rgba(200,180,140,0.4); }

.cd-flb .page-front::after,
.cd-flb .page-back::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
}
.cd-flb .page-front::after { right: 0; background: linear-gradient(to right, transparent, rgba(0,0,0,0.14)); }
.cd-flb .page-back::after  { left: 0; background: linear-gradient(to left, transparent, rgba(0,0,0,0.14)); }
.cd-flb .left-cover::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.2));
}

.cd-flb .paper-warm { background: #f5ece0; }
.cd-flb .paper-cool { background: #ede8f0; }
.cd-flb .paper-rose { background: #f5e8e8; }
.cd-flb .paper-sage { background: #e8f0e8; }
.cd-flb .paper-ink  { background: #1a1510; }

.cd-flb .spread-label {
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 16px;
}
.cd-flb .spread-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 14px;
}
.cd-flb .spread-title.sm { font-size: 26px; }
.cd-flb .spread-title.xs { font-size: 22px; }
.cd-flb .spread-title.rose { color: #5a1828; }
.cd-flb .spread-body {
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  line-height: 1.78;
  opacity: 0.75;
}
.cd-flb .spread-body.mt { margin-top: 10px; }
.cd-flb .spread-body.alt { color: #3a2a50; }
.cd-flb .spread-body.rose-body { color: #3a1820; }
.cd-flb .spread-body.sage-body { color: #2a3a26; }
.cd-flb .spread-pullquote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  border-left: 2px solid currentColor;
  padding-left: 14px;
  margin: 16px 0;
  opacity: 0.8;
}
.cd-flb .spread-pullquote.warm { border-color: #8a6a4a; color: #4a3424; }
.cd-flb .spread-pullquote.sage { border-color: #3a6a40; color: #2a4a2e; }
.cd-flb .spread-rule {
  width: 40px; height: 1px;
  background: currentColor;
  opacity: 0.3;
  margin: 14px 0;
}
.cd-flb .spread-rule.alt { background: #4a3868; }
.cd-flb .spread-rule.rose { background: #8a3040; }
.cd-flb .spread-img {
  width: 100%; height: 100px;
  border-radius: 4px;
  margin: 14px 0;
  overflow: hidden;
  flex-shrink: 0;
}
.cd-flb .sage-img {
  background: linear-gradient(135deg, #2a4a2e, #1a3020);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-flb .circle-outer {
  width: 64px; height: 64px;
  border: 2px solid rgba(120,200,120,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-flb .circle-inner {
  width: 32px; height: 32px;
  background: rgba(120,200,120,0.2);
  border-radius: 50%;
}
.cd-flb .spread-big-num {
  font-family: 'Playfair Display', serif;
  font-size: 80px;
  font-weight: 900;
  line-height: 0.9;
  opacity: 0.07;
  position: absolute;
  right: 16px;
  bottom: 30px;
}

/* Cover art */
.cd-flb .cover-art {
  width: 100%; height: 100%;
  background: linear-gradient(148deg, #1a0f08, #0e0a06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px;
  border-radius: 4px 0 0 4px;
  position: relative;
  overflow: hidden;
}
.cd-flb .cover-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(180,120,40,0.12) 0%, transparent 70%);
}
.cd-flb .cover-eyebrow {
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  letter-spacing: 5px;
  color: rgba(200,160,80,0.55);
  margin-bottom: 26px;
  z-index: 1;
}
.cd-flb .cover-rule {
  width: 56px;
  height: 1px;
  background: rgba(200,160,80,0.35);
  margin: 0 0 26px;
  z-index: 1;
}
.cd-flb .cover-title {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 900;
  color: #f0e4cc;
  text-align: center;
  line-height: 1.1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-flb .cover-vol {
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  opacity: 0.7;
  margin-top: 6px;
}
.cd-flb .cover-rule:nth-of-type(2),
.cd-flb .cover-title + .cover-rule {
  margin: 26px 0;
}
.cd-flb .cover-sub {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(200,160,80,0.55);
  letter-spacing: 1px;
  z-index: 1;
}

.cd-flb .colophon-label {
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  letter-spacing: 4px;
  opacity: 0.35;
  margin-bottom: 18px;
}
.cd-flb .colophon-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  opacity: 0.9;
  margin-bottom: 8px;
}
.cd-flb .colophon-sub {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 12px;
  opacity: 0.5;
  margin-bottom: 22px;
}
.cd-flb .colophon-body {
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  line-height: 1.8;
  opacity: 0.45;
}

.cd-flb .nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  position: relative;
  z-index: 100;
}
.cd-flb .nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(200,170,120,0.7);
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.cd-flb .nav-btn:hover { color: rgba(220,190,140,1); background: rgba(200,170,120,0.08); }
.cd-flb .nav-btn:disabled { opacity: 0.3; cursor: default; }

.cd-flb .page-counter {
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  color: rgba(200,170,120,0.45);
  letter-spacing: 2px;
  min-width: 80px;
  text-align: center;
}

.cd-flb .book-shadow {
  position: absolute;
  bottom: -18px;
  left: 10%;
  right: 10%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%);
  filter: blur(12px);
  z-index: -1;
}

@media (max-width: 720px) {
  .cd-flb .book { width: 360px; height: 280px; }
  .cd-flb .page,
  .cd-flb .left-cover { width: 180px; height: 280px; }
  .cd-flb .page { left: 180px; }
  .cd-flb .pg { padding: 22px 18px; }
  .cd-flb .spread-title.sm { font-size: 20px; }
  .cd-flb .spread-title.xs { font-size: 18px; }
  .cd-flb .cover-title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-flb .book-scene,
  .cd-flb .page { transition: none !important; }
}

(() => {
  const root = document.querySelector('.cd-flb');
  if (!root) return;
  const book = root.querySelector('[data-cd-flb-book]');
  const prevBtn = root.querySelector('[data-cd-flb-prev]');
  const nextBtn = root.querySelector('[data-cd-flb-next]');
  const counter = root.querySelector('[data-cd-flb-counter]');
  if (!book || !prevBtn || !nextBtn || !counter) return;

  const pages = Array.from(root.querySelectorAll('.page[data-page]'));
  const TOTAL_SPREADS = pages.length + 1;
  let currentSpread = 0;

  function update() {
    pages.forEach((page, i) => {
      page.classList.toggle('flipped', i < currentSpread);
      page.style.zIndex = i < currentSpread ? i + 1 : pages.length - i + 4;
    });
    counter.textContent = `Spread ${currentSpread + 1} of ${TOTAL_SPREADS}`;
    prevBtn.disabled = currentSpread === 0;
    nextBtn.disabled = currentSpread === TOTAL_SPREADS - 1;
  }

  prevBtn.addEventListener('click', () => { if (currentSpread > 0) { currentSpread--; update(); } });
  nextBtn.addEventListener('click', () => { if (currentSpread < TOTAL_SPREADS - 1) { currentSpread++; update(); } });

  // Click halves of the book to advance — scoped to the book itself
  book.addEventListener('click', e => {
    if (e.target.closest('.nav-btn')) return;
    const rect = book.getBoundingClientRect();
    if (e.clientX > rect.left + rect.width / 2) {
      if (currentSpread < TOTAL_SPREADS - 1) { currentSpread++; update(); }
    } else {
      if (currentSpread > 0) { currentSpread--; update(); }
    }
  });

  // Keyboard — only when pointer is inside the wrapper
  let pointerInside = false;
  root.addEventListener('mouseenter', () => { pointerInside = true; });
  root.addEventListener('mouseleave', () => { pointerInside = false; });
  document.addEventListener('keydown', e => {
    if (!pointerInside) return;
    if (e.key === 'ArrowRight') { nextBtn.click(); e.preventDefault(); }
    if (e.key === 'ArrowLeft')  { prevBtn.click(); e.preventDefault(); }
  });

  update();
})();