/* The name "ARC SENSE", wherever it appears in the portal: the same violet-to-mint flow as the main buttons (portal-buttons.css), running through the letters.
   sense-name.js wraps each "ARC SENSE" it finds in <span class="arc-sense-word">; this file only styles that span. To retune: the three colours and the 240px in the gradient and
   the keyframes (the period of the loop: change both together so it stays seamless), and the 6s (speed).
   COST: a few small word-sized areas repaint while it flows. Reduced motion holds it still (the colour stays). */
.arc-sense-word {
  color: #3EE6B0;                      /* where background-clip: text is missing, the word is simply mint */
  font-weight: inherit;
  white-space: nowrap;                 /* the name never splits over two lines */
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .arc-sense-word {
    background-image: repeating-linear-gradient(100deg, #9A5CFF 0px, #3EE6B0 120px, #9A5CFF 240px);
    background-size: 240px 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: arc-sense-flow 6s linear infinite;
  }
}
@keyframes arc-sense-flow {
  from { background-position: 0 0; }
  to { background-position: 240px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-sense-word { animation: none; }
}
