echoes/frontend/styles/echoes.css

.animated-text {
    max-width: 100%;
    height: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .animated-text path {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 2;
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
    animation: logo-anim 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: center;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation-play-state: running !important;
    will-change: transform;
  }
  
  @keyframes logo-anim {
    0% {
      stroke-dashoffset: var(--path-length);
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
      opacity: 0;
    }
  
    5% {
      opacity: 1;
      stroke-dashoffset: var(--path-length);
      stroke-dasharray: var(--path-length) var(--path-length);
    }
  
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
    }
  
    60%, 75% {
      stroke-dashoffset: 0;
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: currentColor;
      opacity: 1;
    }
  
    85% {
      stroke-dashoffset: 0;
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
      opacity: 1;
    }
  
    95% {
      stroke-dashoffset: var(--path-length);
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
      opacity: 1;
    }
  
    100% {
      stroke-dashoffset: var(--path-length);
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
      opacity: 0;
    }
  }
  
  @media (prefers-color-scheme: dark) {
    .animated-text path {
      stroke: currentColor;
    }
  }
  
  @media (hover: none) and (pointer: coarse) {
    .animated-text {
      touch-action: manipulation;
      cursor: pointer;
    }
  }