/* your @font-face (paths as you fixed them) */
@font-face{
  font-family: 'Cyber Angel';
  src:
    url('Cyber Angel.otf') format('opentype'),
    url('Cyber Angel.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* glow + layout variables */
:root{
  --r: 50px;       /* glow radius */
  --o: 25px;       /* glow offset */
  --d: 2s;         /* animation duration */
  --letters: 9;    /* number of spans */
  --bg: #111;
  --c1: cyan;      /* cycle colors */
  --c2: yellow;
  --c3: tomato;
  --safe: calc(var(--r) + var(--o)); /* padding so glow isn't cut */
}

body{
  margin: 0;
  padding-inline: var(--safe);
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--bg);
  color: snow;
  font: 15vw/1 'Cyber Angel', system-ui, sans-serif;
}

.word{ z-index: 10; white-space: nowrap; font-size: clamp(28px, calc((100vw - 2*var(--safe))/var(--letters) * .95), 15vw); }

/* baseline glow so you see it even if animation fails */
span{
  display: inline-block;
  text-shadow:
    0 0 calc(var(--r)/6) snow,
    0 calc(-1 * var(--o)) var(--r) var(--c3),
    calc(-1 * var(--o)) var(--o) var(--r) var(--c2),
    var(--o) var(--o) var(--r) var(--c3);
  animation: glow var(--d) ease-in-out both infinite;
}

/* staggered delays for 9 letters */
span:nth-child(1){ animation-delay: calc(1/9 * -1 * var(--d)); }
span:nth-child(2){ animation-delay: calc(2/9 * -1 * var(--d)); }
span:nth-child(3){ animation-delay: calc(3/9 * -1 * var(--d)); }
span:nth-child(4){ animation-delay: calc(4/9 * -1 * var(--d)); }
span:nth-child(5){ animation-delay: calc(5/9 * -1 * var(--d)); }
span:nth-child(6){ animation-delay: calc(6/9 * -1 * var(--d)); }
span:nth-child(7){ animation-delay: calc(7/9 * -1 * var(--d)); }
span:nth-child(8){ animation-delay: calc(8/9 * -1 * var(--d)); }
span:nth-child(9){ animation-delay: calc(9/9 * -1 * var(--d)); }

@keyframes glow{
  0%,100%{
    text-shadow:
      0 0 calc(var(--r)/6) snow,
      0 calc(-1 * var(--o)) var(--r) var(--c3),
      calc(-1 * var(--o)) var(--o) var(--r) var(--c2),
      var(--o) var(--o) var(--r) var(--c3);
  }
  33%{
    text-shadow:
      0 0 calc(var(--r)/6) snow,
      0 calc(-1 * var(--o)) var(--r) var(--c1),
      calc(-1 * var(--o)) var(--o) var(--r) var(--c3),
      var(--o) var(--o) var(--r) var(--c1);
  }
  66%{
    text-shadow:
      0 0 calc(var(--r)/6) snow,
      0 calc(-1 * var(--o)) var(--r) var(--c2),
      calc(-1 * var(--o)) var(--o) var(--r) var(--c1),
      var(--o) var(--o) var(--r) var(--c2);
  }
}