@property --library-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --library-p: var(--p, 0);
  --paper: #f6edd3;
  --page-line: #cdbb93;
}

body {
  background:
    radial-gradient(circle at 50% 8svh, rgba(255, 223, 158, 0.13), transparent 24svh),
    linear-gradient(180deg, #020203 0%, #050404 44%, #0b0705 100%);
}

#wordmark {
  font-size: clamp(72px, 10vw, 126px);
  letter-spacing: 0.28em;
}

#library-dock {
  display: none;
}

.tent-position:nth-of-type(1) { --cover: #812336; --page-delay: 0s; }
.tent-position:nth-of-type(2) { --cover: #1d5d76; --page-delay: -0.18s; }
.tent-position:nth-of-type(3) { --cover: #376b2f; --page-delay: -0.36s; }
.tent-position:nth-of-type(4) { --cover: #8a612e; --page-delay: -0.54s; }
.tent-position:nth-of-type(5) { --cover: #5b3a86; --page-delay: -0.72s; }

.tent {
  --closed-shadow: clamp(0, calc((var(--library-p) - 0.35) * 1.8), 1);
  filter: drop-shadow(0 calc(12px * var(--closed-shadow)) calc(14px * var(--closed-shadow)) rgba(0, 0, 0, 0.65));
}

.face,
.cap polygon {
  transition: none;
}

.face {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 16%, rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(90deg, var(--paper) 0 18px, var(--page-line) 19px 21px, var(--paper) 22px 38px);
}

.face::before,
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.face::before {
  opacity: clamp(0, calc(var(--library-p) * 1.18 - 0.12), 1);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 22%, rgba(0, 0, 0, 0.45)),
    var(--cover);
}

.face::after {
  inset: 9% 4%;
  opacity: clamp(0.1, calc(1 - var(--library-p) * 0.6), 0.75);
  background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(20, 12, 8, 0.24) 29px 31px);
  animation: page-scan 1.45s steps(7, end) infinite;
  animation-delay: var(--page-delay);
}

.face--page-edge::before,
.face--foot.face--page-edge::before,
.face--fore-edge::before {
  opacity: clamp(0, calc(var(--library-p) * 1.45 - 0.2), 1);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), transparent 25%, rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(0deg, var(--paper) 0 10px, var(--page-line) 11px 13px);
}

.face--spine::before,
.face--foot.face--spine::before {
  opacity: clamp(0, calc(var(--library-p) * 1.4 - 0.2), 1);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 36%, rgba(0, 0, 0, 0.52)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 236, 181, 0.18) 35px 39px),
    var(--cover);
}

.face--spine::after {
  opacity: clamp(0, calc(var(--library-p) * 1.5 - 0.45), 0.8);
  inset: 12% 31%;
  border: 1px solid rgba(255, 238, 190, 0.45);
  background: rgba(0, 0, 0, 0.1);
}

.face--foot {
  background: #000;
}

.face--foot::before {
  opacity: clamp(0, calc(var(--library-p) * 1.15), 1);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.15), transparent 24%, rgba(0,0,0,0.48)),
    var(--cover);
}

.caps {
  opacity: calc(1 - var(--library-p));
}

.cap polygon {
  fill: color-mix(in srgb, var(--paper) 76%, var(--cover));
}

.book-page {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  opacity: clamp(0, calc(var(--library-p) * 1.7 - 0.16), 0.88);
  pointer-events: none;
}

.book-page__sheet {
  width: 100%;
  height: 100%;
  border: calc(var(--edge) * 0.7px * var(--k)) solid rgba(0, 0, 0, 0.42);
  border-left-width: calc(var(--edge) * 1.4px * var(--k));
  background:
    linear-gradient(90deg, rgba(255,255,255,0.82), rgba(241, 229, 197, 0.95) 70%, rgba(198, 178, 133, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(54, 36, 21, 0.18) 22px 24px);
  box-shadow: inset 12px 0 16px rgba(109, 77, 38, 0.18);
  animation: page-flutter 1.15s cubic-bezier(.45, 0, .2, 1) infinite;
  animation-delay: calc(var(--page-delay) + var(--sheet-delay));
  transform-origin: left center;
}

.book-page:nth-last-child(1) { --sheet-delay: -0.08s; }
.book-page:nth-last-child(2) { --sheet-delay: -0.21s; }
.book-page:nth-last-child(3) { --sheet-delay: -0.34s; }
.book-page:nth-last-child(4) { --sheet-delay: -0.47s; }
.book-page:nth-last-child(5) { --sheet-delay: -0.60s; }
.book-page:nth-last-child(6) { --sheet-delay: -0.73s; }

#header-backdrop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(126px, 18svh, 166px);
  width: min(850px, calc(100vw - 24px));
  height: 18px;
  opacity: clamp(0, calc(var(--library-p) * 2.5 - 1.15), 1);
  transform: translateX(-50%) perspective(600px) rotateX(64deg);
  border: 2px solid #000;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.24), transparent 18%, rgba(0,0,0,0.5)),
    repeating-linear-gradient(90deg, #4b260f 0 26px, #2b1307 27px 35px);
  box-shadow: 0 22px 28px rgba(0,0,0,0.72);
}

@keyframes page-scan {
  from { transform: translateX(-7%); }
  to { transform: translateX(10%); }
}

@keyframes page-flutter {
  0%, 100% { transform: rotateY(0deg); }
  48% { transform: rotateY(calc(-18deg * var(--library-p))); }
  72% { transform: rotateY(calc(5deg * var(--library-p))); }
}

@media (prefers-reduced-motion: reduce) {
  .face::after,
  .book-page__sheet {
    animation: none;
  }
}

@media (max-width: 560px) {
  #wordmark {
    letter-spacing: 0.12em;
  }
}