/* Phone fixes loaded after site.css (task 4): the page stays as designed, only the seams go. */

/* The glow behind a hero is strongest at its lower edge and was cut there by a straight line; on a phone, where the
   next block follows at once, that line showed as a seam. The glow now fades out toward the bottom edge. */
@media (max-width: 860px) {
  .aurora {
    -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent);
    mask-image: linear-gradient(180deg, #000 65%, transparent);
  }

  /* The tilted panels (and their shadows) are cut by the lower edge of their box. On a screen whose pixel ratio makes that edge
     fall inside a device pixel (2.625 of many phones, a tablet) the cut showed as a one-pixel line across the page in both
     themes. The lower 28 px fade out instead, so there is no cut to see. */
  .stage3d {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  }
}