/* ------------------------------------------------------------
   INK.CSS — brush behaviour for the hinodo brand
   ------------------------------------------------------------
   Right now: the wordmark writes itself on load. Each letter is
   uncovered by a soft diagonal mask that travels across it, so the
   edge stays wet instead of snapping on like a wipe.

   Markup: every letter of the wordmark is its own span.

     <span class="logo-word ink-write">
       <span>h</span><span>i</span> ...
     </span>
   ------------------------------------------------------------ */

.ink-write > span {
  display: inline-block;
  /* A 300%-wide mask means only a third of it covers the letter at a
     time, which is what gives the stroke a leading and trailing edge. */
  -webkit-mask-image: linear-gradient(104deg,
    #000 0 28%,
    rgba(0, 0, 0, 0.72) 36%,
    rgba(0, 0, 0, 0.18) 46%,
    transparent 56%);
          mask-image: linear-gradient(104deg,
    #000 0 28%,
    rgba(0, 0, 0, 0.72) 36%,
    rgba(0, 0, 0, 0.18) 46%,
    transparent 56%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  animation: ink-write 620ms cubic-bezier(0.33, 0.7, 0.3, 1) both;
}

/* Letters land left to right, overlapping, the way a hand writes. */
.ink-write > span:nth-child(1) { animation-delay: 60ms; }
.ink-write > span:nth-child(2) { animation-delay: 150ms; }
.ink-write > span:nth-child(3) { animation-delay: 240ms; }
.ink-write > span:nth-child(4) { animation-delay: 330ms; }
.ink-write > span:nth-child(5) { animation-delay: 420ms; }
.ink-write > span:nth-child(6) { animation-delay: 510ms; }

@keyframes ink-write {
  from {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    /* Fresh ink sits heavy and spreads before it dries. */
    filter: blur(1.4px);
    opacity: 0.55;
  }
  60% {
    filter: blur(0.5px);
    opacity: 1;
  }
  to {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    filter: blur(0);
    opacity: 1;
  }
}

/* A letter mid-animation must not shift the layout, and a space between
   words would collapse inside an inline-block. */
.ink-write { white-space: pre; }

@media (prefers-reduced-motion: reduce) {
  .ink-write > span {
    animation: none;
    -webkit-mask-image: none;
            mask-image: none;
    filter: none;
    opacity: 1;
  }
}