/* ==========================================================================
   Virtual Event Summit — the ticket on its own
   From the #tickets section of the landing page (../../archive/ves)
   ========================================================================== */

html,
body {
  height: 100%;
}

/* Black, like the case study page this sits in. (The tickets section of the
   landing page was #0d1014.) */
body {
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

/* On the landing page the canvas is a square as wide as its column: 552px on
   desktop. Here it is that size too, or as large as the window allows.

   The glow behind the ticket was an image there (graphics/ticket_bg.png): a
   soft white ellipse, wider than tall. This gradient is fitted to it and
   stays within 4 levels (of 255) of it everywhere. */
#ticket_canvas_parent {
  width: min(100vw, 100vh, 552px);
  aspect-ratio: 1;
  background: radial-gradient(
    56.25% 35.16% at 49.9% 49.22%,
    rgb(255 255 255 / 0.204) 0%,
    rgb(255 255 255 / 0.195) 10%,
    rgb(255 255 255 / 0.172) 20%,
    rgb(255 255 255 / 0.14) 30%,
    rgb(255 255 255 / 0.106) 40%,
    rgb(255 255 255 / 0.07) 50%,
    rgb(255 255 255 / 0.04) 60%,
    rgb(255 255 255 / 0.018) 70%,
    rgb(255 255 255 / 0.005) 80%,
    rgb(255 255 255 / 0.001) 90%,
    rgb(255 255 255 / 0) 100%
  );
}

.ticket_canvas {
  display: block;
  width: 100%;
  height: 100%;
}