/* Open binder construction. The original cover and pocket artwork stay intact. */
/* Move the complete assembly together; each internal renderer keeps its own depth. */
.binder-motion {
  position:absolute; width:660px; height:440px; top:12px; left:0;
  perspective:1900px; transform-style:flat;
  transform:translateX(-165px) rotateX(10deg) rotateY(-13deg) rotateZ(-8deg);
  transition:transform 1.15s cubic-bezier(.22,1,.36,1);
}
.is-open .binder-motion { transform:none }
.binder-motion .book { top:0; transform:none!important; transition:none }
@media(max-width:700px) {
  .binder-motion { transform:translateX(-165px) rotateX(8deg) rotateY(-13deg) rotateZ(-8deg) }
}
.open-lining,.leaf-stack,.binder-hardware,.turn-shadow { display:none; pointer-events:none }
.book.open .open-lining,.book.open .leaf-stack,.book.open .binder-hardware,.book.open .turn-shadow { display:block }
.book.open { transform-style:preserve-3d }
.book.open .open-lining {
  position:absolute; inset:-13px -12px -16px; border-radius:15px;
  transform:translateZ(-12px);
  background:linear-gradient(90deg,#ffffff04,transparent 42%,#0009 49%,#0009 51%,transparent 58%,#ffffff04),url('./assets/leather.svg'),#191b18;
  border:1px solid #45473d;
  box-shadow:inset 0 0 0 4px #171915,inset 0 0 0 5px #5c60503d,inset 0 0 0 7px #10120e,0 3px 0 #34372f,0 7px 0 #151713,0 10px 0 #35382f,0 13px 0 #151713,0 19px 22px #23281e28,0 40px 48px #23281e22;
}
.open-lining:after { content:''; position:absolute; inset:9px; border:1px dashed #9a9e7950; border-radius:9px }
.book.open .page-stack { visibility:hidden }
.leaf-stack { position:absolute; top:3px; bottom:-1px; width:316px; border-radius:8px; background:#292d25; transform:translateZ(-3px); box-shadow:0 1px 0 #6f75614d,1px 3px 0 #1b1e18,1px 4px 0 #72776570,2px 6px 0 #24281f,2px 7px 0 #73796365,3px 9px 0 #20241c,3px 10px 0 #82896b40,3px 12px 3px #0a0d0b80 }
.leaf-stack-left { left:0 }
.leaf-stack-right { right:0 }
.book.open .spread { background:transparent; box-shadow:none; transform:none; overflow:visible }
.book.open .spread > .page { position:absolute; width:316px; }
.book.open .spread > .left-page { left:0 }
.book.open .spread > .right-page { right:0 }
.book.open .page { border-color:#666e534d; box-shadow:inset 0 1px 0 #c9d4b125,inset 0 -1px 0 #090d08; }
.book.open .left-page { padding-right:16px; }
.book.open .right-page { padding-left:16px; }
/* Reinforced punched margins are cut through both faces, not painted on top. */
.book.open .left-page {
  --hole-x:305px;
  background:linear-gradient(90deg,transparent 94%,#71795c24 94%,#13190f80 100%),linear-gradient(105deg,#2a2e27,#242820 67%,#171b16);
}
.book.open .right-page {
  --hole-x:11px;
  background:linear-gradient(270deg,transparent 94%,#71795c24 94%,#13190f80 100%),linear-gradient(105deg,#161b15,#30352b 25%,#292d26);
}
.book.open .page {
  mask-image:radial-gradient(circle at var(--hole-x) 115px,transparent 0 3px,#000 3.8px),radial-gradient(circle at var(--hole-x) 304px,transparent 0 3px,#000 3.8px);
  mask-composite:intersect;
}
.book.open .spine {
  left:calc(50% - 10px); width:20px; top:16px; bottom:16px; border-radius:8px;
  background:linear-gradient(90deg,#11150f,#3e4436 12%,#939982 20%,#4a5140 28%,#30362b 70%,#626b51 85%,#13190f);
  border:1px solid #0c100b; box-shadow:0 2px 3px #0009,0 0 0 5px #10160b50;
}
.spine-rivet { position:absolute; top:12px; left:6px; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 35% 25%,#d0d3bd,#747b64 35%,#252c1f 75%); box-shadow:0 1px 1px #0009 }
.spine-rivet + .spine-rivet { top:auto; bottom:12px }
.binder-hardware { position:absolute; inset:0; transform-style:preserve-3d; }
.metal-ring { position:absolute; inset:0; transform-style:preserve-3d }
.ring-segment { position:absolute; left:0; top:-2px; height:4px; transform-origin:0 50%; border-radius:1px; background:linear-gradient(#282d25,#bec3af 22%,#f0f1e1 42%,#878e79 60%,#363d2e 90%); backface-visibility:visible }
.book.open .flipping-page { z-index:auto; left:330px; top:0; width:330px; height:440px; transform-origin:0 50%; transform-style:preserve-3d; border:0; box-shadow:none; background:none; }
.book.open .flipping-page.reverse { left:0; transform-origin:100% 50%; }
.book.open .flipping-page.turning { display:block; animation:none; }
.book.open .flip-face { overflow:visible; border-radius:0; box-shadow:none; transform-style:preserve-3d; }
.book.open .flip-front { transform:translateZ(.1px) }
.book.open .flip-back { transform:rotateY(180deg) translateZ(.1px) }
.book.open .flip-face .page { inset:auto; top:0; width:316px; height:440px; }
.book.open .flip-face .right-page { right:0 }
.book.open .flip-face .left-page { left:0 }
.book.open .flip-face:after,.book.open .spread.turning-forward:after,.book.open .spread.turning-back:after { display:none }
.book.open .turn-shadow { position:absolute; left:330px; top:0; width:330px; height:440px; background:linear-gradient(90deg,#060a04b0,transparent); opacity:0; transform-origin:left center; }
.book.open .turn-shadow.reverse { left:0; transform-origin:right center; background:linear-gradient(270deg,#060a04b0,transparent) }
.book.is-turning .sleeve { pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .book.open .flipping-page { display:none } }

/* Reserve room for the rising sheet and for the controls below the cover. */
.collection-stage.is-open { overflow:visible }
.collection-stage.is-open .book-space { top:-15px }
@media(max-width:700px) { .collection-stage.is-open .book-space { top:-20px } }

.leaf-shade { position:absolute; top:0; bottom:0; right:0; left:14px; border-radius:2px 10px 10px 2px; background:linear-gradient(90deg,#050904,#05090477 70%,#f2f3df33); pointer-events:none; opacity:0; transform:translateZ(.3px) }
.flip-back .leaf-shade,.reverse .flip-front .leaf-shade { left:0; right:14px; border-radius:10px 2px 2px 10px }
.reverse .flip-back .leaf-shade { left:14px; right:0; border-radius:2px 10px 10px 2px }

/* One depth-tested surface for both metal arches and the moving sleeve. */
.ring-scene { position:absolute; width:1000px; height:700px; left:-170px; top:-118px; z-index:8; pointer-events:none; display:none }
.is-open .has-webgl-rings .ring-scene { display:block }
.has-webgl-rings .binder-hardware { visibility:hidden }

.ring-scene-viewport { position:absolute; width:704px; height:700px; left:-22px; top:-130px; overflow:clip; z-index:8; pointer-events:none; display:none }
.is-open .has-webgl-rings .ring-scene-viewport { display:block; animation:reveal-binder-rings .18s ease .32s both }
.ring-scene-viewport .ring-scene { left:-148px; top:0; z-index:auto; display:block }
/* Reveal the hardware once the opaque front cover has cleared the spine. */
@keyframes reveal-binder-rings { from { opacity:0 } to { opacity:1 } }

/* Freeze hover poses while their live sleeve is turning. */
.flipping-page .sleeve { transform:none!important; transition:none!important }
.flipping-page .sleeve-card { --rx:0deg!important; --ry:0deg!important; transition:none!important }

/* An empty pocket is still a sleeve: soft seams, a recessed card outline,
   and a small invitation that doesn't compete with the collection. */
.sleeve.empty {
  position:relative; overflow:hidden; align-content:center; justify-items:center;
  gap:8px; color:#c2cbb39c; letter-spacing:.09em; font-size:7px;
  background:linear-gradient(115deg,#d9e6c417,#161b1480 45%,#c5d4af0a);
  border:1px solid #a7b29652;
  box-shadow:inset 0 1px 0 #d6e0c63d, inset 0 -2px 3px #090d08a0, 0 2px 3px #0005;
}
.sleeve.empty::before {
  content:''; position:absolute; inset:7% 9% 9%; border-radius:3px;
  border:1px solid #c4d0b22b; box-shadow:inset 0 0 0 2px #11170e24;
  pointer-events:none;
}
.sleeve.empty .empty-mark {
  width:25px; height:34px; border:1px solid #c4d0b25e; border-radius:3px;
  box-shadow:inset 0 1px 0 #e0e8d025; color:#c2ceb199;
}
.sleeve.empty .empty-mark .ui-icon { width:12px; height:12px }
.sleeve.empty > span { position:relative; z-index:1 }
.sleeve.empty:hover { color:#e0e8d7; border-color:#c6d2b58a }
.sleeve.empty:hover .empty-mark { border-color:#d7e3c5a0; color:#e5eedb }