:root {
  --ink: #2b1a0e;
  --red: #8e2418;
  --gold: #c9a13b;
  --blue: #2c4a7a;
  --green: #3f6b3a;
  --parch: #f1e3c2;
  --turn: 1s;
  --ease: cubic-bezier(.645, .045, .355, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0d0805 radial-gradient(ellipse at 50% 45%, #4a3020 0%, #24160d 55%, #0d0805 100%);
  font-family: 'IM Fell English', Georgia, serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.stage {
  perspective: 2800px;
  display: grid;
  place-items: center;
  gap: 2.5vh;
}

/* ---------- Book ---------- */

.book {
  --w: min(94vw, calc(84vh * 1.5), 1200px);
  position: relative;
  width: var(--w);
  aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  transition: transform var(--turn) var(--ease);
  touch-action: pan-y;
}
.book.closed { transform: translateX(-25%); }

.base {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  transform: translateZ(-1px);
}
.base.right {
  left: 50%;
  border-radius: 0 4px 4px 0;
  box-shadow: 1px 1px 0 #d8c69e, 2px 2px 0 #efe0bd, 3px 3px 0 #cdb98e, 4px 4px 0 #e7d6b0, 5px 5px 0 #c8b388, 8px 12px 30px rgba(0,0,0,.6);
}
.base.left {
  left: 0;
  border-radius: 4px 0 0 4px;
  box-shadow: -1px 1px 0 #d8c69e, -2px 2px 0 #efe0bd, -3px 3px 0 #cdb98e, -4px 4px 0 #e7d6b0, -5px 5px 0 #c8b388, -8px 12px 30px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .3s calc(var(--turn) * .5);
}
.book:not(.closed) .base.left { opacity: 1; }
.book.closed .base.left { transition-delay: 0s; }

.leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform var(--turn) var(--ease);
}
/* Leaves share one 3D space, where z-index is ignored, so stacking order is real depth (--z, set in book.js). */
.leaf { transform: translateZ(var(--z, 0px)) rotateY(0deg); }
.leaf.turned { transform: translateZ(var(--z, 0px)) rotateY(-180deg); }
.leaf.peek:not(.turned) { transform: translateZ(var(--z, 0px)) rotateY(-12deg); transition-duration: .35s; }
.leaf.turned.peek { transform: translateZ(var(--z, 0px)) rotateY(-168deg); transition-duration: .35s; }
.leaf.gone { display: none; }
.leaf.hidden { visibility: hidden; }
.leaf.face-back .face.front,
.leaf:not(.face-back) .face.back { visibility: hidden; }
/* Page 11 stays hidden until page 10 is torn away */
.base.right > * { visibility: hidden; }
.base.right.reveal > * { visibility: visible; }

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  container-type: inline-size;
}
.face.back { transform: rotateY(180deg); }
.face.front { border-radius: 0 4px 4px 0; }
.face.back { border-radius: 4px 0 0 4px; }

/* Shade the page while it is mid-turn */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: linear-gradient(to right, rgba(40, 20, 5, .35), rgba(40, 20, 5, 0) 60%);
  opacity: 0;
  transition: opacity calc(var(--turn) / 2) ease-in;
}
.face.back::after { background: linear-gradient(to left, rgba(40, 20, 5, .35), rgba(40, 20, 5, 0) 60%); }
.leaf.flipping .face::after { animation: shade var(--turn) var(--ease); }
@keyframes shade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ---------- Parchment ---------- */

.page {
  background-color: var(--parch);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .14 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, rgba(255, 250, 235, .65), transparent 70%),
    radial-gradient(ellipse at 100% 100%, rgba(150, 100, 40, .28), transparent 45%),
    radial-gradient(ellipse at 0% 0%, rgba(150, 100, 40, .18), transparent 40%);
}
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.page.r::before { background: linear-gradient(to right, rgba(70, 40, 10, .38), rgba(70, 40, 10, .08) 6%, transparent 14%); }
.page.l::before { background: linear-gradient(to left, rgba(70, 40, 10, .38), rgba(70, 40, 10, .08) 6%, transparent 14%); }

.frame {
  position: absolute;
  inset: 5%;
  border: .6cqw solid var(--red);
  z-index: 3;
  pointer-events: none;
}
.frame::after {
  content: "";
  position: absolute;
  inset: 1.1cqw;
  border: .3cqw solid var(--gold);
}
.c {
  position: absolute;
  width: 15cqw;
  height: 15cqw;
  overflow: visible;
}
.c.tl { top: -2.4cqw; left: -2.4cqw; }
.c.tr { top: -2.4cqw; right: -2.4cqw; transform: scaleX(-1); }
.c.bl { bottom: -2.4cqw; left: -2.4cqw; transform: scaleY(-1); }
.c.br { bottom: -2.4cqw; right: -2.4cqw; transform: scale(-1, -1); }

.content {
  position: absolute;
  inset: 12% 13%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
}
.content.center { justify-content: center; align-items: center; text-align: center; }
.content.narrow { left: 22%; right: 22%; bottom: 52%; }
.content.narrow .text { font-size: 5.6cqw; }
.content.bottom { justify-content: flex-end; top: auto; }

.text {
  margin: 0;
  font-size: 6.2cqw;
  line-height: 1.32;
  color: var(--ink);
}
.text.big { font-size: 10cqw; line-height: 1.1; }
.text.halo {
  text-shadow: 0 0 .2em var(--parch), 0 0 .2em var(--parch), 0 0 .35em var(--parch), 0 0 .5em var(--parch);
}
.text.final {
  font-size: 8.4cqw;
  font-style: italic;
  line-height: 1.25;
}

/* Illuminated initials */
.initial {
  float: left;
  display: grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  margin: .1em .16em 0 0;
  padding-bottom: .04em;
  font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
  font-size: 2.55em;
  line-height: 1;
  color: #f8dc84;
  background:
    radial-gradient(circle at 18% 22%, #3f6b3a 0 7%, transparent 8%),
    radial-gradient(circle at 82% 78%, #3f6b3a 0 7%, transparent 8%),
    radial-gradient(circle at 82% 22%, var(--gold) 0 4%, transparent 5%),
    radial-gradient(circle at 18% 78%, var(--gold) 0 4%, transparent 5%),
    radial-gradient(circle at 50% 50%, #b8352a, #6e1810 75%);
  border: .05em solid var(--gold);
  outline: .02em solid var(--red);
  outline-offset: .035em;
  box-shadow: inset 0 0 0 .05em var(--blue), .02em .04em .08em rgba(0, 0, 0, .35);
  text-shadow: 0 .03em 0 #4a0f08, 0 0 .1em rgba(0, 0, 0, .45);
}
.text.big .initial { font-size: 2em; }

.art {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.art.small { flex: 0 1 50%; width: 80%; }

.crest { width: 100%; height: 100%; }

/* Art that spans both pages of a spread */
.span {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.span.l { left: 0; }
.span.r { left: -100%; }
.span svg { width: 100%; height: 100%; display: block; }

/* ---------- Cover ---------- */

.cover {
  background-color: #5a1a12;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 45% 40%, #7a2a1c, #4a140d 70%, #2e0a06);
  box-shadow: inset 1.6cqw 0 2cqw rgba(0, 0, 0, .55), inset -.4cqw 0 .6cqw rgba(255, 200, 150, .1);
}
.cover-frame {
  position: absolute;
  inset: 7%;
  border: .6cqw double #c9a13b;
  outline: .25cqw solid rgba(201, 161, 59, .55);
  outline-offset: 1.4cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6cqw;
}
.cover-frame .c { width: 18cqw; height: 18cqw; }
.cover-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'UnifrakturMaguntia', serif;
  line-height: 1;
  color: #e9c565;
  background: linear-gradient(180deg, #fbe7a1, #d4aa45 50%, #8a6a1e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .3cqw 0 rgba(0, 0, 0, .6));
}
.cover-title .small { font-family: 'IM Fell English', serif; font-style: italic; font-size: 6cqw; letter-spacing: .3em; }
.cover-title .big { font-size: 15cqw; }
.cover-emblem { width: 30cqw; height: 30cqw; filter: drop-shadow(0 .3cqw 0 rgba(0, 0, 0, .6)); }

/* ---------- The torn-out page ---------- */

.stub-wrap {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(.4cqw 0 .5cqw rgba(60, 35, 10, .45));
}
.stub-fiber, .stub { position: absolute; inset: 0; }
.stub-fiber { background: #fbf4e2; }
.stub::before { background: linear-gradient(to right, rgba(70, 40, 10, .38), rgba(70, 40, 10, .08) 6%, transparent 14%); }

.leaf.tearing .face.front { animation: rip 1.5s cubic-bezier(.55, 0, .8, .2) forwards; transform-origin: 30% 10%; }
@keyframes rip {
  0%   { transform: none; opacity: 1; }
  10%  { transform: translateX(-.6%) rotate(-.4deg); }
  18%  { transform: translateX(.8%) rotate(.6deg); }
  26%  { transform: translateX(-.4%) rotate(-.2deg); }
  38%  { transform: translate(3%, -2%) rotate(3deg); opacity: 1; }
  100% { transform: translate(90%, -55%) rotate(38deg); opacity: 0; }
}

/* ---------- Hint ---------- */

.hint {
  margin: 0;
  font-style: italic;
  font-size: clamp(14px, 2.2vh, 20px);
  color: rgba(241, 227, 194, .6);
  letter-spacing: .05em;
  transition: opacity .8s;
  pointer-events: none;
}
.hint.hide { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  :root { --turn: .35s; }
}