/* ═══════════════════════════════════════════════════════════════════
   imposition.css — "the folding trick" imposition demo
   Pair with /assets/js/imposition.js (deferred). Markup contract:
   <div class="impo" data-impo></div> — JS builds everything inside.

   A real 16pp sheetwise imposition (front side) is shown flat, folds
   itself three times into a section, then riffles out 1–16 in order.
   The fold mechanics are driven by a class timeline set from JS
   (.s1….s4 on the root). Reduced motion: final state, no animation.
═══════════════════════════════════════════════════════════════════ */

.impo{max-width:760px;margin:64px auto 0;text-align:center}
.impo-stage{position:relative;height:280px;display:flex;align-items:center;justify-content:center;perspective:1100px}

/* ── The flat press sheet (4×2 imposed pages, front side) ─────────── */
.impo-sheet{position:relative;width:336px;height:208px;background:#fffdf8;border:.5px solid var(--rule-lt);box-shadow:0 16px 36px -24px rgba(26,21,18,.5);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);transition:opacity .3s}
.impo-cell{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:21px;color:#2e2a26;outline:.5px dashed rgba(0,0,0,.09);outline-offset:-4px}
.impo-cell.rot{transform:rotate(180deg)}
/* fold guides — heavier dashes on the two fold lines */
.impo-guide{position:absolute;pointer-events:none}
.impo-guide.gv{left:50%;top:-6px;bottom:-6px;border-left:1px dashed rgba(167,1,42,.45)}
.impo-guide.gh{top:50%;left:-6px;right:-6px;border-top:1px dashed rgba(167,1,42,.45)}

/* ── Folding flaps ─────────────────────────────────────────────────
   Each flap is a 3D plane hinged on the fold line. The front face
   carries the moving half's content; the back face is plain paper
   (what you see mid-fold). */
.impo-flap{position:absolute;transform-style:preserve-3d;pointer-events:none;z-index:5}
.impo-flap .ff,.impo-flap .fb{position:absolute;inset:0;backface-visibility:hidden;background:#fffdf8;border:.5px solid var(--rule-lt)}
.impo-flap .fb{transform:rotateY(180deg);background:#fbf7ef}
.impo-flap.fx .fb{transform:rotateX(180deg)}
.impo-flap .ff{display:grid}
.impo-flap1{left:50%;top:0;width:50%;height:100%;transform-origin:left center}
.impo-flap1 .ff{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
.impo-flap2{left:0;top:50%;width:100%;height:50%;transform-origin:center top}
.impo-flap3{left:50%;top:0;width:50%;height:100%;transform-origin:left center}
/* the animated fold itself */
.impo.s1 .impo-flap1{transition:transform .85s cubic-bezier(.55,.06,.25,1);transform:rotateY(-180deg)}
.impo.s2 .impo-flap2{transition:transform .75s cubic-bezier(.55,.06,.25,1);transform:rotateX(180deg)}
.impo.s3 .impo-flap3{transition:transform .7s cubic-bezier(.55,.06,.25,1);transform:rotateY(-180deg)}

/* ── The folded stack between folds ───────────────────────────────────
   Actors are centred explicitly (left/top 50% + translate) — abspos
   children of a flex container do NOT reliably take a centred static
   position, found the hard way in Chrome. */
.impo-stack{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffdf8;border:.5px solid var(--rule-lt);opacity:0;transition:width .4s var(--ease),height .4s var(--ease),opacity .25s}
.impo-stack.on{opacity:1}
.impo-stack.l2{box-shadow:2px 2px 0 #f3eee4,2.5px 2.5px 0 rgba(0,0,0,.06),0 16px 30px -22px rgba(26,21,18,.5)}
.impo-stack.l4{box-shadow:2px 2px 0 #f3eee4,4px 4px 0 #fffdf8,4.5px 4.5px 0 rgba(0,0,0,.07),0 16px 30px -22px rgba(26,21,18,.5)}
.impo-stack.l8{box-shadow:2px 2px 0 #f3eee4,4px 4px 0 #fffdf8,6px 6px 0 #f3eee4,6.5px 6.5px 0 rgba(0,0,0,.08),0 16px 30px -22px rgba(26,21,18,.5)}
/* spine hint once it's a section */
.impo-stack.l8::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(90deg,rgba(0,0,0,.14),transparent)}
.impo-stack .impo-sig{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-style:italic;font-size:13px;color:rgba(46,42,38,.45);opacity:0;transition:opacity .3s .3s}
.impo-stack.l8 .impo-sig{opacity:1}

/* ── The riffle finale — 16 pages fan out in order ────────────────── */
.impo-pages{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:64px;pointer-events:none}
.impo-page{position:absolute;top:0;width:42px;height:56px;background:#fff;border:.5px solid rgba(0,0,0,.14);box-shadow:-2px 2px 5px -3px rgba(0,0,0,.25);opacity:0;transform:translateY(14px) rotate(2deg);transition:opacity .35s ease,transform .45s var(--ease)}
/* numbers sit top-LEFT: with ascending z-index each card's visible
   sliver is its left edge (the next card covers its right side) */
.impo-page span{position:absolute;top:3px;left:5px;font-family:var(--fd);font-size:12.5px;color:#2e2a26}
.impo.s4 .impo-page{opacity:1;transform:none}
.impo.s4 .impo-stack{opacity:0}

/* ── Caption + replay ─────────────────────────────────────────────── */
.impo-cap{min-height:44px;margin-top:18px;font-family:var(--fb);font-size:14px;color:var(--mute);line-height:1.6;transition:opacity .25s}
.impo-cap.swap{opacity:0}
.impo-replay{margin-top:10px;background:none;border:.5px solid var(--rule-lt);color:var(--mute);font-family:var(--fb);font-size:12px;letter-spacing:.6px;padding:8px 20px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,border-color .15s,color .15s}
.impo-replay.on{opacity:1;pointer-events:auto}
.impo-replay:hover{border-color:var(--red);color:var(--red)}

@media(max-width:400px){.impo-stage{transform:scale(.88)}}

/* ── Reduced motion: flat sheet + ordered pages, statically ───────── */
@media(prefers-reduced-motion:reduce){
  .impo-flap,.impo-stack,.impo-replay{display:none!important}
  .impo.s1 .impo-flap1,.impo.s2 .impo-flap2,.impo.s3 .impo-flap3{transition:none}
  .impo-page{opacity:1;transform:none;transition:none}
  .impo-stage{height:auto;flex-direction:column;gap:28px;padding:8px 0}
  .impo-pages{position:static;height:64px}
}