/*
 * Glyph art, shared by the landing page and the sign-in page: art.js redraws a picture in the characters of a
 * price tag inside its box (the box is sized by the page) and pins amber notes to it.
 */
/* the glyph art: art.js redraws the picture in the characters of a price tag and pins notes to it */
.art {
  position: absolute;
  inset: 0;
}

.art-source,
.art-canvas,
.art-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.art-source,
.art-fallback {
  object-fit: contain;
  object-position: center bottom;
}

.art-source {
  visibility: hidden;
}

.art-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.art-lines line {
  stroke: var(--amber);
  stroke-width: 1;
  opacity: 0;
}

.art-pin {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--black);
  background: var(--amber);
  translate: -50% -50%;
  opacity: 0;
}

.art-note {
  position: absolute;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--amber);
  color: var(--amber-ink);
  font: 500 13px / 1.2 var(--mono);
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* once the art has decoded, the lines draw from the figure and the notes land one after the other */
.art.is-noted .art-lines line,
.art.is-noted .art-pin,
.art.is-noted .art-note {
  opacity: 1;
  transition:
    opacity 300ms var(--ease),
    translate 400ms var(--ease);
}

/* art.js staggers each line, pin and note with --delay */
.art.is-noted .art-lines line,
.art.is-noted .art-pin {
  transition-delay: var(--delay, 0ms);
}

.art.is-noted .art-note {
  transition-delay: calc(var(--delay, 0ms) + 300ms);
}

@media (prefers-reduced-motion: reduce) {
  .art.is-noted .art-lines line,
  .art.is-noted .art-pin,
  .art.is-noted .art-note {
    transition: none;
  }
}

@media (max-width: 640px) {
  .art-note {
    padding: 4px 8px;
    font-size: 11px;
  }
}