:root {
  --scale: 0.5;
  --hue: 50;
  --white: #fff;
  --bg: hsl(var(--hue),10%,90%);
  --pr: hsl(var(--hue),90%,55%);
  --pr-l: hsl(var(--hue),90%,65%);
  /* Combined line pattern and hinge shadow */
  --pg-bg: repeating-linear-gradient(hsl(var(--hue),10%,10%) 0 calc(0.125em * var(--scale)), #0000 0 calc(0.5em * var(--scale))) center / calc(2.5em * var(--scale)) calc(4.125em * var(--scale)) no-repeat, var(--white);
}

.book {
  background: #f09390;
  border-radius: calc(0.25em * var(--scale));
  box-shadow: 0 calc(0.25em * var(--scale)) calc(0.5em * var(--scale)) #0003, inset 0 0 0 calc(0.25em * var(--scale)) #d07a77;
  width: calc(8em * var(--scale)); height: calc(6em * var(--scale));
  position: relative; perspective: calc(37.5em * var(--scale)); transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.book:hover {
  --hue: 200; /* Shift to blue on hover */
  transform: scale(1.1);
  cursor: help;
}

/* Base pages (before=left, after=right) */
.book::before, .book::after, .book__pg {
  content: ""; position: absolute; top: calc(0.25em * var(--scale));
  width: calc(50% - (0.25em * var(--scale))); height: calc(100% - (0.5em * var(--scale)));
  background: var(--pg-bg);
}

.book::before { left: calc(0.25em * var(--scale)); border-right: 1px solid #0001; }
.book::after { right: calc(0.25em * var(--scale)); box-shadow: calc(0.05em * var(--scale)) 0 0 #ddd; }

.book__pg {
  right: calc(0.25em * var(--scale)); transform-origin: 0% 50%;
  animation: flip 5s infinite ease-in-out; opacity: 0; backface-visibility: visible;
}

/* Staggered Delays using a simple list */
.book__pg:nth-child(2) { animation-delay: 1s; }
.book__pg:nth-child(3) { animation-delay: 2s; }
.book__pg:nth-child(4) { animation-delay: 3s; }
.book__pg:nth-child(5) { animation-delay: 4s; }

@keyframes flip {
  0% { transform: rotateY(0); opacity: 0; z-index: 2; }
  1% { opacity: 1; }
  40%, 48% { transform: rotateY(-180deg); opacity: 1; }
  41% { z-index: 1; }
  50%, 100% { transform: rotateY(-180deg); opacity: 0; }
}

.status-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
}