/*
 * File: assets/css/devices.css, the comic devices of the Mammoth red grounds.
 * Purpose: draws the ray field from a ray origin, the halftone dot field at a left edge and the skyline fills, the art
 * the public masthead and the staff log in band share; the system layout links this file by name.
 * Defines: nothing; rules for .rays, .halftone-field and .skyline with its 2 fill classes
 * Doc: docs/notes/mammothcomics.com/assets/themes/mammoth/assets/css/devices.css.md
 */

/* Rays: 1 conic layer 3 times the box, centered on the ray origin; the mask fades it toward the corners. */
.rays { position: relative; overflow: hidden; isolation: isolate; }

.rays::before {
  content: '';
  position: absolute;
  top: calc(var(--ray-origin-y) - 150%);
  left: calc(var(--ray-origin-x) - 150%);
  z-index: -1;
  width: 300%;
  height: 300%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--color-ground-ray) 0deg 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, var(--color-ink-950) 14%, transparent 34%);
  mask-image: radial-gradient(circle at 50% 50%, var(--color-ink-950) 14%, transparent 34%);
  pointer-events: none;
}

/* Halftone field: a decorative element at the left edge of its ground, faded to the right; the band tear owns the
   pseudo-elements of a band, and the field is an element of its own. */
.halftone-field {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: var(--halftone-width);
  background-image: radial-gradient(circle, var(--color-ground-dot) 1.5px, transparent 2px);
  background-size: var(--halftone-grid) var(--halftone-grid);
  -webkit-mask-image: linear-gradient(90deg, var(--color-ink-950) 20%, transparent 100%);
  mask-image: linear-gradient(90deg, var(--color-ink-950) 20%, transparent 100%);
  pointer-events: none;
}

/* Skyline at the foot of a red ground: 1 inline SVG, the buildings in the ink ground and the lit windows in orange. */
.skyline {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: var(--skyline-height);
}

.skyline-mass { fill: var(--color-ground-ink); }
.skyline-lit { fill: var(--color-logo-orange); }