/* Shelf style D "Rotunde" (spec 2026-10-11 §6, component RotundaShelf,
   behaviour in js/rotunda.js). A dark round reading room whatever the
   theme -- the lantern needs the dark; wood, brass and light still come
   from the --shelf-* tokens. --r is the ring's radius, --mx/--my the
   lantern's position. */

.rotunda {
    --shelf-texture: url("../images/library/shelf-wood-texture.webp");
    --leather-texture: url("../images/library/book-leather-texture.webp");
    position: relative;
    height: 660px;
    overflow: clip;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--shelf-wood) 60%, transparent), transparent 60%),
        #060403;
    cursor: grab;
    user-select: none;
    outline: none;
    touch-action: pan-y;
}

.rotunda:focus-visible {
    box-shadow: 0 0 0 2px var(--shelf-brass-hi);
}


.rotunda-title {
    position: absolute;
    z-index: 9;
    top: 18px;
    left: 0;
    right: 0;
    min-height: 1.2em;
    color: color-mix(in srgb, var(--shelf-brass-hi) 85%, transparent);
    font: 600 13px/1.2 "Cinzel", var(--font-family-display);
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.rotunda-stage {
    position: absolute;
    inset: 0;
    perspective: 900px;
    perspective-origin: 50% 45%;
    pointer-events: none;
}

.rotunda-world {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.rotunda-ring {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}

.rotunda-bay {
    position: absolute;
    top: -240px;
    left: calc(var(--bay-w) / -2 + 8px);
    width: calc(var(--bay-w) - 16px);
    /* Every bay stands on the ring facing its centre, where the reader is. */
    transform: rotateY(calc(var(--i) * var(--step) * -1deg)) translateZ(calc(var(--r) * -1));
    transform-style: preserve-3d;
    backface-visibility: hidden;
    pointer-events: none;
}

.rotunda-pillar {
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: -12px;
    width: 16px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(255, 220, 160, 0.18), rgba(0, 0, 0, 0.6)), var(--shelf-texture) center / 200px, var(--shelf-wood);
}

.rotunda-row {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 150px;
    padding: 0 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.4)), var(--shelf-texture) center / 380px, var(--shelf-wood);
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.85);
}

.rotunda-ledge {
    height: 12px;
    background: linear-gradient(180deg, rgba(255, 226, 175, 0.3), rgba(0, 0, 0, 0.5)), var(--shelf-texture) center / 300px, var(--shelf-wood);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.85);
}

.rotunda-spine {
    position: relative;
    flex: none;
    width: var(--w);
    height: var(--h);
    border-radius: 2px;
    pointer-events: auto;
    cursor: pointer;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 240, 215, 0.16) 25%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.6)),
        var(--leather-texture) center / 160px,
        var(--c);
    background-blend-mode: normal, overlay, normal;
    transform-origin: 50% 100%;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
}


.rotunda-spine:focus-visible {
    outline: 2px solid var(--shelf-brass-hi);
    outline-offset: 2px;
}

.rotunda-gilt {
    position: absolute;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--shelf-brass-hi);
    opacity: 0.9;
}

/* The gilt catches the lantern's light. */
.rotunda-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--shelf-brass-hi) 55%, transparent) 50%, transparent 100%);
    background-size: 100% 300%;
    background-position: 0 -100%;
    opacity: 0;
    pointer-events: none;
}

.rotunda-spine.is-lit .rotunda-shine {
    opacity: 1;
    animation: rotunda-shine 1.4s ease forwards;
}

@keyframes rotunda-shine {
    to { background-position: 0 200%; }
}

@media (hover: hover) {
    .rotunda-spine:hover {
        /* tipped out by its top; the foot stays on the board */
        transform: rotateX(-12deg);
    }
}


/* ---- The dark and the lantern ---- */

.rotunda-dark {
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 45%), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(4, 2, 1, 0.74) 100%);
}

.rotunda-warm {
    position: absolute;
    z-index: 6;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 45%), rgba(255, 190, 100, 0.85), transparent 70%);
}

/* The light itself flickers a little, like a flame. */
.rotunda.has-lantern .rotunda-warm {
    animation: rotunda-flicker 3.2s infinite ease-in-out;
}

@keyframes rotunda-flicker {
    0%, 100% { opacity: 1; }
    23% { opacity: 0.9; }
    41% { opacity: 0.97; }
    67% { opacity: 0.86; }
}

/* ---- Hint and turn buttons ---- */

.rotunda-ui {
    position: absolute;
    z-index: 9;
    left: 20px;
    right: 20px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}


.rotunda-arrows {
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.rotunda-ui,
.rotunda.has-lantern .rotunda-ui {
    cursor: default;
}

.rotunda-turn {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--shelf-brass) 55%, transparent);
    border-radius: 50%;
    background: rgba(10, 6, 3, 0.7);
    color: var(--shelf-brass-hi);
    font: 400 22px/1 var(--font-family-display);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.rotunda-turn:hover {
    border-color: var(--shelf-brass-hi);
    background: rgba(40, 26, 12, 0.85);
}

.rotunda-turn:focus-visible {
    outline: 2px solid var(--shelf-brass-hi);
    outline-offset: 2px;
}

/* ---- Crown over each bay: its plaque, decor at the ends ---- */

.rotunda-crown {
    position: relative;
    height: 26px;
    margin: 0 -8px;
    background: linear-gradient(180deg, rgba(255, 226, 175, 0.32) 0 2px, rgba(0, 0, 0, 0.2) 2px 70%, rgba(0, 0, 0, 0.55)), var(--shelf-texture) center / 320px, var(--shelf-wood);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);
}

.rotunda-crown::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 9px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--shelf-brass), var(--shelf-brass-hi), var(--shelf-brass), transparent);
    opacity: 0.8;
}

.rotunda-plaque {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: -16px;
    max-width: 220px;
    transform: translateX(-50%);
}

.rotunda-decor {
    bottom: 100%;
    height: calc(var(--decor-h) * 0.7);
}

.rotunda-decor.shelf-decor--left {
    left: 4px;
    background-position: left bottom;
}

.rotunda-decor.shelf-decor--right {
    right: 4px;
    background-position: right bottom;
}

/* An arc closes with broad end pillars. */
.rotunda.is-arc .rotunda-bay:first-child .rotunda-pillar--left,
.rotunda.is-arc .rotunda-bay:last-child .rotunda-pillar--right {
    width: 34px;
}

/* Gilt title up the spine. */
.rotunda-spine-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 18%;
    bottom: 18%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--shelf-brass-hi);
    font: 700 10px/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Title and author of the spine under the pointer. */
.rotunda-tip {
    position: absolute;
    z-index: 10;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--shelf-brass) 40%, transparent);
    border-radius: 8px;
    background: rgba(16, 10, 5, 0.92);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-14px);
    transition: opacity 0.2s ease;
}

.rotunda-tip.is-shown {
    opacity: 1;
}

.rotunda-tip strong {
    display: block;
    color: var(--shelf-brass-hi);
    font: 700 16px/1.2 "Cormorant Garamond", Georgia, serif;
}

.rotunda-tip span {
    color: #cdbf9f;
    font: 12px/1.3 var(--font-family-ui);
}

/* The bay list: every compartment, the one in front highlighted. */
.rotunda-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: auto;
}

.rotunda-nav-item {
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--shelf-brass) 35%, transparent);
    border-radius: 999px;
    background: rgba(10, 6, 3, 0.7);
    color: #e2d3b3;
    font: 500 12px/1.2 var(--font-family-ui);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.rotunda-nav-item:hover {
    border-color: var(--shelf-brass-hi);
}

.rotunda-nav-item.is-active {
    border-color: var(--shelf-brass);
    background: linear-gradient(180deg, var(--shelf-brass-hi), var(--shelf-brass));
    color: var(--shelf-plaque-ink);
}

.rotunda-nav-item:focus-visible {
    outline: 2px solid var(--shelf-brass-hi);
    outline-offset: 2px;
}

/* ---- Narrow screens ---- */

@media (max-width: 720px) {
    .rotunda {
        height: 560px;
    }

    .rotunda-stage {
        perspective: 700px;
    }

    .rotunda-nav {
        display: none;
    }

    .rotunda-ui {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rotunda-world,
    .rotunda-spine {
        transition: none;
    }

    .rotunda.has-lantern .rotunda-warm,
    .rotunda-spine.is-lit .rotunda-shine {
        animation: none;
    }
}