/* The error pages' Memphis scene.
 *
 * The rings, dots and bars behind the words. Split out of error-pages.css, which says what an error
 * page holds and what its controls do; this is only what sits behind them, and it is the part that
 * moves when the design does.
 *
 * Every shape is placed from the centre of a fixed grid, so the arrangement holds at any width
 * without the shapes drifting toward each other.
 */

/* ---- The Memphis scene -------------------------------------------------------------------
   Positioned on the design's own 1920x780 grid and centred, so the shapes keep their places
   relative to the column rather than drifting with the viewport. Rings are a border of the
   design's stroke width: outer diameter = 2r + stroke, which is exactly the exported box. */

/* The design's grid is 1920x780. Stretching the scene to whatever height the section ends up
   would slide every shape down with it, so the box keeps that height and is centred in the
   section; the section's own overflow does the cropping. */
.cil-error__scene {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 780px;
  margin-top: -390px;
  overflow: visible;
  pointer-events: none;
}

.cil-error__scene > * {
  position: absolute;
  left: 50%;
  /* Every offset below is measured from the design's centre line at x=960. */
  margin-left: calc(var(--x) - 960px);
  top: var(--y);
}

.cil-error__ring { border-radius: 50%; }
.cil-error__ring--blue {
  --x: -160px; --y: 120px;
  width: 520px; height: 520px;
  border: 18px solid var(--cil-blue);
  opacity: 0.32;
}
.cil-error__ring--yellow {
  --x: 1560px; --y: -120px;
  width: 460px; height: 460px;
  border: 18px solid var(--cil-yellow);
  opacity: 0.32;
}
.cil-error__ring--green {
  --x: 1360px; --y: 540px;
  width: 300px; height: 300px;
  border: 14px solid var(--cil-green);
  opacity: 0.28;
}

.cil-error__dot { border-radius: 50%; }
.cil-error__dot--red   { --x: 220px;  --y: 620px; width: 26px; height: 26px; background: var(--cil-red);   opacity: 0.6; }
.cil-error__dot--green { --x: 1180px; --y: 110px; width: 18px; height: 18px; background: var(--cil-green); opacity: 0.55; }
.cil-error__dot--blue  { --x: 1740px; --y: 620px; width: 20px; height: 20px; background: var(--cil-blue);  opacity: 0.5; }

/* The bars are placed by their centre, which is what the design's rotated bounding boxes resolve
   to — (300,230), (240,320) and (1660,360) on the same grid. Read off the design's own render: the
   green and yellow bars fall toward the right (a clockwise +30 in CSS) and the red one rises (-30). */
.cil-error__bar {
  width: 360px;
  height: 46px;
  margin-top: -23px;
  border-radius: 23px;
  opacity: 0.9;
}
.cil-error__bar--green  { --x: 300px;  --y: 230px; margin-left: calc(var(--x) - 960px - 180px); background: var(--cil-green);  transform: rotate(30deg); }
.cil-error__bar--yellow { --x: 240px;  --y: 320px; margin-left: calc(var(--x) - 960px - 180px); background: var(--cil-yellow); transform: rotate(30deg); }
.cil-error__bar--red    { --x: 1660px; --y: 360px; margin-left: calc(var(--x) - 960px - 180px); background: var(--cil-red);    transform: rotate(-30deg); }

/* ---- Narrow ---------------------------------------------------------------------------------
   The design draws its own scene for this width rather than shrinking the wide one. */
@media (max-width: 900px) {
  /* The design draws its own scene for this width rather than shrinking the desktop one: a 390x560
     grid with its own radii, stroke widths and positions. Scaling the wide arrangement pulled every
     shape toward the middle and left the page almost bare, which is what this replaces. */
  .cil-error__scene {
    height: 560px;
    margin-top: -280px;
  }
  .cil-error__scene > * { margin-left: calc(var(--x) - 195px); }

  .cil-error__ring--blue   { --x: -130px; --y: 26px;  width: 240px; height: 240px; border-width: 10px; }
  .cil-error__ring--yellow { --x: 288px;  --y: -86px; width: 220px; height: 220px; border-width: 10px; }
  .cil-error__ring--green  { --x: 276px;  --y: 418px; width: 150px; height: 150px; border-width: 8px; }

  .cil-error__dot--red   { --x: 36px;  --y: 470px; width: 16px; height: 16px; }
  .cil-error__dot--green { --x: 352px; --y: 196px; width: 11px; height: 11px; }
  .cil-error__dot--blue  { --x: 24px;  --y: 236px; width: 12px; height: 12px; }

  .cil-error__bar { width: 170px; height: 24px; margin-top: -12px; border-radius: 12px; }
  .cil-error__bar--green  { --x: 52px;  --y: 58px;  margin-left: calc(var(--x) - 195px - 85px); }
  .cil-error__bar--yellow { --x: 26px;  --y: 104px; margin-left: calc(var(--x) - 195px - 85px); }
  .cil-error__bar--red    { --x: 352px; --y: 486px; margin-left: calc(var(--x) - 195px - 85px); }
}