/* Reveal each complete, shaped Arabic line. Glyphs are never split apart. */
#hero-title .headline-line-primary {
  font-size: 1em;
  line-height: inherit;
}
#hero-title .headline-run,
#hero-title .headline-ink {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
#hero-title .headline-run {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
#hero-title .headline-ink {
  display: block;
  white-space: nowrap;
}
.headline-pen {
  display: none;
  position: absolute;
  pointer-events: none;
}

/* Without JavaScript, or without gradient-mask support, the title is visible. */
.handwriting-ready #hero-title .headline-ink {
  --ink-feather: 2.6%;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 calc(var(--ink-progress, 0%) - var(--ink-feather)), transparent var(--ink-progress, 0%), transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 calc(var(--ink-progress, 0%) - var(--ink-feather)), transparent var(--ink-progress, 0%), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.handwriting-ready #hero-title .headline-line.is-written .headline-ink {
  -webkit-mask-image: none;
  mask-image: none;
}
.handwriting-ready #hero-title .headline-pen {
  display: block;
  left: calc(100% - var(--ink-progress, 0%));
  top: var(--pen-y, .82em);
  width: .09em;
  height: .1em;
  margin-left: -.045em;
  border-radius: 70% 40%;
  background: #f8e1b7;
  box-shadow: 0 0 .13em #f1c781b3, .08em .01em .16em #dab16d50;
  filter: blur(.018em);
  transform: rotate(-22deg);
  opacity: var(--pen-opacity, 0);
}
.handwriting-ready #hero-title .headline-pen::after {
  content: '';
  position: absolute;
  right: -.03em;
  top: .02em;
  width: .24em;
  height: .025em;
  border-radius: 50%;
  background: linear-gradient(to right, #eed5a985, transparent);
  filter: blur(.025em);
}
.js.handwriting-ready:not(.entered) #hero-title .headline-ink {
  -webkit-mask-image: linear-gradient(transparent, transparent);
  mask-image: linear-gradient(transparent, transparent);
}
.js:not(.entered) #hero-title .headline-pen { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .handwriting-ready #hero-title .headline-ink {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .headline-pen { display: none !important; }
}