/* Inline marks for the big scroll-lit sentences on the EN home (hellos story and
   games / tasks / Superboxes): small icons or faces before a word, and coloured
   underlines that draw in as the words light up (JS sets --p from 0 to 1). */
.pu-ink .pu-ic::before {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin: 0 .2em 0 .02em;
  vertical-align: -.1em;
  background: center / contain no-repeat;
}

.pu-ink .pu-ic-hand::before { background-image: url(/images/home/social/hello.svg?v=1); }
.pu-ink .pu-ic-tg::before { background-image: url(/images/home/ic-telegram.svg?v=1); }
.pu-ink .pu-ic-games::before { background-image: url(/images/home/ic-games.svg?v=1); }
.pu-ink .pu-ic-tasks::before { background-image: url(/images/home/ic-tasks.svg?v=1); }
.pu-ink .pu-ic-gift::before { background-image: url(/images/home/hero-ic-gift.png); }
.pu-ink .pu-ic-token::before { background-image: url(/updates/img/coin-purple.webp?v=1); }
.pu-ink .pu-ic-chat::before { background-image: url(/images/home/social/chat.svg?v=1); }
.pu-ink .pu-ic-photo::before { background-image: url(/images/home/social/photo.svg?v=1); }
.pu-ink .pu-ic-aura::before { background-image: url(/images/home/social/aura.svg?v=4); }
.pu-ink .pu-ic-instant::before { background-image: url(/images/home/ic-instant.svg?v=1); }

.pu-ink .pu-ic-face::before {
  width: .95em;
  height: .95em;
  vertical-align: -.14em;
  border-radius: 50%;
  background-size: cover;
}

.pu-ink .pu-ic-alicia::before { background-image: url(/images/home/faces/alicia.webp?v=2); }
.pu-ink .pu-ic-daniel::before { background-image: url(/images/home/faces/daniel.webp?v=2); }

.pu-ink .pu-u {
  --p: 1;
  --u: #8d4bef;
  padding-bottom: .04em;
  background: linear-gradient(var(--u), var(--u)) 0 100% / calc(var(--p) * 100%) .09em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.pu-ink .pu-u--hello { --u: #8d4bef; }
.pu-ink .pu-u--talk { --u: #34c759; }
.pu-ink .pu-u--tg { --u: #2aabee; }
.pu-ink .pu-u--games { --u: #3e7bfa; }
.pu-ink .pu-u--tasks { --u: #ff9500; }
.pu-ink .pu-u--gift { --u: #e0a400; }

@media (prefers-reduced-motion: reduce) {
  .pu-ink .pu-u { --p: 1; }
}
.pu-ink .pu-u--gold { --u: #ffb21e; }