/* Separate assets keep the complete symbol fixed while the letters enter. */
.brand-artwork > .brand-reveal {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.brand-reveal .brand-reveal-mask,
.brand-reveal img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.brand-reveal .brand-reveal-mask {
  z-index: 1;
  /* Reveal at the optical centre of the enlarged symbol. */
  clip-path: inset(0 0 0 29%);
}
.brand-reveal .brand-reveal-wordmark {
  clip-path: none;
  transform: translate3d(-100%, 0, 0);
}
.brand-reveal .brand-reveal-plus {
  z-index: 2;
  clip-path: none;
  transform: none;
}
html[data-brand-intro] .brand-artwork > .brand-lockup { visibility: hidden; }
html[data-brand-intro] .brand-artwork > .brand-reveal { display: block; }
html[data-brand-intro='running'] .brand-reveal-wordmark { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  html[data-brand-intro] .brand-artwork > .brand-lockup { visibility: visible; }
  html[data-brand-intro] .brand-artwork > .brand-reveal { display: none; }
}