Почему это наведение не запускает текстовую анимацию?

Попытка добавить наведение в программу CMS, которая разрешает только внутренний css. Обратите внимание, что несмотря на отсутствие тега head, CMS распознает теги и автоматически размещает их в файле .

Я пытался экспортировать в формате html, чтобы решить эту проблему, но пока безуспешно. Попытался использовать иерархию, поместив состояние покоя как H1 и состояние наведения как класс div и как идентификатор. Это должно использоваться через EKTRON CMS с html5 без доступа к js.

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h1 {
  margin: 0;
  padding: 0;
}

h1 span {
  display: inline-flex;
  color: #1C7CB3;
}

h1 span:nth-child(even) {
  overflow: hidden;
  transition: ease 0.5s;
  color: purple;
  letter-spacing: -1em;
}

h1:hover span:nth-last-child(even) {
  letter-spacing: 0;
}

<h1>
  <span>F</span><span>lorida</span>
  <span>I</span><span>nstitute</span>
  <span></span><span>of</span>
  <span>E</span><span>ducation</span>
</h1>

Я ожидал, что текст будет анимирован, но текст остается статичным.