/*
 * A line in Boom's voice, wherever one is printed.
 *
 * NOT A BUBBLE. No rounded pill, no tail, no avatar beside a message -- none of
 * the furniture that would make the page look like it had a chat in it, which
 * is the one thing this vocabulary was asked not to be. What it is instead is
 * something written on the page: the display face, barely off level, over a
 * rule drawn the way a marker would.
 *
 * It is also not the gold caption box (boom-note.css), the torn drop strip or
 * the pick ring. Four Boom-flavoured objects on one site is already the limit,
 * so each has to be unmistakable: the note is his opinion of a product, the
 * strip is news, the ring is his name on it, and this is him talking.
 */
.boom-says {
  display: inline-block;
  margin: 0;
  padding: 0 2px 5px;
  color: var(--ink, #0c0b0e);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3vw, 1.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  /* Drawn rather than a border: a hand-ruled line is thicker in the middle,
     and a 3px border under a display face reads as a form field. */
  background:
    linear-gradient(90deg, transparent 0 3%, currentColor 8% 92%, transparent 97% 100%)
    0 100% / 100% 3px no-repeat;
  transform: rotate(-1.1deg);
}

/*
 * Beside him on a product poster.
 *
 * Bottom-left, in the one part of this frame nothing else has claimed. The
 * cover carries an issue chip and a price circle down the top-left, a mascot
 * corner box and a gold seal down the right, the barcode in the bottom corner
 * and him standing bottom-centre -- the first cut put this at the top-left and
 * it came out under the price circle, legible in the DOM and not on the page.
 * It sits just above the barcode, near enough to him to read as his.
 *
 * Absolutely placed inside .product-dock, which already fills the art frame.
 */
.product-dock .boom-says {
  position: absolute;
  z-index: 5;
  left: clamp(10px, 3vw, 20px);
  bottom: clamp(68px, 12vw, 84px);
  max-width: 44%;
  padding: 3px 8px 6px;
  background-color: rgba(255, 255, 255, .72);
  opacity: 0;
  /* He says it, then he stops. The delay on the way out is the whole gesture:
     an instant fade reads as a tooltip closing. */
  transition: opacity .18s ease-out, transform .18s ease-out;
  transform: rotate(-1.1deg) translateY(6px);
  pointer-events: none;
}
.product-dock .boom-says.is-said {
  opacity: 1;
  transform: rotate(-1.1deg) translateY(0);
}

/* On a page rather than over art: it is copy there, and it sits in the flow. */
.cover-copy .boom-says { margin: 0 0 14px; }

/*
 * After somebody knocks on the sign.
 *
 * Paper and not ink: the hero is near-black, and the base rule's --ink would
 * print this in the one colour it cannot be read in there.
 *
 * Bottom-left of .hero-art, which is where the lockup is not -- the sign is
 * centred in that box and he stands in the middle of it. Absolute, so it
 * cannot push the hero's grid around: the lockup's placement is measured to
 * the percentage against the artwork and a line arriving in the flow would
 * move all of it.
 *
 * No fade back out, and no clock anywhere that would remove it. This one is
 * the whole of an easter egg's payoff rather than a remark on a moment, and it
 * is earned once a visit -- see the comment in easter-eggs-home.mjs.
 */
.hero-art .boom-says {
  position: absolute;
  z-index: 6;
  /*
   * Top right, and both halves of that were arrived at the hard way.
   *
   * Not the bottom: that is where the scroll cue is on a wide screen and where
   * the fold is on a narrow one. .hero-art carries a 680px min-height, so on a
   * phone the lockup is centred in a box whose last inch is off the screen, and
   * the first cut of this landed the line down there, half cropped.
   *
   * Not the left either. .hero-art is not a column -- it spans the whole hero
   * and .hero-copy is laid over the left of it -- so a line pinned left came
   * out directly above "A Massachusetts cannabis brand", reading as an eyebrow
   * on the headline rather than as a remark. The right of the hero is empty at
   * every width.
   */
  top: clamp(12px, 4vw, 44px);
  right: clamp(4px, 3vw, 28px);
  max-width: min(52%, 320px);
  color: var(--paper, #f2efe9);
  opacity: 0;
  transition: opacity .28s ease-out, transform .28s ease-out;
  transform: rotate(-1.1deg) translateY(8px);
  pointer-events: none;
}
.hero-art .boom-says.is-said {
  opacity: 1;
  transform: rotate(-1.1deg) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .product-dock .boom-says,
  .hero-art .boom-says { transition-duration: .01ms; transform: rotate(-1.1deg); }
  .product-dock .boom-says.is-said,
  .hero-art .boom-says.is-said { transform: rotate(-1.1deg); }
}