/*
 * Gold Tickets - the shared page background and header lockup sheen. Loaded by every page.
 * Rationale and the rules this file has to satisfy: COPY_DECISIONS.md (not served).
 */

/* ===========================================================================
   THE FIELD, ONCE, FOR EVERY PAGE.

   ONE DECLARATION RATHER THAN ONE PER PAGE. Every page already loads this file,
   so this is one asset and one set of numbers with no second copy to drift.

   ON `body::before`, NOT ON `html`. Every page paints `body` with an opaque
   background colour, and a layer behind that colour is a layer nobody sees. A
   positioned pseudo-element with a negative z-index paints above its OWN
   parent's background and below that parent's in-flow content, which is
   exactly the slot this needs. The flat colour underneath stays as the
   fallback if the image never arrives.

   FIXED, SO IT DOES NOT SCROLL. A background that travels with a long legal
   page becomes a moving photograph behind body text. Held still it reads as
   the room the page is standing in.

   THE VEIL IS HEAVY HERE AND LIGHT IN THE HERO. Behind body copy the yard
   numbers are large enough to compete with a paragraph, so this layer takes
   the picture down to texture. The hero paints the same asset again at a far
   lighter veil, because that is the one place it is meant to be looked at.

   THE VEIL IS IN THE CSS, NOT BAKED INTO THE FILE. One asset serves both a
   page of body copy, which needs the picture to be almost texture, and the
   homepage hero, which is the one place it should be seen. Two files would be
   two downloads and two things to keep in step.

   TWO `background-image` DECLARATIONS ON PURPOSE. The first is a plain url a
   browser without `image-set` will take; the second replaces it where the
   smaller format is understood. Do not merge them.
   =========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(8, 8, 13, .90), rgba(8, 8, 13, .90)),
    url("/assets/hero-field-890.jpg");
  background-image:
    linear-gradient(rgba(8, 8, 13, .90), rgba(8, 8, 13, .90)),
    image-set(url("/assets/hero-field-890.webp") type("image/webp"),
              url("/assets/hero-field-890.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* A NARROW VIEWPORT GETS THE SMALLER FILE. This layer covers the viewport rather than the document,
   so a phone never needs the 890 wide variant and should not pay for it. */
@media (max-width: 520px) {
  body::before {
    background-image:
      linear-gradient(rgba(8, 8, 13, .90), rgba(8, 8, 13, .90)),
      url("/assets/hero-field-480.jpg");
    background-image:
      linear-gradient(rgba(8, 8, 13, .90), rgba(8, 8, 13, .90)),
      image-set(url("/assets/hero-field-480.webp") type("image/webp"),
                url("/assets/hero-field-480.jpg") type("image/jpeg"));
  }
}

/* The sheen is absolutely positioned over the mark, so the anchor needs to be a containing block.
   Both properties are additive: neither touches size, spacing or alignment. */
.brand {
  position: relative;
  isolation: isolate;
}

/* Crosses in the last third of the cycle and rests for the remainder. Masked rather than a filter on
   the artwork, because brightening a gold gradient only makes it yellow. */
.brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 22%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .72) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 190% 0;
  mix-blend-mode: screen;
  animation: gtSheen 4.6s ease-in-out infinite;
}

@keyframes gtSheen {
  0%, 62% { background-position: 190% 0; }
  100%    { background-position: -90% 0; }
}

/* Hidden rather than paused, so it cannot freeze mid-sweep as a white streak across the mark. */
@media (prefers-reduced-motion: reduce) {
  .brand::after { animation: none; opacity: 0; }
}