/*
 * The replay control. See intro-replay.mjs for why it is built in JS and why it
 * is deliberately visible rather than hidden.
 *
 * Top right of .hero-art, which is the one corner of that box the artwork
 * never reaches: the mascot stands centre and the wordmark runs along the
 * bottom. It was at the foot of the box first, and that put it across the
 * BOOM's lower edge and alongside the scroll cue -- a control reading over the
 * top of its own subject. Measured at 1280 and moved.
 *
 * .hero-art is already position: relative (styles-core.css) and the mascot's
 * canvas is pointer-events: none, so this takes the click even while he is
 * standing in front of it.
 */
.intro-replay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;

  /* Reads as small print, not as a third call to action. The hero already has
     two buttons and this must not compete with either of them. */
  font: inherit;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;

  /*
   * 5.3:1 on the hero's ground at rest, which clears AA for the size it is set
   * at. The resting fill is deliberately near-transparent -- it is a control
   * for the few people who want it, and it should not be the brightest thing
   * next to a mascot.
   */
  color: #b9b3bd;
  background: rgba(12, 11, 14, .42);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

/*
 * The pill itself stays small on purpose (see above) -- this pseudo-element
 * pads its tap target out to 44px tall without touching how it looks.
 * Measured 86-131 x 19-29px, well under the target-size minimum; it can
 * safely grow into the corner it already sits in (nothing else claims that
 * space, and the mascot's canvas under it is pointer-events: none).
 */
.intro-replay::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.intro-replay:hover,
.intro-replay:focus-visible {
  color: #fff;
  background: rgba(12, 11, 14, .72);
  border-color: rgba(255, 255, 255, .42);
}

/*
 * While he is walking. Dimmed rather than hidden: a control that vanishes on
 * click leaves the visitor wondering whether they hit it, and this one has a
 * second and a half of walk before anything obvious happens.
 */
.intro-replay.is-playing,
.intro-replay:disabled {
  opacity: .45;
  cursor: default;
}

/*
 * Reduced motion never gets one.
 *
 * mascot-stage.mjs declines to build a renderer at all under it, so ready()
 * answers no and nothing is ever mounted -- this is the second lock on the
 * same door, for the case where motion is turned on and then off again with
 * the button already on the page.
 */
@media (prefers-reduced-motion: reduce) {
  .intro-replay { display: none; }
}