.logo-showcase.hero-flex-ready>img{opacity:0}
.logo-showcase>.hero-flex-canvas{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;max-width:450px;height:auto;pointer-events:none;image-rendering:pixelated;mix-blend-mode:screen}
.logo-showcase.hero-flex-ready:not(.pixel-assembling)>.hero-flex-canvas{display:block}
@media(prefers-reduced-motion:reduce){.logo-showcase.hero-flex-ready>img{opacity:1}.logo-showcase>.hero-flex-canvas{display:none!important}}

/* Reserve the extension space from the first paint, so the pixel intro and rig align. */
@media(prefers-reduced-motion:no-preference){
 html.hero-flex-enabled .logo-showcase{aspect-ratio:1}
 html.hero-flex-enabled .logo-showcase>img{width:83.333333%;max-width:375px;transform:translateX(-8.333333%)}
 html.hero-flex-enabled .logo-showcase>.hero-pixels-canvas{top:8.333333%;width:83.333333%;max-width:375px;transform:translateX(-58.333333%)}
}