.web-heading-effect { perspective: 720px; }

.web-ai-page h2.web-heading-effect--fixed-lines {
  white-space: nowrap;
}

.web-ai-page .web-ai-hero h1 .web-heading-effect__char {
  display: inline-block;
  margin-top: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.web-heading-effect.is-prepared .web-heading-effect__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.3em) rotateX(-90deg);
  transform-origin: 50% 100%;
}

.web-heading-effect.is-visible .web-heading-effect__char {
  animation: web-heading-char-in 1800ms cubic-bezier(.22, .75, .28, 1) both;
  animation-delay: calc(var(--char-index) * 220ms);
}

.web-ai-page .web-ai-main h2.web-heading-effect.is-visible .web-heading-effect__char {
  animation-duration: 900ms;
  animation-delay: calc(var(--char-index) * 110ms);
}

@keyframes web-heading-char-in {
  from { opacity: 0; transform: translateY(1.3em) rotateX(-90deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

.web-heading-effect.is-prepared > span:not(.web-heading-effect__char) {
  opacity: 0;
  transform: translateY(.65em) rotateX(-18deg);
  transform-origin: 50% 100%;
}

.web-heading-effect.is-visible > span:not(.web-heading-effect__char) {
  animation: web-heading-subtitle-in 900ms cubic-bezier(.22, .75, .28, 1) 700ms both;
}

@keyframes web-heading-subtitle-in {
  from { opacity: 0; transform: translateY(.65em) rotateX(-18deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .web-heading-effect.is-prepared .web-heading-effect__char,
  .web-heading-effect.is-prepared > span:not(.web-heading-effect__char) {
    opacity: 1;
    transform: none;
    animation: none;
  }
}