:root {
  color-scheme: dark;
  --background: #101314;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.68);
  --cyan: #20d9ff;
  --gold: #c6a15b;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  background: var(--background);
}

body {
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
  cursor: url("./Cursors/Normal%20Select.cur"), auto;
  font-family: Manrope, Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.landing-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 80% 15%, rgba(32, 217, 255, 0.08), transparent 28rem),
    radial-gradient(circle at 20% 88%, rgba(198, 161, 91, 0.055), transparent 30rem),
    var(--background);
}

.landing-shell::after {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 74%);
  mask-image: radial-gradient(circle at center, black, transparent 74%);
  opacity: 0.5;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(24px, 4vw, 44px);
  pointer-events: none;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  cursor: url("./Cursors/Link%20Select.cur"), pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.brand-lockup__mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
  overflow: visible;
}

img.brand-lockup__mark {
  filter: brightness(0) invert(1) contrast(1.08);
}

.brand-mark {
  color: #ffffff;
  transform-origin: center;
}

.brand-mark__white .brand-mark__shard {
  fill: currentColor;
}

.brand-mark__white,
.brand-mark__color,
.brand-mark__glass,
.brand-mark__lanes,
.brand-mark__shard {
  transform-box: view-box;
  transform-origin: center;
}

.brand-mark__color,
.brand-mark__glass,
.brand-mark__lanes {
  opacity: 0;
}

.brand-mark__glass path {
  fill: none;
  stroke: rgba(123, 229, 238, 0.28);
  stroke-linejoin: round;
  stroke-width: 18;
}

.brand-mark__glass--back path {
  stroke: rgba(214, 236, 242, 0.16);
  stroke-width: 24;
}

.brand-mark__lanes path {
  fill: none;
  stroke: rgba(214, 246, 250, 0.72);
  stroke-linecap: round;
  stroke-width: 30;
  stroke-dasharray: 380 520;
  stroke-dashoffset: 0;
}

.brand-lockup--animated.is-brand-energized .brand-mark {
  animation: brand-glass-glow 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__white {
  animation: brand-white-dissipate 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__color {
  animation: brand-color-field 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__glass--back {
  animation: brand-glass-back 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__glass--front {
  animation: brand-glass-front 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__lanes {
  animation: brand-lanes-field 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__lanes path {
  animation: brand-lane-flow 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__color .brand-mark__left {
  animation: brand-left-field 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__color .brand-mark__middle {
  animation: brand-middle-field 9000ms linear;
}

.brand-lockup--animated.is-brand-energized .brand-mark__color .brand-mark__right {
  animation: brand-right-field 9000ms linear;
}

@keyframes brand-glass-glow {
  0%,
  100% {
    filter: none;
    transform: translate3d(0, 0, 0);
  }

  12% {
    filter: drop-shadow(0 0 4px rgba(0, 180, 255, 0.16));
  }

  28%,
  56% {
    filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.28));
  }

  78% {
    filter: drop-shadow(0 0 5px rgba(0, 180, 255, 0.12));
  }
}

@keyframes brand-white-dissipate {
  0%,
  100% {
    opacity: 1;
  }

  10% {
    opacity: 0.8;
  }

  24%,
  58% {
    opacity: 0.16;
  }

  74% {
    opacity: 0.48;
  }

  92% {
    opacity: 0.9;
  }
}

@keyframes brand-color-field {
  0%,
  100% {
    opacity: 0;
  }

  8% {
    opacity: 0.1;
  }

  20%,
  58% {
    opacity: 0.82;
  }

  76% {
    opacity: 0.38;
  }

  94% {
    opacity: 0.04;
  }
}

@keyframes brand-glass-back {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  8% {
    opacity: 0.15;
    transform: translate3d(-28px, 28px, 0);
  }

  22%,
  56% {
    opacity: 0.58;
    transform: translate3d(-54px, 44px, 0);
  }

  78% {
    opacity: 0.2;
    transform: translate3d(-18px, 16px, 0);
  }
}

@keyframes brand-glass-front {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  8% {
    opacity: 0.18;
    transform: translate3d(28px, -26px, 0);
  }

  22%,
  56% {
    opacity: 0.62;
    transform: translate3d(50px, -42px, 0);
  }

  78% {
    opacity: 0.18;
    transform: translate3d(18px, -14px, 0);
  }
}

@keyframes brand-lanes-field {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  7% {
    opacity: 0.18;
  }

  20%,
  54% {
    opacity: 0.62;
    transform: translate3d(22px, -22px, 0);
  }

  76% {
    opacity: 0.2;
    transform: translate3d(10px, -10px, 0);
  }
}

@keyframes brand-lane-flow {
  0% {
    stroke-dashoffset: 360;
  }

  24% {
    stroke-dashoffset: -320;
  }

  58% {
    stroke-dashoffset: -760;
  }

  100% {
    stroke-dashoffset: -1120;
  }
}

@keyframes brand-left-field {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  16%,
  58% {
    transform: translate3d(-42px, 18px, 0);
  }
}

@keyframes brand-middle-field {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  16%,
  58% {
    transform: translate3d(28px, -16px, 0);
  }
}

@keyframes brand-right-field {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  16%,
  58% {
    transform: translate3d(46px, -22px, 0);
  }
}

.brand-lockup__name {
  color: #ffffff;
  font-family: Syncopate, Manrope, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 4.8px;
  text-transform: uppercase;
}

.landing-hero {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  cursor: url("./Cursors/Normal%20Select.cur"), auto;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.logo-field,
.surface-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.logo-field {
  z-index: 1;
}

.surface-grain {
  z-index: 2;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.035), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.025)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 0,
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px,
      transparent 9px
    );
  mix-blend-mode: overlay;
  opacity: 0.32;
}

.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;
}

@media (max-width: 640px) {
  .site-header {
    padding: 24px;
  }

  .brand-lockup {
    gap: 13px;
  }

  .brand-lockup__mark {
    width: 34px;
    height: 34px;
  }

  .brand-lockup__name {
    font-size: 10px;
    letter-spacing: 3.6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero {
    cursor: default;
  }
}