/* Both the resting ink and the moving brush use the original portrait as a mask. */
.hero > .fade { position: relative; z-index: 1; }
.hero:before { opacity: 0; transition: opacity .35s ease; }
.hero-line-art {
  position: absolute;
  z-index: 0;
  right: -32px;
  top: 50%;
  display: block;
  width: var(--lab-hero-size, min(80vw, 980px));
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(50%, calc(-50% + var(--lab-hero-shift, 0px)));
  -webkit-mask: url("/assets/diego-line-art-v1.png") center/contain no-repeat;
  mask: url("/assets/diego-line-art-v1.png") center/contain no-repeat;
}
.hero-line-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lab-hero-art-color, var(--blue));
  opacity: var(--lab-hero-opacity, .07);
}
.hero-ink { display: none; }
@media (max-width: 620px) {
  .hero-line-art {
    right: -14px;
    top: 46%;
    width: min(142vw, 820px);
    transform: translate(58%, calc(-50% + var(--lab-hero-shift, 0px)));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-line-art.is-tracing .hero-ink {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #8199ff;
    stroke-width: 11;
    stroke-linecap: round;
  }
  .hero-ink path {
    opacity: 0;
    stroke-dasharray: .35 2;
    animation: portrait-ink-pass 1650ms cubic-bezier(.32, .05, .32, 1) both;
  }
  .hero-ink path + path { animation-delay: 350ms; }
  @keyframes portrait-ink-pass {
    0% { opacity: 0; stroke-dashoffset: .36; }
    18%, 67% { opacity: .52; }
    100% { opacity: 0; stroke-dashoffset: -1.02; }
  }
}
/* The optional design lab supplies its own unanimated art layer. */
html[data-design-lab="true"] .hero-line-art::before,
html[data-design-lab="true"] .hero-line-art .hero-ink { display: none; }