:root{
  --bg:#2b4953;
  --ink:#1b1b1b;

  --wood1:#3a2a1a;
  --wood2:#24170e;
  --brass:#c8a24a;

  --cabW: min(1050px, 96vw);
  --cabH: 520px;
  --radius: 22px;
}

*{ box-sizing:border-box; }

.stage{
  min-height: 100vh;
  padding: 3rem 1rem 4rem;
  background: var(--bg);
}

.title{
  margin: 0 0 1.5rem;
  text-align:center;
  letter-spacing:.08em;
  color: var(--ink);
}

/* Framing Cabinet */
.cabinet{
  width: var(--cabW);
  height: var(--cabH);
  margin: 0 auto;
  position: relative;
  border-radius: calc(var(--radius) + 10px);
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--wood1), var(--wood2));
  box-shadow: 0 26px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  perspective: 1400px;
  overflow: hidden;
}

.cabinet::before{
  /* bevel*/
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* Stuff inside cabinet */
.contents{
  position:absolute;
  inset: 28px;
  border-radius: var(--radius);
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  z-index: 1;
}

/* The books were still "visible" when hovering over the cabinets, and we need the user to not see that yet */
.cabinet[data-open="false"] .contents{
  pointer-events: none;   /* prevents hover/click on books */
  filter: blur(0px);
}
.cabinet[data-open="true"] .contents{
  pointer-events: auto;
}

/* Add the doors */
.doors{
  position:absolute;
  inset: 28px;
  border-radius: var(--radius);
  display:flex;
  z-index: 3; /* in front of books */
  transform-style: preserve-3d;
}
.cabinet[data-open="true"] .doors {
  pointer-events: none;
}

.door{
  position:relative;
  flex: 1;
  border: none;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    linear-gradient(180deg, #4a3421, #2b1e13);
  box-shadow: 0 18px 34px rgba(0,0,0,.35);
  transition: transform 700ms cubic-bezier(.2,.8,.1,1), box-shadow 700ms, opacity 300ms;
  transform-style: preserve-3d;
  outline: none;
}

.door.left{
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  transform-origin: left center;
  border-right: 1px solid rgba(0,0,0,.35);
}
.door.right{
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  transform-origin: right center;
  border-left: 1px solid rgba(255,255,255,.05);
}

.door::before{
  /* "Wood"-look */
  content:"";
  position:absolute;
  inset:-20px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.10) 0 2px,
      rgba(255,255,255,.03) 2px 5px,
      rgba(0,0,0,.08) 5px 9px
    );
  opacity:.32;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.knob{
  position:absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #ffe7a7, var(--brass) 55%, #7b5a1f);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
}

.door.left .knob{ right: 18px; }
.door.right .knob{ left: 18px; }

.door-hint{
  position:absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  font: 600 0.85rem/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: rgba(233,227,211,.9);
  letter-spacing:.06em;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(233,227,211,.25);
  background: rgba(0,0,0,.10);
}

/* Opening the Cabinet */
/* Left side */
.cabinet[data-left-open="true"] .door.left{
  transform: rotateY(-120deg);
  box-shadow: 40px 18px 54px rgba(0,0,0,.45);
}

/* right side */
.cabinet[data-right-open="true"] .door.right{
  transform: rotateY(120deg);
  box-shadow: -40px 18px 54px rgba(0,0,0,.45);
}

/* bookshelf */
.shelf{
  width: min(900px, 100%);
  margin: 0 auto;
  display:flex;
  align-items:flex-end;
  gap: 14px;
  padding: 2.2rem 1.4rem 2.0rem;
  border-radius: 16px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  z-index: 2;
}

.shelf::after{
  /* place for books to sit */
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, #7a5533, #55381f);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* Book Spines */
.book{
  --cover:#274156;
  position:relative;
  width: 56px;
  height: 240px;
  border-radius: 10px;
  text-decoration:none;
  color:#f4f1e6;

  transform-style: preserve-3d;
  transition: transform 240ms ease, filter 240ms ease;

  margin-bottom: 26px; /* Keep the book on TOP of the shelf */
  z-index: 1;
}

.book::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22)),
    linear-gradient(135deg, color-mix(in oklab, var(--cover) 82%, black 18%),
                          color-mix(in oklab, var(--cover) 70%, black 30%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.25);
}

.book::after{
  content:"";
  position:absolute;
  top: 6px;
  right: -10px;
  width: 12px;
  height: calc(100% - 12px);
  border-radius: 10px;
  background: linear-gradient(180deg, #efe7d6, #d8cdb8);
  transform: rotateY(75deg);
  transform-origin: left center;
  opacity:.95;
}

.spine-title,
.spine-sub{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  letter-spacing:.08em;
}

.spine-title{
  top: 18px;
  font-weight: 700;
  font-size: 0.95rem;
}
.spine-sub{
  bottom: 18px;
  font-weight: 600;
  font-size: 0.75rem;
  opacity:.9;
}

.book:hover,
.book:focus-visible{
  transform: translateY(-8px) translateZ(28px) rotateY(-12deg);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.35));
  z-index: 3;
}

.book:focus-visible{
  outline: 3px solid rgba(255,255,255,.22);
  outline-offset: 4px;
}

.hint{
  margin: 0;
  text-align:center;
  color: rgba(233,227,211,.82);
  font: 500 0.95rem/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}