/* =========================================================================
   The eyebrow, and the HAAVN BLACK device's glass
   (the announcement these were drawn for is gone; the opening screen now
   carries what it said)
   ========================================================================= */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* size and weight come from the shared label rule in base.css, so this
     sits level with "Arriving in:" */
  letter-spacing: var(--track-eyebrow);
  color: var(--teaser-gold);
  text-shadow: 0 0 10px rgb(214 179 106 / 0.55), 0 0 26px rgb(214 179 106 / 0.28);
  transition: color var(--dur-phase) ease, text-shadow var(--dur-phase) ease;
}


/* =========================================================================
   The mark

   The device given the SOLUM wordmark's treatment, so the two marks on
   the page read as the same material under the same light: a glass fill,
   faintly white and stronger at the top; a rim on only the edges that
   face the light, which comes from the same place as the wordmark's (up
   and a little to the left — see scripts/device.py); and the same gentle
   easing-off toward the foot. The shape is the artwork's own, unaltered.

   Small now, and centred over the words: at this size, over black, the
   glass is given a little more fill than it had large, so the shape holds.
   ========================================================================= */

/* (the blurbs' marks, over the claddings', the palettes' and the sizes'
   words, are the same glass at the same size: scene.css) */
.lead-device {
  position: relative;
  /* small: a mark over the words, not a heading of its own */
  width: clamp(2.75rem, 3.75vw, 3.5rem);
  /* and quiet: the whole glass taken back together, fill, light and
     colour alike, so it sits behind the words rather than beside them */
  opacity: 0.55;
  aspect-ratio: 596.12 / 480.52;   /* the artwork's own viewBox */
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-7));
  /* the page's liquid glass (tokens.css): an even frost, lit by its
     bevel (below) rather than by itself */
  background:
    radial-gradient(130% 75% at 50% 118%,
      rgb(246 251 254 / 0.13),
      transparent 78%),
    linear-gradient(180deg,
      rgb(246 251 254 / 0.2),
      rgb(246 251 254 / 0.13));
  -webkit-mask:
    url("/assets/brand/hvn-blk-device.svg") center / 100% 100% no-repeat,
    linear-gradient(180deg, #000 45%, rgb(0 0 0 / 0.78) 100%);
  -webkit-mask-composite: source-in;
  mask:
    url("/assets/brand/hvn-blk-device.svg") center / 100% 100% no-repeat,
    linear-gradient(180deg, #000 45%, rgb(0 0 0 / 0.78) 100%);
  mask-composite: intersect;
  pointer-events: none;
}

/* The bevel: a soft band of light rolling in from every edge, strongest
   along the top and again along the foot (hvn-blk-device-bevel.svg, kept to its inner half by the
   mark's own mask), as on the wordmark. */
.lead-device::before {
  content: "";
  position: absolute;
  inset: 0;
  /* bright along the top, where the light falls, and along the foot,
     where it comes back through the glass; quiet between */
  background: linear-gradient(180deg,
    rgb(255 255 255 / 0.25),
    rgb(255 255 255 / 0.09) 40%,
    rgb(255 255 255 / 0.09) 66%,
    rgb(255 255 255 / 0.18));
  -webkit-mask: url("/assets/brand/hvn-blk-device-bevel.svg") center / 100% 100% no-repeat;
  mask: url("/assets/brand/hvn-blk-device-bevel.svg") center / 100% 100% no-repeat;
}

/* The highlight: the edges that face the light, clipped to the shape by
   the mark's own mask so only the inner half of each line shows, as on
   the wordmark; quiet, over the bevel. */
.lead-device::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(255 255 255 / 0.15),
    rgb(255 255 255 / 0.06));
  -webkit-mask: url("/assets/brand/hvn-blk-device-edge.svg") center / 100% 100% no-repeat;
  mask: url("/assets/brand/hvn-blk-device-edge.svg") center / 100% 100% no-repeat;
}