@font-face {
  font-family: "Inter";
  src: url("./fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("./fonts/InterTight-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: only light;
  --t: 0;
  --logo-field: #515151;
  --bg-light: #ffffff;
  --bg-dark: #0e0e0e;
  --ink-light: #111418;
  --ink-dark: #e9edf1;
  --motto-light: #515151;
  --motto-dark: #9a9a9a;
  --ref-purple-light: #8521c9;
  --ref-purple-dark: #aa76dc;
  --bar-draw: 0.55s;
  --bar-stagger: 0.77s;
  --logo-size: clamp(7.5rem, 28vw, 10rem);
  --motto-s: 1;
  --t-lo: min(1, max(0, calc(var(--t) * 2)));
  --t-hi: min(1, max(0, calc(var(--t) * 2 - 1)));
  --canvas: color-mix(
    in srgb,
    var(--bg-dark) calc(var(--t-hi) * 100%),
    color-mix(in srgb, var(--logo-field) calc(var(--t-lo) * 100%), var(--bg-light))
  );
  --ink: color-mix(
    in srgb,
    var(--ink-dark) calc(var(--t-hi) * 100%),
    color-mix(in srgb, var(--logo-field) calc(var(--t-lo) * 100%), var(--ink-light))
  );
  --motto: color-mix(
    in srgb,
    var(--motto-dark) calc(var(--t-hi) * 100%),
    color-mix(
      in srgb,
      var(--logo-field) calc(var(--t-lo) * 100%),
      var(--motto-light)
    )
  );
  --rule: color-mix(
    in srgb,
    var(--ref-purple-dark) calc(var(--t-hi) * 100%),
    color-mix(
      in srgb,
      var(--logo-field) calc(var(--t-lo) * 100%),
      var(--ref-purple-light)
    )
  );
}

html {
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html.is-ready {
  scroll-snap-type: none;
  overflow: hidden;
  height: 100%;
  background: var(--canvas);
}

html.is-intro:not(.is-ready) {
  overflow: hidden;
  height: 100%;
}

html.is-intro:not(.is-ready) body {
  overflow: hidden;
  height: 100%;
  background: var(--logo-field);
}

html.is-intro.is-shrinking body,
html.is-logo-in body,
html.is-ready body {
  background: var(--canvas);
}

html.is-ready body {
  overflow: hidden;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--canvas);
  color: var(--ink);
  --ml-ignore: true;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.scroll-port {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-port::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html.is-ready .scroll-port {
  overflow-y: scroll;
}

.scroll-track {
  pointer-events: none;
}

.scroll-stop {
  height: 100vh;
  height: 100lvh;
  height: var(--stop-h, 100lvh);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.depth-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 4.5rem;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, #000 7%, transparent),
    transparent
  );
  opacity: calc(1 - min(1, calc(var(--t) * 2.5)));
}

.intro-grey {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 20;
  background: var(--logo-field);
  pointer-events: none;
}

.intro-grey.is-done {
  display: none;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand {
  position: relative;
  display: block;
  line-height: 0;
  max-width: calc(100% - 2.5rem);
  text-align: center;
}

.wordmark {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.7rem);
  z-index: 2;
  margin: 0;
  padding: 0;
  width: max-content;
  max-width: none;
  font-family: "Inter Tight", "Inter", system-ui, sans-serif;
  font-size: calc(var(--logo-size) * 2048 / 8517);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-transform: none;
  text-decoration: none;
  color: var(--ink);
  --wordmark-canvas: var(--canvas);
  --wordmark-ascent: calc(1984 / 2048 * 1em);
  --wordmark-g-depth: calc(442 / 2048 * 1em);
  --wordmark-rule: 0.07em;
  --wordmark-halo: 0.09em;
  opacity: 0;
  transform: translateX(-50%);
}

.wordmark-ink {
  position: relative;
  display: inline-block;
  line-height: 1;
  overflow: visible;
}

.wordmark-ink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(
    var(--wordmark-ascent) + var(--wordmark-g-depth) - var(--wordmark-rule)
  );
  height: var(--wordmark-rule);
  background: var(--rule);
  pointer-events: none;
  z-index: 0;
}

.wordmark-descender {
  position: relative;
  z-index: 1;
  display: inline-block;
  line-height: 1;
}

.wordmark-descender::before {
  content: "g";
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  -webkit-text-stroke: var(--wordmark-halo) var(--wordmark-canvas);
  paint-order: stroke;
  pointer-events: none;
  z-index: -1;
  clip-path: inset(
    calc(
      var(--wordmark-ascent) + var(--wordmark-g-depth) - var(--wordmark-rule) -
        var(--wordmark-halo)
    )
    -1em
    -1em
    -1em
  );
}

html.is-name-in .wordmark {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.logo-seat {
  position: relative;
  display: block;
  line-height: 0;
  opacity: 0;
}

html.is-logo-in .logo-seat {
  opacity: 1;
}

.logo-seat svg {
  display: block;
  width: var(--logo-size);
  height: auto;
  max-width: 100%;
}

.logo-build {
  position: relative;
  z-index: 1;
}

.logo-final {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
}

html.is-slash-in .logo-final {
  opacity: 1;
}

html.is-slash-in .logo-build {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.logo-field {
  opacity: 1;
}

.logo-bar {
  clip-path: inset(0 0 100% 0);
}

html.is-drawing .logo-bar--red {
  animation: bar-draw var(--bar-draw) ease-out forwards;
  animation-delay: 0s;
}

html.is-drawing .logo-bar--orange {
  animation: bar-draw var(--bar-draw) ease-out forwards;
  animation-delay: calc(var(--bar-stagger) * 1);
}

html.is-drawing .logo-bar--yellow {
  animation: bar-draw var(--bar-draw) ease-out forwards;
  animation-delay: calc(var(--bar-stagger) * 2);
}

html.is-drawing .logo-bar--green {
  animation: bar-draw var(--bar-draw) ease-out forwards;
  animation-delay: calc(var(--bar-stagger) * 3);
}

.motto {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  width: 0;
  min-width: 100%;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: visible;
  line-height: 0;
  color: var(--motto);
  opacity: 0;
  font-size: calc(var(--logo-size) * 0.1 * var(--motto-s, 1));
  font-weight: 600;
  --reel-line: 1.2em;
  --reel-slot: 1.5em;
}

html.is-prefix-in .motto {
  opacity: 1;
}

html.is-motto-in .motto-reel-port {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

.motto-row {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  white-space: nowrap;
}

.motto-prefix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-start;
  column-gap: 0.28em;
  padding-right: 0.28em;
}

.motto-prefix-port,
.motto-reel-port,
.motto-rest-port {
  position: relative;
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  overflow: clip;
  clip-path: inset(0);
  height: var(--reel-line);
  line-height: 0;
}

.motto-reel-port {
  opacity: 0;
}

.motto-prefix-reel,
.motto-reel,
.motto-rest-reel {
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
}

.motto-morph {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: var(--reel-line);
  line-height: 0;
  visibility: hidden;
}

.motto-morph.is-on {
  visibility: visible;
}

.motto-stem {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  transform: none;
}

.motto-morph .motto-rest-port {
  position: absolute;
  top: 0;
  left: var(--stem-width, 0px);
}

.motto-word {
  display: block;
  flex: 0 0 auto;
  height: var(--reel-line);
  line-height: var(--reel-line);
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  text-align: left;
  color: inherit;
}

.motto-prefix-reel .motto-word,
.motto-reel .motto-word {
  position: absolute;
  top: calc(var(--word-i, 0) * var(--reel-slot));
  left: 0;
}

.motto-rest-reel .motto-word {
  position: absolute;
  top: 0;
  left: 0;
}

.status {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 0 1rem;
  width: max-content;
  max-width: calc(100% - 2.5rem);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-50%);
}

html.is-name-in .status {
  opacity: 1;
  transition: opacity 0.55s ease-out 0.12s;
}

.status.is-away,
.scroll-egg.is-away {
  visibility: hidden;
}

.scroll-egg {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  z-index: 3;
  margin: 0;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--ref-purple-dark);
  opacity: clamp(0, calc((var(--t) - 0.7) / 0.18), 1);
  transform: translateX(-50%);
}

@keyframes bar-draw {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-ready {
    scroll-snap-type: none;
  }

  .intro-grey {
    display: none;
  }

  .depth-hint {
    display: none;
  }

  .logo-seat,
  .wordmark,
  .status,
  .motto,
  .motto-reel-port {
    opacity: 1;
  }

  .logo-build {
    opacity: 0;
    visibility: hidden;
  }

  .logo-final {
    opacity: 1;
  }

  .logo-bar {
    clip-path: none;
    animation: none;
  }
}