:root {
  --intro-bg: #f9faf5;
  --intro-ink: #151513;
  --intro-slate: #6e7884;
  --intro-accent: oklch(55% 0.2 25);
}

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

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  grid-template-rows: 1fr auto;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--intro-ink);
  background: transparent;
  isolation: isolate;
  pointer-events: none;
}

html.intro-pending .brand-intro { display: grid; }
.brand-intro[hidden] { display: none !important; }

.brand-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .94) 0 12%, rgba(249, 250, 245, .96) 46%),
    var(--intro-bg);
  opacity: 1;
  transition: opacity 520ms cubic-bezier(.22, 1, .36, 1);
}

.brand-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(700px, 88vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21, 21, 19, .07), transparent);
  transform: translate(-50%, 78px) scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: opacity 140ms ease;
}

.brand-intro.has-started::after {
  animation: intro-rule 520ms 100ms cubic-bezier(.22, 1, .36, 1) both;
}

.brand-intro.is-landing::before,
.brand-intro.is-landing::after { opacity: 0; }

@keyframes intro-rule {
  0% { opacity: 0; transform: translate(-50%, 78px) scaleX(0); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, 78px) scaleX(1); }
}

.intro-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 54px 24px 16px;
  transition: opacity 120ms ease;
}

.brand-intro.is-landing .intro-stage { opacity: 0; }

.intro-lockup {
  position: relative;
  display: grid;
  place-items: center;
  width: min(640px, 94vw);
  height: min(250px, 38vh);
}

.intro-word,
.hero-brand,
.intro-flight {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}

.intro-word {
  position: relative;
  z-index: 2;
  font-size: clamp(54px, 8.3vw, 92px);
  transform-origin: left top;
}

.intro-left,
.intro-slot,
.intro-k {
  display: inline-block;
  will-change: opacity, transform;
}

.intro-left { opacity: 0; transform: translateX(12px); }
.intro-slot { opacity: 0; color: var(--intro-slate); transform: translateX(-12px); }
.intro-k { opacity: 0; }

.intro-symbol {
  --symbol-x: 0px;
  --symbol-y: 0px;
  --symbol-scale: 1;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: clamp(150px, 18vw, 188px);
  height: auto;
  overflow: visible;
  color: var(--intro-ink);
  transform: translate(calc(-50% + var(--symbol-x)), calc(-50% + var(--symbol-y))) scale(var(--symbol-scale));
  transform-origin: center;
  will-change: transform, opacity;
}

.intro-strokes { stroke-width: 6.5; }
.intro-strokes line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-nodes { stroke-width: 6.5; }
.intro-nodes circle {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}

.intro-pulse {
  fill: none;
  stroke: var(--intro-accent);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.intro-note {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 24px 28px;
  text-align: center;
  color: color-mix(in oklch, var(--intro-ink) 38%, transparent);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: opacity 160ms ease;
}

.intro-skip {
  position: absolute;
  right: 20px;
  top: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: color-mix(in oklch, var(--intro-ink) 46%, transparent);
  padding: 8px 10px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: auto;
  transition: color 140ms, opacity 160ms;
}

.intro-skip:hover,
.intro-skip:focus-visible { color: var(--intro-ink); }
.intro-skip:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.brand-intro.is-landing .intro-skip,
.brand-intro.is-landing .intro-note { opacity: 0; }

.hero-brand {
  min-height: 28px;
  margin-bottom: 20px;
  font-size: 28px;
  color: var(--ink);
  opacity: 1;
}

.hero-brand .slot,
.intro-flight .slot { color: var(--intro-slate); }
html.intro-pending .hero-brand { visibility: hidden; opacity: 0; }

.intro-flight {
  position: fixed;
  z-index: 1002;
  margin: 0;
  color: var(--ink);
  pointer-events: none;
  transform-origin: left top;
  will-change: transform;
}

.nav-mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex: none;
}

@media (max-width: 640px) {
  .intro-lockup { width: 96vw; height: 218px; }
  .intro-skip { right: 8px; top: 8px; }
  .intro-note { padding-bottom: 20px; }
  .hero-brand { min-height: 24px; font-size: 24px; margin-bottom: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-intro { display: none !important; }
  .hero-brand { visibility: visible !important; opacity: 1 !important; }
}