/* The site's self-hosted Noto @font-face declarations belong in the shared
   font bundle. The canvas router names each family explicitly in JavaScript. */

.glyph-stream {
    position: relative;
    width: min(100%, 1080px);
    aspect-ratio: 1;
    overflow: hidden;
    background: #ffffff;
    contain: layout paint size;
    isolation: isolate;
}

.glyph-stream canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* The persistent transition shell uses the same renderer as a full-viewport scene. */
.lang-transition-glyph-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    overflow: hidden;
    transition: opacity 320ms cubic-bezier(.215, .61, .355, 1);
}

/* The persistent shell uses this very element as the stream stage. Reset the
   reusable demo dimensions so it is always a true viewport-sized canvas. */
.lang-transition-glyph-layer.glyph-stream,
.lang-transition-glyph-layer .glyph-stream {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
}

body.lang-switching #lang-transition-overlay.is-glyph-stream .lang-transition-glyph-layer,
body.lang-reveal #lang-transition-overlay.is-glyph-stream:not(.is-glyph-stream-revealing) .lang-transition-glyph-layer {
    opacity: 1;
}

body.lang-reveal #lang-transition-overlay.is-glyph-stream.is-glyph-stream-revealing .lang-transition-glyph-layer {
    opacity: 0;
}

/* The canvas runs its own bottom-to-top exit before the next page is exposed. */
body.lang-reveal #lang-transition-overlay.is-glyph-stream .lang-transition-wipe,
body.lang-reveal.lang-reveal-active #lang-transition-overlay.is-glyph-stream .lang-transition-wipe {
    transform: translate3d(0, 100%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .glyph-stream {
        background: #ffffff;
    }

    .lang-transition-glyph-layer {
        transition: none;
    }
}