/* Cover fills the first screen on its own, at the same size as the pages
   below, with the same gap above and below it. It is pulled up under the
   sticky navbar (transparent while the cover is showing, see navigation.js),
   so the navbar is part of the space above it. */
.cover_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(-1 * var(--nav-h));
    padding: var(--screen-gap) 16px;
}

/* Page 1 of the PDF; nothing on it reacts to the pointer */
.cover-card {
    display: block;
    width: var(--base-page-width);
    aspect-ratio: 419.53 / 595.28;
    background: #fff;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* =========================
   Opening sequence
   ========================= */

/* Cover rises in */
body.opening .button_container { animation: cover-fade 700ms 200ms both; }
body.opening .cover-card { animation: cover-in 900ms var(--ease-out) 120ms both; }

@keyframes cover-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
@keyframes cover-fade { from { opacity: 0; } }

/* =========================
   Phones
   ========================= */

@media (max-width: 760px) {
    .page-reader {
        --base-page-width: min(calc(100vw - 32px), calc((100svh - 200px) * 0.705));
    }

    .cover_container {
        padding-top: calc(var(--nav-h) + 12px);
    }
}