/* The intro curtain exists only when intro-gate.js chose to play it. Without
   JavaScript, with reduced motion or on a deep link, it is never displayed. */
.intro {
  display: none;
}
.intro-lock {
  overflow: hidden;
  scrollbar-gutter: stable;
}
.intro-on .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
  cursor: progress;
  /* Last resort if intro.js never runs: hide the curtain on its own. */
  animation: intro-failsafe 0s 7.2s forwards;
}
.intro.is-leaving {
  pointer-events: none;
}
@keyframes intro-failsafe {
  to {
    visibility: hidden;
  }
}

.intro-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.intro-trail path {
  fill: none;
  stroke: var(--green);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0;
  stroke-dasharray: 0 100000;
}
.intro-trail {
  filter: drop-shadow(0 0 14px #5ae66166);
}
.intro-trail circle {
  fill: none;
  stroke: var(--solar);
  stroke-width: 0;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.intro-lockup {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
}
.intro-brand {
  display: flex;
  align-items: center;
  font-size: clamp(56px, 9.2vw, 128px);
  font-weight: 750;
  letter-spacing: -0.07em;
  line-height: 1;
}
.intro-mark {
  width: 1.08em;
  height: 1.08em;
  margin-right: 0.16em;
  filter: drop-shadow(0 0.12em 0.14em #0a111c55);
  transform: scale(0);
}
.intro-word {
  display: flex;
  align-items: baseline;
  padding-right: 0.07em;
}
.intro-word > span {
  display: inline-block;
  transform: scale(0);
  transform-origin: 50% 70%;
}
.intro-word > .intro-dot {
  color: var(--green);
  transform-origin: 50% 100%;
}
.intro-motto {
  display: block;
  overflow: clip;
  margin-top: clamp(18px, 2.2vw, 30px);
  padding-bottom: 0.15em;
  color: #c8d0db;
  font-size: clamp(15px, 1.45vw, 19px);
  font-weight: 550;
  letter-spacing: 0.005em;
}
.intro-motto > span {
  display: block;
  transform: translateY(115%);
}

/* The page's own chrome waits behind the curtain, then drops in with it. The
   call to action stays hidden until the collapsing curtain lands on it. */
.intro-lock .nav > *,
.intro-cta-pending .nav > .button {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .intro-entrance .nav > :not(.button) {
    animation: intro-nav-in 900ms var(--motion-out) backwards;
  }
  .intro-entrance .nav > :nth-child(2) {
    animation-delay: 80ms;
  }
  .intro-cta-landed .nav > .button {
    animation: intro-cta-land 750ms var(--motion-pop) backwards;
  }
  .intro-cta-landed .nav > .button > span[aria-hidden='true'] {
    animation: intro-cta-disc 800ms 90ms var(--motion-pop) backwards;
  }
}
@keyframes intro-cta-land {
  from {
    scale: 0.9;
  }
  to {
    scale: 1;
  }
}
@keyframes intro-cta-disc {
  from {
    scale: 0;
    rotate: -90deg;
  }
  to {
    scale: 1;
    rotate: 0deg;
  }
}
@keyframes intro-nav-in {
  from {
    opacity: 0;
    transform: translateY(-26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}