.interactive-logo {
    position: relative;
    width: 100%;
    aspect-ratio: 1642 / 801;
    isolation: isolate;
}
.interactive-logo > img,
.interactive-logo > canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 550ms ease;
}
.interactive-logo > img { opacity: 1; pointer-events: none; }
.interactive-logo > canvas { opacity: 0; pointer-events: none; }
.interactive-logo.is-ready > img { opacity: 0; }
.interactive-logo.is-ready > canvas { opacity: 1; pointer-events: auto; }
.interactive-logo > canvas:focus,
.interactive-logo > canvas:focus-visible { outline: none; box-shadow: none; }
.landing-brand.interactive-logo-brand { width: 480px; max-width: 82vw; }
#loading-screen .interactive-logo {
    /* A square viewport gives the wide mark room to turn upright.
       Leave space for the progress text on short/mobile screens. */
    width: min(630px, 90vw, max(180px, calc(100svh - 240px)) );
    max-width: 90vw;
    aspect-ratio: 1;
    margin-bottom: 30px;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .interactive-logo > img, .interactive-logo > canvas { transition: none; }
}
.landing-brand .interactive-logo > img { width: 100%; height: 100%; }