/* ═══════════════════════════════════════════════════════════════════
   bindery.css — the bindery craft demos
   Pair with /assets/js/bindery.js (deferred). Two markup contracts:

   <div data-sewing></div>    — thread sews four signatures on scroll:
                                sections drop in, the needle rides the
                                thread as it draws through each fold.
   <div data-openflat></div>  — the open-flat test: a sewn book falls
                                open flat; a glued one springs shut.

   Both trigger once on scroll-into-view (.pc-on added by bindery.js)
   and respect prefers-reduced-motion (final state, no theatre).
═══════════════════════════════════════════════════════════════════ */

/* ── Thread-sewing ─────────────────────────────────────────────── */
.bnd-sew{max-width:560px;margin:48px auto 0;text-align:center}
.bnd-sew svg{display:block;width:100%;height:auto}
.bnd-sew .sg-sig{stroke:#9a9183;stroke-width:1.4;fill:#fffdf8;opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .6s var(--ease,cubic-bezier(.16,1,.3,1))}
.bnd-sew .sg-pg{stroke:rgba(0,0,0,.14);stroke-width:.8;fill:none;opacity:0;transition:opacity .5s ease}
.bnd-sew.pc-on .sg-sig,.bnd-sew.pc-on .sg-pg{opacity:1;transform:none}
.bnd-sew.pc-on .sg-sig:nth-of-type(1){transition-delay:.05s}
.bnd-sew.pc-on .sg-sig:nth-of-type(2){transition-delay:.2s}
.bnd-sew.pc-on .sg-sig:nth-of-type(3){transition-delay:.35s}
.bnd-sew.pc-on .sg-sig:nth-of-type(4){transition-delay:.5s}
.bnd-sew.pc-on .sg-pg{transition-delay:.6s}
/* the thread: draws after the sections have gathered */
.bnd-sew .sg-thread{stroke:#A7012A;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.bnd-sew.pc-on .sg-thread{transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.4,1) .9s;stroke-dashoffset:0}
/* the needle rides the same path (geometry duplicated in bindery.js —
   keep the two in sync) */
.bnd-sew .sg-needle{opacity:0;offset-rotate:auto 90deg;offset-distance:0%}
.bnd-sew.pc-on .sg-needle{animation:bndneedle 2.4s cubic-bezier(.45,.05,.4,1) .9s forwards}
@keyframes bndneedle{
  0%{opacity:1;offset-distance:0%}
  96%{opacity:1}
  100%{opacity:0;offset-distance:100%}
}
.bnd-cap{margin-top:14px;font-family:var(--fb);font-size:13px;color:var(--mute);font-style:italic;line-height:1.6}

/* ── The open-flat test ────────────────────────────────────────── */
.bnd-flat{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:640px;margin:48px auto 0}
.bnd-flat-one{text-align:center}
.bnd-book{position:relative;height:120px;display:flex;align-items:flex-end;justify-content:center;perspective:700px}
.bnd-leaf{position:relative;width:92px;height:64px;background:#fffdf8;border:.5px solid rgba(0,0,0,.22);transform-style:preserve-3d}
/* page hints on each leaf */
.bnd-leaf::before{content:"";position:absolute;inset:8px 10px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 1px,transparent 1px 7px)}
.bnd-leaf.l{transform-origin:right center;transform:rotateY(62deg)}
.bnd-leaf.r{transform-origin:left center;transform:rotateY(-62deg)}
/* sewn: falls open flat, and stays flat */
.pc-on .bnd-book.sewn .bnd-leaf.l{animation:bndopenl 1.6s cubic-bezier(.2,.8,.3,1) .3s forwards}
.pc-on .bnd-book.sewn .bnd-leaf.r{animation:bndopenr 1.6s cubic-bezier(.2,.8,.3,1) .3s forwards}
@keyframes bndopenl{to{transform:rotateY(7deg)}}
@keyframes bndopenr{to{transform:rotateY(-7deg)}}
/* glued: tries, then springs back shut */
.pc-on .bnd-book.glued .bnd-leaf.l{animation:bndsnapl 2.6s ease-in-out .3s forwards}
.pc-on .bnd-book.glued .bnd-leaf.r{animation:bndsnapr 2.6s ease-in-out .3s forwards}
@keyframes bndsnapl{0%{transform:rotateY(62deg)}38%{transform:rotateY(22deg)}52%{transform:rotateY(26deg)}100%{transform:rotateY(55deg)}}
@keyframes bndsnapr{0%{transform:rotateY(-62deg)}38%{transform:rotateY(-22deg)}52%{transform:rotateY(-26deg)}100%{transform:rotateY(-55deg)}}
/* the strain line on the glued spine */
.bnd-book .bnd-strain{position:absolute;left:50%;bottom:0;width:1px;height:58px;background:rgba(167,1,42,.55);opacity:0;transform:translateX(-50%)}
.pc-on .bnd-book.glued .bnd-strain{animation:bndstrain 2.6s ease .3s forwards}
@keyframes bndstrain{0%,30%{opacity:0}42%{opacity:1}100%{opacity:.75}}
.bnd-flat-lab{margin-top:12px;font-family:var(--fb);font-size:12px;letter-spacing:.4px;color:var(--ink);font-weight:600}
.bnd-flat-sub{font-family:var(--fb);font-size:11.5px;color:var(--mute);line-height:1.5;margin-top:3px}

@media(max-width:560px){.bnd-flat{grid-template-columns:1fr;gap:24px}}
@media(prefers-reduced-motion:reduce){
  .bnd-sew .sg-sig,.bnd-sew .sg-pg{opacity:1;transform:none;transition:none}
  .bnd-sew .sg-thread{stroke-dashoffset:0;transition:none}
  .bnd-sew .sg-needle{display:none;animation:none}
  .pc-on .bnd-book .bnd-leaf,.pc-on .bnd-book .bnd-strain{animation:none}
  .bnd-book.sewn .bnd-leaf.l{transform:rotateY(7deg)}
  .bnd-book.sewn .bnd-leaf.r{transform:rotateY(-7deg)}
  .bnd-book.glued .bnd-strain{opacity:.75}
}