/* Closing quote: the last moment of the drawings page and of the diploma project.

   The quote sits in a stage as tall as the screen. Scrolling down, it shows faint and soft at the
   bottom of the screen while the last sheets above are still in view, then rises at half the
   speed of the page, all the way, never stopping: the sheets pull away from it, it passes the
   middle sharp and alone between two bands of the page colour, and keeps rising slowly while the
   footer comes in with the "next" arrow right above it; the arrow eases onto its place at the
   bottom right, and the quote ends centred in what is left of the screen (Even, 21/10/2026).
   No pause in the middle (Even, 21/10/2026: a quote held still while the page scrolls feels like
   a freeze, scrolling must stay fluid).

   Everything is driven by view timelines, natively, with no script: the entry and exit of the
   stage for the quote, the entry of the footer for the arrow. Without scroll timelines, or under
   reduced motion, the quote simply scrolls with the page and the arrow sits above the footer.
   Only transforms, opacity and a small blur are animated. */

/* The footer timeline must reach the arrow, which comes before the footer. */
.page--with-quote .page-inner { timeline-scope: --page-footer; }

.page--with-quote .site-footer {
    view-timeline-name: --page-footer;
    view-timeline-axis: block;
}

.quote-stage {
    /* Full-bleed inside the padded page, like the footer: --scrollbar-width (set by script)
       keeps the scrollbar of .page from causing an overflow. */
    width: calc(100vw - var(--scrollbar-width, 0px));
    margin-left: calc(-50vw + var(--scrollbar-width, 0px) / 2 + 50%);
    margin-right: calc(-50vw + var(--scrollbar-width, 0px) / 2 + 50%);

    /* One screen: the end of its entry is the start of its exit, so the quote never stops. */
    height: 100vh;
    height: 100dvh;
    view-timeline-name: --quote-stage;
    view-timeline-axis: block;

    /* How far the quote lags behind the page over one screen of scrolling: half a screen, it
       moves at half the speed of the page. */
    --quote-drift: 50vh;
}

.quote-stage-pin {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* The quote, alone in the middle. One line on desktop. */
.quote-band-body {
    padding: 0 40px;
    max-width: 80rem;
    text-align: center;
}

/* The arrow right above the footer, at the right edge of the screen like every "next" arrow. The
   padding below is the little air it keeps from the footer once the page is at its end. */
.quote-next {
    display: flow-root;
    padding-bottom: 34px;
}

.quote-next .page-next {
    margin-top: 0;
    margin-bottom: 0;
}

/* The footer follows the arrow directly: they come in together. */
.quote-next + .site-footer { margin-top: 0; }

/* A single line needs restraint: small, light body. The guillemets are drawn here. */
.quote-band-text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.9rem, 1.2vw, 1.06rem);
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: var(--white);
    text-wrap: balance;
    quotes: none;
}

.quote-band-text::before { content: '\00AB\00A0'; }
.quote-band-text::after { content: '\00A0\00BB'; }

.quote-band-author {
    margin-top: 18px;
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    letter-spacing: 0.04em;
    color: rgb(255 255 255 / 50%);
}

@media (max-width: 768px) {
    .quote-band-body {
        padding: 0 26px;
        max-width: 30rem;
    }

    .quote-band-text {
        font-size: 1rem;
        line-height: 1.65;
    }

    .quote-band-author { margin-top: 15px; }
    .quote-next { padding-bottom: 24px; }

    /* Phones: the footer, with its legal text, takes most of the screen. Half a screen of lag
       would leave the quote under the header at the end: a quarter, at three quarters of the
       speed of the page, the same from start to end. */
    .quote-stage { --quote-drift: 25vh; }
}

/* Scroll-driven, native, no script. Only where view timelines exist: elsewhere the animations
   would run on the document timeline and leave their first keyframe applied (a faint quote out
   of place), so those browsers keep the resting state above. */
@supports (animation-timeline: view()) and (timeline-scope: --x) {
    @media (prefers-reduced-motion: no-preference) {
        /* The rise: the quote starts --quote-drift above its place in the box, at the bottom of
           the screen just under the sheets, and comes down to it while the box climbs the
           screen: on screen it rises slower than the page, faint and soft at first, sharp in the
           middle. */
        .quote-band-body {
            animation: quote-arrive linear both;
            animation-timeline: --quote-stage;
            animation-range: entry 0% entry 100%;
        }

        /* Then, as the footer comes in, the box moves down by the same lag, at the same pace: the
           quote goes on rising at the same speed and ends centred above the footer. */
        .quote-stage-pin {
            animation: quote-settle linear both;
            animation-timeline: --quote-stage;
            animation-range: exit 0% exit 100%;
        }

        /* The arrow comes in hugging the footer, then eases up onto its place as the footer
           finishes coming in: a little more air at the very end. */
        .quote-next {
            animation: quote-next-land cubic-bezier(0.22, 1, 0.36, 1) both;
            animation-timeline: --page-footer;
            animation-range: entry 0% entry 100%;
        }
    }
}

@keyframes quote-arrive {
    0% {
        opacity: 0.22;
        filter: blur(5px);
        transform: translateY(calc(-1 * var(--quote-drift)));
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes quote-settle {
    from { transform: translateY(0); }
    to { transform: translateY(var(--quote-drift)); }
}

@keyframes quote-next-land {
    from { transform: translateY(26px); }
    to { transform: translateY(0); }
}