/* Made by assets-src/rsvp/build_rsvp.py. The pictures, their shapes, and where on each the
   water starts (its near edge) and where the channel vanishes, in % of the picture. */

.rsvp {
  --scene-r: 0.5581;
  --near-x: 50.0%; --near-y: 51.0%;
  --vp-x: 50.0%; --vp-y: 21.8%;
}
.rs-scene { background-image: url(scene-phone.webp); }
.rs-below { background-image: url(jaali-phone.webp); }

@media (min-aspect-ratio: 5/8) {
  html:root .rsvp {
    --scene-r: 0.7467;
    --near-x: 50.0%; --near-y: 53.0%;
    --vp-x: 50.0%; --vp-y: 22.8%;
  }
  html:root .rs-scene { background-image: url(scene-tab.webp); }
  html:root .rs-below { background-image: url(jaali-tab.webp); }
}

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .rsvp {
    --scene-r: 1.3394;
    --near-x: 21.0%; --near-y: 51.0%;
    --vp-x: 29.6%; --vp-y: 21.2%;
  }
  html.is-tablet .rs-scene { background-image: url(scene-land.webp); }
  html.is-tablet .rs-below { background-image: url(jaali-land.webp); }
}

.rsvp { --boat-r: 1.6495; }
.rs-boat-img, .rs-boat-ref { background-image: url(boat.webp); }