/* Chapter reader: placeholder box shown behind each page image while it
   loads, so the strip doesn't collapse to blank space / jump around as
   images arrive. No per-page width/height is known ahead of time, so we
   reserve a generic portrait aspect-ratio (matches auth-collage.css) until
   the real image loads, then let it fall back to its natural size. */
.reader-page-ph {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.reader-page-ph:not(.is-loaded) {
    aspect-ratio: 2 / 3;
}

.reader-page-ph:not(.is-loaded)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.09) 50%,
            rgba(255, 255, 255, 0.03) 100%);
    animation: reader-page-ph-sweep 1.6s ease-in-out infinite;
}

@keyframes reader-page-ph-sweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.reader-page-ph img.reader-page {
    transition: opacity .25s ease;
}

.reader-page-ph:not(.is-loaded) img.reader-page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}