/* Footer wordmark (sections/footer.js): the word is built from inherited mess in small mono type; sweeping over it
   rebuilds it as clean, solid letterform. It runs off the bottom of the page. Without JS the plain word stays. */

.bigmark[data-mess] canvas, .bigmark[data-mess] .tittle { display: none; }

.bigmark[data-mess].ready { position: relative; padding: 0; line-height: 0; }
.bigmark[data-mess].ready span { visibility: hidden; position: absolute; }
.bigmark[data-mess].ready canvas { display: block; width: 100%; height: 100%; }

/* the dot on the i: the hero's coral part, running */
.bigmark[data-mess].ready .tittle {
  display: block; position: absolute; left: 0; top: 0; border-radius: 50%; background: #ff5a3c;
  box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.35);
}
.live .bigmark[data-mess].ready .tittle { animation: tittle-run 3.2s ease-in-out infinite; }
@keyframes tittle-run {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.0); }
  50% { box-shadow: 0 0 0 calc(var(--r, 20px) * 0.35) rgba(255, 90, 60, 0.16); }
}