html.intro-pending,
html.intro-pending body {
  overflow: hidden;
}

.brand-intro {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 76% 18%, rgba(117, 87, 255, 0.1), transparent 27%),
    radial-gradient(circle at 20% 86%, rgba(255, 255, 255, 0.74), transparent 34%),
    var(--pearl, #eeeae4);
  opacity: 1;
  transition:
    opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 650ms;
}

html.intro-finished .brand-intro {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.brand-intro__copy {
  position: relative;
  width: min(1100px, calc(100% - 40px));
  min-height: clamp(120px, 17vw, 200px);
}

.brand-intro__phrase {
  position: absolute;
  inset: 0;
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.22em;
  color: var(--ink, #09090b);
  font-size: clamp(44px, 8vw, 112px);
  font-weight: 620;
  line-height: 0.95;
  letter-spacing: -0.065em;
  text-align: center;
}

.brand-intro__phrase span,
.brand-intro__phrase em {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform;
}

.brand-intro__phrase > :nth-child(3) {
  flex-basis: 100%;
  text-align: center;
}

.brand-intro__phrase em {
  color: var(--violet, #7557ff);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.brand-intro__phrase--first span {
  animation: intro-first-word 1575ms cubic-bezier(0.22, 1, 0.36, 1)
    calc(165ms + var(--word) * 135ms) both;
}

.brand-intro__phrase--second span,
.brand-intro__phrase--second em {
  animation: intro-second-word 1680ms cubic-bezier(0.22, 1, 0.36, 1)
    calc(1695ms + var(--word) * 135ms) both;
}

.brand-intro__progress {
  position: absolute;
  bottom: clamp(30px, 6vh, 58px);
  left: 50%;
  width: min(160px, 34vw);
  height: 1px;
  overflow: hidden;
  transform: translateX(-50%);
  background: rgba(9, 9, 11, 0.13);
}

.brand-intro__progress::after {
  position: absolute;
  inset: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  background: var(--violet, #7557ff);
  animation: intro-progress 3375ms cubic-bezier(0.65, 0, 0.35, 1) 120ms forwards;
}

html.intro-pending main {
  opacity: 0.88;
  transform: scale(1.006);
}

main {
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes intro-first-word {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  38%,
  68% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-9px);
  }
}

@keyframes intro-second-word {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  40%,
  75% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-9px);
  }
}

@keyframes intro-progress {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-intro {
    display: none;
  }

  main {
    transition: none;
  }
}