/* Click, tap, or use the keyboard to bring one binding forward. */
body[data-design] .hero-stage:not(.hero-single) .hero-book {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  --fan-z: 1;
  z-index: var(--fan-z) !important;
  transition: transform 0.25s ease !important;
  -webkit-tap-highlight-color: transparent;
}

body[data-design] .hero-stage:not(.hero-single) .hero-book img {
  pointer-events: none;
  user-select: none;
}

body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(2),
body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(5) { --fan-z: 2; }

body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(3),
body[data-design] .hero-stage:not(.hero-single) .hero-book:nth-child(4) { --fan-z: 3; }

body[data-design] .hero-stage:not(.hero-single) .hero-book[aria-pressed="true"] {
  z-index: 20 !important;
  transform: translate(calc(-50% + var(--fan-x)), calc(-50% + var(--fan-y) - clamp(12px, 2vw, 24px))) rotate(var(--fan-r)) scale(1.08) !important;
}

body[data-design] .hero-stage:not(.hero-single) .hero-book:focus-visible::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid #f0d58f;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-design] .hero-stage:not(.hero-single) .hero-book {
    transition: none !important;
  }
}