/* Generated by assets-src/cover/build_cover.py: the envelope picture for each screen shape,
   and where in it (as fractions: x of its width, y and the seal's radius of its height) the
   flaps meet, the seal sits and the band runs. js/cover.js turns these into places on the
   screen. The shape goes by the screen alone, as the envelope always fills it. */
.gate {
  --env-r: 0.5628;
  --join: 0.5005;
  --seal-x: 0.4987;
  --seal-y: 0.4955;
  --seal-r: 0.0758;
  --band-t: 0.4432;
  --band-b: 0.5562;
}
.gate .env-art { background-image: url(envelope.webp); }
.gate .gleam { -webkit-mask-image: url(gold.webp); mask-image: url(gold.webp); }

@media (min-aspect-ratio: 13/20) {
  .gate {
    --env-r: 0.7500;
    --join: 0.4945;
    --seal-x: 0.4926;
    --seal-y: 0.4885;
    --seal-r: 0.0827;
    --band-t: 0.4365;
    --band-b: 0.5518;
  }
  .gate .env-art { background-image: url(envelope-tab.webp); }
  .gate .gleam { -webkit-mask-image: url(gold-tab.webp); mask-image: url(gold-tab.webp); }
}

@media (min-aspect-ratio: 21/20) {
  .gate {
    --env-r: 1.3333;
    --join: 0.5000;
    --seal-x: 0.4991;
    --seal-y: 0.4914;
    --seal-r: 0.1148;
    --band-t: 0.4199;
    --band-b: 0.5691;
  }
  .gate .env-art { background-image: url(envelope-land.webp); }
  .gate .gleam { -webkit-mask-image: url(gold-land.webp); mask-image: url(gold-land.webp); }
}