/* A white brand mark on a solid HOP red opening screen. */
html.hop-loading,html.hop-loading body{margin:0;min-height:100%;background:#ff2a08;overflow:hidden}
html.hop-loading.hop-returning,html.hop-loading.hop-returning body{background:#fffdf5}
html.hop-loading #app{visibility:hidden;opacity:0}
.hop-loading-screen{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:#ff2a08;pointer-events:auto}
html.hop-returning .hop-loading-screen{display:none}
.hop-loading-logo{display:block;width:104px;height:auto;max-width:24vw;object-fit:contain;filter:brightness(0) invert(1);transform-origin:center}
.hop-loading-screen.is-leaving .hop-loading-logo{animation:hop-logo-depart 520ms cubic-bezier(.4,0,.65,1) both}
.hop-loading-screen.is-clearing{opacity:0;transition:opacity 180ms ease;pointer-events:none}
@keyframes hop-logo-depart{0%{transform:scale(1);opacity:1}100%{transform:scale(2.8);opacity:0}}
.storefront img[data-image-entrance="waiting"]{opacity:0!important}
.storefront img[data-image-entrance="entering"]{animation:hop-image-arrive 760ms cubic-bezier(.2,.65,.25,1) both}
@keyframes hop-image-arrive{from{opacity:0;filter:blur(9px);scale:1.07}to{opacity:1;filter:blur(0);scale:1}}
@media(max-width:600px){.hop-loading-logo{width:84px}}
@media(prefers-reduced-motion:reduce){.hop-loading-screen.is-leaving .hop-loading-logo{animation:none;opacity:0}.hop-loading-screen.is-clearing{transition:none}.storefront img[data-image-entrance="entering"]{animation:none}}
.no-motion img[data-image-entrance="entering"]{animation:none}