/* Image-based layers: fixed steel frame, movable printed magazines. */
.rack-wrap { isolation: isolate; }
.rack-image { pointer-events: none; visibility:hidden; }
.rack-frame { position:absolute; width:100%; height:100%; object-fit:fill; z-index:20; pointer-events:none; mask-repeat:no-repeat; visibility:hidden; }
.rack-frame[data-ready=true] { visibility:visible; }
.rack-hotspots { z-index:auto; }
.magazine-book {
  position:absolute; padding:0; border:0; background:transparent;
  overflow:visible; z-index:var(--rest-z); outline-offset:4px;
  -webkit-tap-highlight-color:transparent;
}
.magazine-motion {
  display:block; position:absolute; inset:0; pointer-events:none;
  transform-origin:50% 75%;
  transform:perspective(850px) translate3d(0,0,0) rotateX(0) rotateZ(0) scale(1);
  transition:transform 360ms cubic-bezier(.2,.8,.22,1), filter 360ms ease;
  filter:drop-shadow(0 1px 1px #15201620);
}
.magazine-window {
  display:block; position:absolute; left:0; right:0; top:0;
  height:var(--cover-height); pointer-events:none;
  clip-path:inset(0 0 calc(100% - var(--slot-height)) 0);
  transition:clip-path 360ms cubic-bezier(.2,.8,.22,1);
}
.magazine-cover {
  display:block; position:absolute; top:calc(-1 * var(--cover-offset)); width:100%; height:100%;
  background-image:url('assets/magazine-cover-atlas.png');
  background-size:300% 200%; background-repeat:no-repeat;
}
.magazine-hint {
  position:absolute; top:4px; left:calc(100% + 20px);
  padding:7px 10px; background:var(--ink); color:#fff;
  font-size:12px; line-height:1.5; white-space:nowrap;
  opacity:0; transform:translateX(-6px);
  transition:opacity 160ms ease,transform 220ms ease;
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine) {
  .magazine-book:hover,.magazine-book.is-highlighted { z-index:30; }
  .magazine-book:hover .magazine-motion,.magazine-book.is-highlighted .magazine-motion {
    transform:perspective(850px) translate3d(5px,calc(-1 * var(--pull-distance)),20px) rotateX(-4deg) rotateZ(-1.25deg) scale(1.025);
    filter:drop-shadow(-2px 12px 9px #15201645);
  }
  .magazine-book:hover .magazine-window,.magazine-book.is-highlighted .magazine-window {
    clip-path:inset(0 0 calc(100% - var(--reveal-height)) 0);
  }
  .magazine-book:hover .magazine-hint,.magazine-book.is-highlighted .magazine-hint { opacity:1; transform:translateX(0); transition-delay:90ms; }
}
.magazine-book:focus-visible,.magazine-book.is-highlighted { z-index:30; }
.magazine-book:focus-visible .magazine-motion,.magazine-book.is-highlighted .magazine-motion {
  transform:perspective(850px) translate3d(5px,calc(-1 * var(--pull-distance)),20px) rotateX(-4deg) rotateZ(-1.25deg) scale(1.025);
  filter:drop-shadow(-2px 12px 9px #15201645);
}
.magazine-book:focus-visible .magazine-window,.magazine-book.is-highlighted .magazine-window { clip-path:inset(0 0 calc(100% - var(--reveal-height)) 0); }
.magazine-book:focus-visible .magazine-hint,.magazine-book.is-highlighted .magazine-hint { opacity:1; transform:translateX(0); }
.index-button.is-highlighted .index-label::after { transform:scaleX(1); }
.index-button.is-highlighted .index-no { color:var(--ink); }
@media(max-width:760px) { .magazine-hint{display:none} }
@media(hover:none) {
  .magazine-book:active .magazine-motion { transform:translateY(-3px);filter:brightness(1.05);transition-duration:100ms; }
}
@media(prefers-reduced-motion:reduce) {
  .magazine-motion,.magazine-window,.magazine-hint{transition:none!important;}
  .magazine-book:hover .magazine-motion,.magazine-book.is-highlighted .magazine-motion,.magazine-book:focus-visible .magazine-motion{transform:none;filter:brightness(1.1) drop-shadow(0 2px 3px #15201655);}
  .magazine-book:hover .magazine-window,.magazine-book.is-highlighted .magazine-window,.magazine-book:focus-visible .magazine-window{clip-path:inset(0 0 calc(100% - var(--slot-height)) 0);}
}