/* Original motion direction: the existing type, one paper curtain, native scrolling. */
.motion-line {
  display: block;
  overflow: clip;
  padding: .1em .035em .2em;
  margin: -.1em -.035em -.2em;
}
.motion-line-inner {
  display: block;
  transform-origin: 0 100%;
}
[data-motion='entry'] .motion-line-inner {
  animation: type-arrive 1700ms cubic-bezier(.22,.75,.25,1) both;
}
[data-motion='entry'] .motion-line:nth-child(2) .motion-line-inner {
  animation-delay: 220ms;
}
[data-motion='entry'] .motion-line:nth-child(n+3) .motion-line-inner {
  animation-delay: 340ms;
}
[data-motion='reveal'].is-revealed .motion-line-inner {
  animation: type-arrive 1350ms cubic-bezier(.22,.75,.25,1) both;
}
[data-motion='reveal'].is-revealed .motion-line:nth-child(2) .motion-line-inner {
  animation-delay: 180ms;
}
.hero-facts, .seo-hero .seo-meta {
  animation: details-arrive 1150ms 300ms cubic-bezier(.22,.75,.25,1) both;
}
.motion-arrival-pending [data-motion='entry'] .motion-line-inner,
.motion-arrival-pending .hero-facts,
.motion-arrival-pending .seo-hero .seo-meta {
  animation-play-state: paused;
}
@keyframes type-arrive {
  from { transform: translate3d(0,112%,0) rotate(1.5deg); opacity: .25; }
  to { transform: translate3d(0,0,0) rotate(0); opacity: 1; }
}
@keyframes details-arrive {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Every word stays in the original reading order and uses natural line wrapping. */
.reading-active .reading-word {
  color: var(--muted);
  transition: color 320ms ease-out;
}
.reading-active .reading-word.is-read { color: var(--paper); }

/* The curtain is decorative. It never replaces the document or its native links. */
.page-transition {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  color: var(--bg);
  transform: translateY(102%);
  visibility: hidden;
  pointer-events: none;
  contain: paint;
}
.page-transition-copy {
  width: 100%;
  max-width: 1664px;
  padding: 48px var(--gutter);
}
.page-transition-signature {
  display: block;
  margin-bottom: 36px;
  font-size: .875rem;
  line-height: 1.5;
}
[data-transition-title] {
  max-width: 1300px;
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-synthesis: none;
  font-size: clamp(3rem,8.8vw,9rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.page-transition-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .25;
  margin-top: 48px;
  transform-origin: left center;
}
.page-transition.is-leaving {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 800ms cubic-bezier(.65,0,.25,1);
}
.page-transition.is-leaving .page-transition-copy {
  animation: curtain-type-arrive 900ms cubic-bezier(.22,.75,.25,1) both;
}
.page-transition.is-leaving .page-transition-rule {
  animation: curtain-rule-arrive 1000ms cubic-bezier(.22,.75,.25,1) both;
}
.page-transition.is-arriving {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.page-transition.is-arriving.is-uncovering {
  transform: translateY(-102%);
  transition: transform 900ms cubic-bezier(.65,0,.25,1);
}
@keyframes curtain-type-arrive {
  from { transform: translateY(36px); }
  to { transform: translateY(0); }
}
@keyframes curtain-rule-arrive {
  from { transform: scaleX(.25); }
  to { transform: scaleX(1); }
}
@media (max-width: 700px) {
  [data-motion='entry'] .motion-line-inner { animation-duration: 1500ms; }
  [data-motion='reveal'].is-revealed .motion-line-inner { animation-duration: 1200ms; }
  .page-transition-copy { padding-block: 32px; }
  .page-transition-signature { margin-bottom: 28px; }
  .page-transition-rule { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion] .motion-line-inner, .hero-facts, .seo-hero .seo-meta {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .reading-active .reading-word { color: inherit; transition: none; }
  .page-transition, .page-transition.is-leaving, .page-transition.is-arriving {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(102%) !important;
    transition: none !important;
  }
}