/* =========================================================================
   Hero: the SOLUM wordmark
   Real text for screen readers and search; the mark itself is decorative.
   The SVG is used as a mask, so the fill is set here rather than taken from
   the artwork: the mark can be tinted, dimmed or gradient-filled without
   touching the file. Vector, so it stays sharp at any size.
   ========================================================================= */

.hero {
  /* the full width of the page, across the foot of the opening screen */
  --hero-width: 100%;
}

/* Frosted glass. The scene behind is blurred and brightened through the
   letters, under a faint white that is stronger at the top, and the whole
   mark eases off a little toward its foot — the second mask layer,
   intersected with the letters — so the name settles into the ground
   rather than sitting on it.

   No filter on the mark: a filter would make it its own backdrop, and the
   glass would see nothing behind it but itself. Its opacity is left to the
   opening sequence (motion.css), which is why the transparency is all in
   the fill and the mask rather than in opacity. */
/* How far the opening unveil has travelled across the mark (motion.css).
   Registered so that it animates smoothly; past 100% the mark is whole,
   which is where it rests, and where it stays without JavaScript or where
   the browser cannot animate it. */
@property --unveil {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 125%;
}

.hero__mark {
  --unveil: 125%;
  position: relative;
  display: block;
  width: min(100%, var(--hero-width));
  aspect-ratio: 2670.62 / 318.49;   /* the artwork's own viewBox */
  /* about half as strong as it was, fill, light and rim alike, so
     the name sits more quietly on the picture */
  background: linear-gradient(180deg,
    rgb(246 251 254 / 0.2),
    rgb(246 251 254 / 0.075) 60%,
    rgb(246 251 254 / 0.05));
  -webkit-backdrop-filter: blur(14px) saturate(1.2) brightness(1.14);
  backdrop-filter: blur(14px) saturate(1.2) brightness(1.14);
  /* Three layers, intersected: the letters, the easing-off toward the
     foot, and the unveil — a soft edge, a quarter of the mark wide, that
     travels left to right as --unveil runs up from nothing. */
  -webkit-mask:
    url("/assets/brand/solum-wordmark.svg") left center / contain no-repeat,
    linear-gradient(180deg, #000 45%, rgb(0 0 0 / 0.78) 100%),
    linear-gradient(90deg, #000 calc(var(--unveil) - 25%), transparent var(--unveil));
  -webkit-mask-composite: source-in, source-in;
  mask:
    url("/assets/brand/solum-wordmark.svg") left center / contain no-repeat,
    linear-gradient(180deg, #000 45%, rgb(0 0 0 / 0.78) 100%),
    linear-gradient(90deg, #000 calc(var(--unveil) - 25%), transparent var(--unveil));
  mask-composite: intersect, intersect;
}

/* The rim: the edges that face the light, and only those
   (solum-wordmark-edge.svg, generated with the mark by scripts/wordmark.py).
   One light, up and to the left: the tops of the bars catch it, the
   upper-left chamfers nearly as much, the left faces a little, and the
   undersides and right faces not at all — each edge carries its own
   strength in the file. Laid inside the mark, whose mask clips it to the
   letters, so only the inner half of each line shows. Kept soft: it
   should catch the light, not draw the letters. */
.hero__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(255 255 255 / 0.25),
    rgb(255 255 255 / 0.14));
  -webkit-mask: url("/assets/brand/solum-wordmark-edge.svg") left center / contain no-repeat;
  mask: url("/assets/brand/solum-wordmark-edge.svg") left center / contain no-repeat;
}


/* a short landscape phone: the full width would stand taller than the
   screen can spare */
@media (orientation: landscape) and (max-height: 30rem) {
  .hero {
    --hero-width: 26rem;
  }
}