/* The words retain their original line box and typography. Without the script,
   none of these selectors applies and every heading is immediately readable. */
.type-prepared .type-mask {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  clip-path: inset(-.18em -.12em -.24em -.12em);
}
.type-prepared .type-face {
  display: inline-block;
  transform: translate3d(0, 1.35em, 0) rotate(1.2deg);
  transform-origin: 0 100%;
}
/* An archived outline treatment targets direct spans in this heading. The
   generated masks must retain the approved solid ink of the current design. */
.intro-copy h1 > .type-mask {
  color: inherit;
  -webkit-text-stroke: 0;
  letter-spacing: inherit;
}
.type-prepared.type-arrived .type-face {
  animation: type-find-baseline 1050ms cubic-bezier(.16,.78,.18,1) both;
  animation-delay: calc(var(--type-index, 0) * 65ms);
}

/* Before a real scene is painted the opening is already readable. Its two
   baselines become a counter-movement only after the renderer is staged. */
body[data-page="home"] [data-type-motion="opening"] .type-face {
  transform: none;
  transform-origin: 0 65%;
  opacity: 1;
  animation: none;
}
body[data-page="home"] [data-type-motion="opening"] .type-mask {
  clip-path: inset(-.22em -.14em -.27em -.14em);
}
body[data-page="home"] [data-type-motion="opening"].type-settled .type-mask { clip-path: none; }
.opening-staged body[data-page="home"] [data-type-motion="opening"].type-arrived:not(.type-settled) .type-face {
  animation: opening-upright 1850ms cubic-bezier(.18,.72,.2,1) both;
  animation-delay: calc(var(--type-index, 0) * 80ms);
}
.opening-staged body[data-page="home"] [data-type-motion="opening"].type-arrived:not(.type-settled) em .type-face {
  transform-origin: 48% 70%;
  animation-name: opening-italic;
  animation-duration: 2050ms;
  animation-delay: 150ms;
}

/* A verb becomes a gesture: its whole mass settles horizontally as it emerges. */
[data-type-motion="passage"] .type-face {
  transform: translate3d(-.1em, 1.35em, 0) rotate(-1.5deg);
  transform-origin: 0 100%;
}
[data-type-motion="passage"].type-arrived .type-face {
  animation-name: type-enter-passage;
  animation-duration: 1250ms;
  animation-delay: calc(var(--type-index, 0) * 85ms);
}
[data-type-motion="editorial"].type-arrived .type-face {
  animation-duration: 1000ms;
  animation-delay: calc(var(--type-index, 0) * 55ms);
}
.type-prepared.type-settled .type-mask { clip-path: none; }
.type-prepared.type-settled .type-face { animation: none; transform: none; }

@keyframes type-find-baseline {
  from { transform: translate3d(0, 1.35em, 0) rotate(1.2deg); }
  to { transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes opening-upright {
  0% { transform: translate3d(-.68em, .13em, 0) skewX(-7deg) rotate(-.8deg); letter-spacing: -.095em; opacity: .35; }
  36% { transform: translate3d(-.055em, .012em, 0) skewX(-2deg) rotate(-.2deg); letter-spacing: -.047em; opacity: 1; }
  72% { transform: translate3d(.008em, -.004em, 0) skewX(.3deg); letter-spacing: -.028em; opacity: 1; }
  100% { transform: none; letter-spacing: -.03em; opacity: 1; }
}
@keyframes opening-italic {
  0% { transform: translate3d(.9em, .08em, 0) skewX(4deg) rotate(2.7deg); letter-spacing: -.075em; opacity: .45; }
  33% { transform: translate3d(.055em, .018em, 0) skewX(1.1deg) rotate(.5deg); letter-spacing: -.042em; opacity: 1; }
  76% { transform: translate3d(-.007em, -.004em, 0) rotate(-.12deg); letter-spacing: -.03em; opacity: 1; }
  100% { transform: none; letter-spacing: -.03em; opacity: 1; }
}
@keyframes type-enter-passage {
  from { transform: translate3d(-.1em, 1.35em, 0) rotate(-1.5deg); }
  to { transform: translate3d(0, 0, 0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .type-prepared .type-mask { clip-path: none; }
  .type-prepared .type-face,
  .type-prepared.type-arrived .type-face {
    animation: none;
    transform: none;
  }
  .opening-staged body[data-page="home"] [data-type-motion="opening"].type-arrived .type-face { animation: none; transform: none; opacity: 1; }
}