/* ------------------------------------------------------------------
   The library

   Floating shelves, the same projection the front page uses, with no frame
   around them. Each shelf is a plate with real thickness rather than a
   hairline, and the series mark is etched into the middle of it, which is
   where a shelf is labelled.

   A shelf is cut to hold fourteen volumes with a little room at either end.
   Books stand against one another, because that is what books on a shelf do.
   ------------------------------------------------------------------ */

/* Two shelves to a row now that each is cut to fourteen, so the whole library
   can be taken in without scrolling the length of it. */
.stacks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}
/* ⚠️ This used to collapse at 1100px, which put a single shelf per row on
   half of a 1080p screen -- and a shelf is only a few hundred pixels wide,
   so there was room for two the whole time. It holds two columns down to
   the same width the rest of this file narrows at. */
@media (max-width: 720px) {
  .stacks { grid-template-columns: minmax(0, 1fr); }
}

.stack {
  --h: clamp(6rem, 9vw, 9.5rem);            /* the volumes that stand on it */
  --w: calc(var(--h) * var(--book-d));
  --gap: calc(var(--h) * .012);
  --pad: calc(var(--w) * 1.2);

  position: relative;
  width: min(100%, calc(14 * var(--w) + 13 * var(--gap) + 2 * var(--pad)));
  perspective: 1600px;
  perspective-origin: 50% 36%;
  transition: opacity var(--t-pull) var(--ease-out), filter var(--t-pull) var(--ease-out);
}

.stack__row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--gap);
  padding-inline: var(--pad);
  min-height: var(--h);
  transform-style: preserve-3d;
  transition: opacity var(--t-pull) var(--ease-out), filter var(--t-pull) var(--ease-out);
}

/* The volumes stand a little shorter than the series books on the front page,
   so the two shelves never read as the same thing. Their thickness and their
   lettering still come from the shared ratios, so a volume is the same object
   on the shelf as it is in the hand. */
.stack__row .tome { --h: inherit; }

/* ---------------------------------------------------------- the shelf */
/* A plate, not a line: a lit edge along the front, a body with depth, and
   the projector's cone falling away beneath it. */

.stack__deck {
  position: relative;
  height: clamp(2.4rem, 4.5vw, 3.4rem);
  margin-top: -1px;
  transition: opacity var(--t-pull) var(--ease-out);
}

/* The glass itself, seen edge on. */
.stack__deck::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(.7rem, 1.4vw, 1.05rem);
  border-radius: 2px;
  background:
    linear-gradient(180deg,
      rgba(37, 234, 181, .62) 0 2px,
      rgba(37, 234, 181, .2)  2px 42%,
      rgba(37, 234, 181, .09) 42% 100%),
    linear-gradient(90deg,
      rgba(4, 7, 10, .9) 0%,
      transparent 6%,
      transparent 94%,
      rgba(4, 7, 10, .9) 100%);
  box-shadow:
    0 0 22px var(--accent-glow),
    inset 0 1px 0 rgba(157, 246, 222, .7),
    inset 0 -1px 0 rgba(37, 234, 181, .25);
}

/* The light it throws down into the dark below. */
.stack__deck::after {
  content: '';
  position: absolute;
  left: 50%;
  top: clamp(.7rem, 1.4vw, 1.05rem);
  width: 92%;
  height: 100%;
  transform: translateX(-50%) perspective(420px) rotateX(64deg);
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(37, 234, 181, .16), transparent 74%);
  filter: blur(2px);
  pointer-events: none;
}

/* The mark, etched into the middle of the shelf. Nothing else is written
   here: which series it is, how many volumes there are and whether any exist
   are all things the reader can simply see. */
.stack__mark {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  height: clamp(.7rem, 1.4vw, 1.05rem);
  padding-inline: .9rem;
  transform: translateX(-50%);
  font-family: var(--font-hud);
  font-size: clamp(.62rem, 1.25vw, .8rem);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--void-0);
  background: linear-gradient(180deg, var(--accent-pale), var(--accent) 60%, var(--accent-deep));
  border-radius: 1px;
  box-shadow: 0 0 20px var(--accent-glow);
}
/* The shelf with no mark keeps the plate and says nothing on it. */
.stack__mark--bare {
  min-width: 3rem;
  background: linear-gradient(180deg, rgba(37, 234, 181, .3), rgba(37, 234, 181, .12));
  box-shadow: none;
}

.stack.is-receded .stack__row { opacity: 0; filter: blur(6px); pointer-events: none; }
.stack.is-receded .stack__deck { opacity: .25; }

/* ---------------------------------------------------------- an empty place */
/* Where a volume is not here yet, the shelf leaves the room and says nothing
   about it. An outline would have been a label for a thing that is not there. */

.tome--gap {
  display: block;
  width: var(--w);
  height: 1px;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 720px) {
  /* ⭐ BIGGER VOLUMES, WIDER SHELVES (Seth, 2026-10-27).
     *"And the library books, too on the phone. We can just make those shelves
     larger and be a little closer to the edges of the screen."*

     A shelf's width is cut from the volume's: fourteen spines, thirteen gaps
     and a little room at each end. So a small volume makes a short shelf, and
     at the old size the shelves sat as stubs in the middle of the window with
     spines too thin to aim at. Raising --h widens the spine and the shelf
     together, and the shelf then reaches the full width of its column. */
  .stack { --h: clamp(8rem, 30vw, 11rem); }

  /* And half a rail wider on each side, so the shelves run nearer the edges
     of the glass than the running text does. */
  .stacks { margin-inline: calc(var(--rail) * -0.5); }

  .stack__row { overflow-x: auto; scrollbar-width: none; }
  .stack__row::-webkit-scrollbar { display: none; }
}