/* SPDX-License-Identifier: LicenseRef-VINCIS-ARR
 *
 * The signed-out headline's motion. Geometry, size and colour stay with each
 * page — only the per-character animation is shared, and it is declared once
 * so the marketing page and the sign-in page cannot animate differently.
 */

.vincis-headline > .ln {
  display: block;
}

.vincis-headline .ch {
  display: inline-block;
  transition:
    opacity 0.55s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.55s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    filter 0.55s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: var(--cd, 0ms);
  will-change: transform, opacity, filter;
}

.vincis-headline .ch.out {
  opacity: 0;
  transform: translateY(-0.32em);
  filter: blur(6px);
}

.vincis-headline .ch.pre {
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(7px);
  transition: none;
}

/* The hook does not animate under reduced motion; this is the belt to that
 * brace, so a character can never be left mid-transition. */
@media (prefers-reduced-motion: reduce) {
  .vincis-headline .ch {
    transition: none;
    will-change: auto;
  }
}