@layer utilities {
  .highlight {
    animation: highlight var(--dur-highlight) var(--ease-calm);
  }

  .entrance {
    animation: entrance var(--dur-slow) var(--ease-spring-soft);
  }

  @keyframes highlight {
    from {
      background-color: var(--color-highlight);
    }
  }

  @keyframes entrance {
    from {
      opacity: var(--opacity-none);
      translate: var(--space-0) var(--entrance-offset);
    }
  }

  @keyframes speaking-ring {
    0% {
      box-shadow: var(--speaking-ring), var(--speaking-ring-start);
    }

    50% {
      box-shadow: var(--speaking-ring-faded), var(--speaking-ring);
    }

    100% {
      box-shadow: var(--speaking-ring-faded), var(--speaking-ring-faded);
    }
  }
}