/*
 * ---------------------------------------------------------------------
 *  POLICA
 * ---------------------------------------------------------------------
 *
 *  The other view: every box in the collection standing side by side,
 *  eight to a shelf, with a new shelf drawn under the last one.
 *
 *  Also the two buttons that switch between this and the single box.
 */


/* ---- the shelf view ---------------------------------------- */

.shelf-view {
    position: absolute;
    inset: 0;

    display: none;

    overflow: hidden;
}

body.view-shelf .shelf-view {
    display: block;
}

/* the single box and its shadow stand down while the shelf is up */
body.view-shelf .scene,
body.view-shelf .shadow {
    display: none;
}

/*
 * Everything hangs off one row that slides sideways. Its origin
 * is the bottom left corner so that zooming grows the boxes
 * upward off the shelf, the way taller boxes would sit.
 *
 * The row holds one .shelf-deck per shelf. Its `bottom` is set
 * from the script, because where the lowest shelf should sit
 * depends on how many shelves are standing above it.
 */
.shelf-row {
    position: absolute;
    left: 0;

    /* the shelf line, set so a single row of boxes lands centred */
    bottom: 38%;

    transform-origin: 0 100%;

    /*
     * The shelf keeps its boxes at life size and does its
     * zooming by scaling this whole row. Inheriting the box
     * view zoom instead would blow every box up past the slot
     * the layout measured for it, and they would overlap.
     */
    --box-scale: 1;
}

/*
 * One shelf: a line with no height of its own, which its boxes
 * and its board stand on. The script stacks these up the row.
 */
.shelf-deck {
    position: absolute;
    left: 0;

    height: 0;
}

/*
 * One slot per box, as wide as that box's footprint once turned.
 * Bottom aligned, because on a real shelf what lines up is the
 * bottom edge, not the middle.
 */
.shelf-item {
    position: absolute;
    bottom: 0;

    cursor: pointer;

    /*
     * Each box gets its own vanishing point. A single shared one
     * across the row would fan the far ends outwards, which
     * reads as a fisheye rather than a shelf seen from across
     * the room.
     */
    perspective: 2400px;

    /*
     * Measured up from the shelf, not from the middle of each
     * box. One shelf means one viewer at one eye height: if
     * every box got its own vanishing point at its own centre,
     * a tall box and a short one would project their bottom
     * edges differently and the row would not sit flush.
     */
    perspective-origin: 50% calc(100% - var(--eye-height));
}

.shelf-item .book {
    position: absolute;
    bottom: 0;

    transform: rotateY(calc(var(--shelf-angle) * -1deg));

    /* grows out of the shelf it stands on, not out of its own middle */
    transform-origin: 50% 100%;

    transition: transform .22s ease;
}

/*
 * Under the pointer a box comes forward a little and catches more
 * light. Two small things at once, because either alone is easy to
 * miss on a shelf of twenty covers.
 */
.shelf-item:hover .book {
    transform:
        rotateY(calc(var(--shelf-angle) * -1deg))
        scale(1.07);
}

/*
 * The light is turned up on the face itself rather than on the box, so
 * the shading each face was given still counts — this multiplies it
 * instead of replacing it. On the box it would also flatten the 3D,
 * since a filter groups whatever it is applied to.
 */
.shelf-item:hover .book .face {
    filter: brightness(calc(var(--shade) * 1.35));
}

.shelf-item .book .face {
    transition: filter .22s ease;
}

/* contact shadow, sized to the footprint of its box */
.shelf-item .drop {
    position: absolute;
    bottom: -4px;
    left: 50%;

    height: 16px;

    transform: translateX(-50%);

    background: rgba(0,0,0,.65);

    filter: blur(9px);
    border-radius: 50%;
}

/* the board they stand on */
.shelf-board {
    position: absolute;
    bottom: -4px;
    left: -400px;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(255,255,255,.16) 12%,
            rgba(255,255,255,.16) 88%,
            rgba(255,255,255,0)
        );
}

/* the one currently selected keeps a marker under it */
.shelf-item.is-current .drop {
    background: rgba(216,196,138,.5);
}

/* the one being looked at stands a little proud of the row */
.shelf-item.is-current .book {
    transform:
        rotateY(calc(var(--shelf-angle) * -1deg))
        scale(1.04);
}

/* ---- switching between the two views ----------------------- */

.views {
    position: absolute;
    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    gap: 2px;

    padding: 3px;

    background: rgba(0,0,0,.4);

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;

    z-index: 2;
}

.views button {
    padding: 6px 14px;

    background: none;
    border: 0;
    border-radius: 6px;

    color: rgba(255,255,255,.5);

    font-family: inherit;
    font-size: 12px;

    cursor: pointer;
}

.views button:hover {
    color: white;
}

.views button[aria-pressed="true"] {
    background: rgba(255,255,255,.13);
    color: white;
}

.instructions {
    position: absolute;

    bottom: 22px;
    left: 0;
    right: 0;

    text-align: center;

    opacity: .4;

    font-size: 12px;

    pointer-events: none;
}