:root {
  
  --ref-royal-50: #3b44e8;
  --ref-royal-40: #6b73f2;
  --ref-near-white: #f7f7fb;
  --ref-near-black: #08080b;
  --ref-ink: #14141a;
  --ref-mute: #6a6a7a;

  --ref-violet-50: #6d3be8;
  --ref-azure-50: #2f6ff0;

  --brand: var(--ref-royal-50);
  --ground: var(--ref-near-white);
  --ground-deep: #ececf4;
  --ink: var(--ref-ink);
  --muted: var(--ref-mute);
  --glow: rgb(59 68 232 / 20%);
  --glow-1: rgb(59 68 232 / 20%);
  --glow-2: rgb(109 59 232 / 13%);
  --glow-3: rgb(47 111 240 / 15%);
  --vignette: rgb(20 20 26 / 9%);
  --dot: rgb(20 20 26 / 7%);
  --hairline: rgb(20 20 26 / 12%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: var(--ref-royal-40);
    --ground: var(--ref-near-black);
    --ground-deep: #101019;
    --ink: var(--ref-near-white);
    --muted: #8a8a9c;
    --glow: rgb(107 115 242 / 26%);
    --glow-1: rgb(107 115 242 / 26%);
    --glow-2: rgb(140 106 246 / 18%);
    --glow-3: rgb(74 138 250 / 18%);
    --vignette: rgb(0 0 0 / 55%);
    --dot: rgb(247 247 251 / 6%);
    --hairline: rgb(247 247 251 / 14%);
  }
}

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

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html {
  
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 2rem;
  padding: clamp(1.25rem, 4vw, 3rem);

  background-color: var(--ground);
  background-image: linear-gradient(175deg, var(--ground) 30%, var(--ground-deep) 100%);
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;

  overflow: hidden;
}

.ambient {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 50% 2%, var(--glow-1), transparent 62%),
    radial-gradient(34rem 26rem at 18% 22%, var(--glow-2), transparent 60%),
    radial-gradient(38rem 28rem at 84% 16%, var(--glow-3), transparent 62%),
    radial-gradient(50rem 34rem at 50% 96%, var(--glow-2), transparent 66%);
  animation: drift 31s ease-in-out infinite;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 42%, var(--vignette) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/noise.png");
  background-size: 128px 128px;
  opacity: 0.032;
  mix-blend-mode: overlay;
}

.grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 40%, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 40%, #000 20%, transparent 100%);
}

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  text-align: center;
}

.stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  
  inset: -140% -60%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  opacity: 0;
  animation: glow-in 2s ease-out 0.2s forwards;
}

.eyebrow {
  margin: 0;
  font-family: "Geist Mono", ui-monospace, "SF Mono", monospace;
  font-size: clamp(0.62rem, 1.4vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--muted);

  opacity: 0;
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s forwards;
}

.wordmark {
  margin: 0;
  font-size: clamp(2.8rem, 12.5vw, 8.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

.wordmark span {
  display: inline-block;
  opacity: 0;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.wordmark span:nth-child(1) { animation-delay: 0.18s; }
.wordmark span:nth-child(2) { animation-delay: 0.24s; }
.wordmark span:nth-child(3) { animation-delay: 0.3s; }
.wordmark span:nth-child(4) { animation-delay: 0.36s; }
.wordmark span:nth-child(5) { animation-delay: 0.42s; }
.wordmark span:nth-child(6) { animation-delay: 0.48s; }
.wordmark span:nth-child(7) { animation-delay: 0.54s; }

.rule {
  
  margin-top: clamp(0.4rem, 1.5vw, 1.1rem);
  width: min(26rem, 68vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 22%, var(--hairline) 78%, transparent);
  transform: scaleX(0);
  animation: draw 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s forwards;
}

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.1rem;

  font-size: clamp(0.72rem, 1.6vw, 0.82rem);
  color: var(--muted);

  opacity: 0;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s forwards;
}

.mail {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.mail:hover,
.mail:focus-visible {
  color: var(--brand);
  border-color: var(--brand);
}

.mail:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 2px;
}

.company {
  
  white-space: nowrap;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 0.7em, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes draw {
  to {
    transform: scaleX(1);
  }
}

@keyframes glow-in {
  to {
    opacity: 1;
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.9;
  }
  33% {
    transform: translate3d(-1.5%, 1.5%, 0) scale(1.05);
    opacity: 1;
  }
  66% {
    transform: translate3d(1.5%, -1%, 0) scale(1.03);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient,
  .stage::before,
  .eyebrow,
  .wordmark span,
  .rule,
  .footer {
    animation: none !important;
  }

  .stage::before,
  .eyebrow,
  .wordmark span,
  .footer {
    opacity: 1;
    transform: none;
  }

  .rule {
    transform: scaleX(1);
  }
}

@media (max-height: 32rem) {
  .wordmark {
    font-size: clamp(2.4rem, 11vh, 5rem);
  }

  .grid {
    display: none;
  }
}

@media (forced-colors: active) {
  .wordmark {
    color: CanvasText;
  }

  .ambient,
  .grid,
  .vignette,
  .grain {
    display: none;
  }
}