/* The Home artwork uses its original country plane at both navigation levels. */
#home-relief-canvas { position:absolute; display:none; pointer-events:none; opacity:0; }
body[data-stage="countries"] #home-relief-canvas,
body[data-stage="country"] #home-relief-canvas { display:block; }
#home-relief-canvas[data-state="ready"],
#home-relief-canvas[data-state="morphing"] { opacity:1; }
body[data-stage="countries"] #map,
body[data-stage="country"] #map { visibility:hidden; }
body[data-stage="country"] #home-relief-canvas { left:3%; top:9%; width:94%; height:78%; }
body[data-stage="country"] .map-fade { pointer-events:none; }
body[data-stage="countries"] .country-name { font-family:var(--home-country-font); font-weight:var(--home-country-weight); font-synthesis:none; }
body[data-stage="countries"] .country-name>.hk-label { font-size:inherit; }
html:not([data-home-typography]) body[data-stage="countries"] #country-list { visibility:hidden; }
@media(min-width:761px) {
  body[data-stage="countries"] #home-relief-canvas {
    left:max(45%,510px); top:17%; width:calc(100% - max(45%,510px)); height:66%;
    mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  }
  body[data-stage="countries"] #about-button { font-family:var(--home-about-font); font-weight:var(--home-country-weight); }
}
@media(max-width:760px) {
  body[data-stage="countries"] #geography { display:block; inset:0; overflow:hidden; opacity:1; }
  body[data-stage="countries"] .map-fade { display:none; }
  body[data-stage="countries"] #home-relief-canvas {
    display:block; left:2%; top:12%; width:96%; height:76%;
    /* The renderer fits the country's complete ink bounds inside this field.
       These fades stay outside that fitted silhouette, rather than cutting it. */
    mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  }
  /* Paper halos follow the actual HK letterforms, leaving the country drawing
     visible between words instead of hiding it behind rectangular text panels. */
  body[data-stage="countries"] .country-name>.hk-label {
    filter:drop-shadow(0 0 5px var(--paper)) drop-shadow(0 0 9px var(--paper));
  }
  body[data-stage="country"] #home-relief-canvas { left:0;top:15%;width:100%;height:65%; }
}