.morse {
  position: relative;
  display: inline-block;
  cursor: default;
  outline: none;
  --decode-step: 70ms;
}

.morse__code,
.morse__decoded {
  display: block;
}

.morse--enhanced .morse__code {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  opacity: 0.9;
}

.morse--enhanced .morse__decoded {
  display: none;
}

.morse__unit {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.morse__unit--gap {
  width: 1.1em;
}

.morse__token,
.morse__letter {
  grid-area: 1 / 1;
}

.morse__signal,
.morse__letter {
  display: inline-block;
  will-change: opacity, filter, transform;
}

.morse__signal {
  opacity: 0.9;
  filter: none;
}

.morse__token {
  white-space: nowrap;
}

.morse__letter {
  opacity: 0;
  filter: none;
  transform: translateY(0.08em);
  letter-spacing: 0;
}

.morse.is-decoding .morse__letter,
.morse:focus-visible .morse__letter {
  animation: decode-flicker-in 360ms steps(2, end) both;
  animation-delay: calc(var(--letter-index, 0) * var(--decode-step));
}

.morse.is-clearing .morse__letter {
  animation: decode-flicker-out 280ms steps(2, end) both;
  animation-delay: calc(var(--letter-index, 0) * 34ms);
}

@keyframes decode-flicker-in {
  0% {
    opacity: 0;
    filter: none;
    transform: translateY(0.16em);
  }

  35% {
    opacity: 0.3;
    transform: translateY(0.08em);
  }

  55% {
    opacity: 0.08;
    transform: translateY(0.04em);
  }

  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@keyframes decode-flicker-out {
  0% {
    opacity: 0.9;
    filter: none;
    transform: translateY(0);
  }

  45% {
    opacity: 0.18;
  }

  65% {
    opacity: 0.56;
  }

  100% {
    opacity: 0;
    transform: translateY(0.12em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .morse__signal,
  .morse__token,
  .morse.is-decoding .morse__letter,
  .morse.is-clearing .morse__letter {
    animation: none;
  }

  .morse__signal {
    opacity: 0.72;
    filter: none;
  }

  .morse__letter {
    opacity: 0;
    filter: none;
    transform: none;
  }

  .morse.is-active .morse__letter,
  .morse:focus-visible .morse__letter {
    opacity: 0.9;
  }
}