/* Optional motion layer. Content is visible unless the early boot opts in. */
.entry-splash {
  display: none;
}

.is-entering .entry-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--paper, #faf9f5);
  color: var(--ink, #20201e);
  opacity: 1;
  touch-action: pan-y;
  transition: opacity 260ms ease;
}

.entry-wordmark {
  display: flex;
  align-items: baseline;
  gap: .015em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(56px, 8vw, 88px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  user-select: none;
}

.is-entering .entry-wordmark > span {
  --entry-offset: 0em;
  display: block;
  animation: fai-letter-open 720ms cubic-bezier(.22, 1, .36, 1) both;
}

.is-entering .entry-wordmark > span:first-child {
  --entry-offset: -.19em;
}

.is-entering .entry-wordmark > span:nth-child(2) {
  animation-delay: 45ms;
}

.is-entering .entry-wordmark > span:last-child {
  --entry-offset: .19em;
  animation-delay: 90ms;
}

.is-entering .intro-copy,
.is-entering .intro-figure {
  opacity: 0;
}

.is-entering.is-entry-leaving .entry-splash {
  opacity: 0;
  pointer-events: none;
}

.entry-content-revealed .intro-copy,
.entry-content-revealed .intro-figure {
  animation: fai-content-in 620ms cubic-bezier(.22, 1, .36, 1) both;
}

.entry-content-revealed .intro-figure {
  animation-delay: 70ms;
}

.motion-pending {
  opacity: 0;
  transform: translateY(14px);
}

.motion-revealed {
  animation: fai-content-in 620ms cubic-bezier(.22, 1, .36, 1) both;
}

.community-cta {
  transition: background-color 180ms ease, transform 180ms ease;
}

.community-cta .cta-arrow {
  transition: transform 180ms ease;
}

.community-cta:active {
  transform: scale(.98);
}

@media (hover: hover) {
  .community-cta:hover .cta-arrow {
    transform: translate(1px, -1px);
  }
}

@keyframes fai-letter-open {
  from {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
  }
  24% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(var(--entry-offset), 0, 0);
  }
}

@keyframes fai-content-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-entering .entry-splash {
    display: none;
  }

  .is-entering .intro-copy,
  .is-entering .intro-figure,
  .motion-pending {
    opacity: 1;
    transform: none;
  }

  .entry-wordmark > span,
  .entry-content-revealed .intro-copy,
  .entry-content-revealed .intro-figure,
  .motion-revealed {
    animation: none !important;
  }

  .community-cta,
  .community-cta .cta-arrow {
    transform: none !important;
    transition: none !important;
  }
}
