/* ================================================================
   Book Reader — Visual Mode Styles
   Feature #16 | v1.1
   Catalog/brochure/magazine image rendering
   ================================================================ */

/* Page image rendering */
.ai501-book-reader--visual .ai501-br-page img,
.ai501-book-reader--visual .ai501-br-page picture {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
    border: 1px solid var(--br-border);
    border-radius: 2px;
    box-shadow: 0 2px 12px var(--br-page-shadow);
}

/* Retina srcset support */
.ai501-book-reader--visual .ai501-br-page picture source,
.ai501-book-reader--visual .ai501-br-page picture img {
    max-width: 100%;
    max-height: 100%;
}

/* Page flip shadow — brief brightness dim at midpoint */
.ai501-book-reader--visual .ai501-br-page--flip-out img,
.ai501-book-reader--visual .ai501-br-page--flip-out-rev img {
    transition: filter calc(var(--br-flip-duration) / 2) ease;
}

@media (prefers-reduced-motion: no-preference) {
    .ai501-book-reader--visual .ai501-br-page--flip-out img,
    .ai501-book-reader--visual .ai501-br-page--flip-out-rev img {
        filter: brightness(0.98);
    }
}

/* Zoom states */
.ai501-book-reader--visual .ai501-br-page-area[data-zoom="125"] .ai501-br-page img {
    transform: scale(1.25);
    transform-origin: center center;
}

.ai501-book-reader--visual .ai501-br-page-area[data-zoom="150"] .ai501-br-page img {
    transform: scale(1.5);
    transform-origin: center center;
}

.ai501-book-reader--visual .ai501-br-page-area[data-zoom="125"],
.ai501-book-reader--visual .ai501-br-page-area[data-zoom="150"] {
    overflow: auto;
    cursor: grab;
}

.ai501-book-reader--visual .ai501-br-page-area[data-zoom="125"]:active,
.ai501-book-reader--visual .ai501-br-page-area[data-zoom="150"]:active {
    cursor: grabbing;
}

/* Pinch-to-zoom visual feedback */
.ai501-book-reader--visual .ai501-br-page-area.ai501-br-pinching {
    touch-action: none;
}

/* Desktop page constraints */
@media (min-width: 769px) {
    .ai501-book-reader--visual .ai501-br-page img {
        max-height: calc(100% - 16px);
        margin: 8px auto;
    }
    
    .ai501-book-reader--visual .ai501-br-page picture {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Mobile: fill width */
@media (max-width: 768px) {
    .ai501-book-reader--visual .ai501-br-page img {
        width: 100%;
        max-height: none;
        border: none;
        border-radius: 0;
    }
}

/* PDF.js canvas fallback */
.ai501-book-reader--visual .ai501-br-page canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    border: 1px solid var(--br-border);
    border-radius: 2px;
    box-shadow: 0 2px 12px var(--br-page-shadow);
}

/* Loading placeholder */
.ai501-book-reader--visual .ai501-br-page--loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai501-book-reader--visual .ai501-br-page--loading::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid var(--br-border);
    border-top-color: var(--br-accent);
    border-radius: 50%;
    animation: ai501BrSpin 0.8s linear infinite;
}

@keyframes ai501BrSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ai501-book-reader--visual .ai501-br-page--loading::after {
        animation: none;
        border-top-color: var(--br-border);
        opacity: 0.5;
    }
}