@font-face {
  font-family: Geist Mono;
  src: url('assets/fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #080808;
  color: #eae9e4;
  font-family: 'Geist Mono', monospace;
  -webkit-font-smoothing: antialiased;
}
main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
h1 {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
.message { text-align: center; isolation: isolate; }
.logo-wrap {
  position: relative;
  width: clamp(132px, 24vw, 180px);
  margin: 0 auto 38px;
}
.logo-wrap::before {
  content: '';
  position: absolute;
  inset: -70% -40%;
  z-index: -1;
  background: radial-gradient(ellipse, rgb(49 92 255 / .09), transparent 66%);
  animation: ambient 7s ease-in-out infinite;
  pointer-events: none;
}
.logo { display: block; width: 100%; overflow: hidden; }
.logo-outline {
  fill: none;
  stroke: #eae9e4;
  stroke-width: .5;
  stroke-dasharray: 760;
  animation: construct 1.8s cubic-bezier(.16, 1, .3, 1) both;
}
.logo-solid { fill: #eae9e4; }
.materialize {
  transform-origin: 120px 52px;
  animation: materialize 1.6s cubic-bezier(.16, 1, .3, 1) .25s both;
}
.logo-scan { fill: #315cff; }
.scan-window, .laser { animation: machine 7s cubic-bezier(.4, 0, .2, 1) 1.6s infinite both; }
.laser { opacity: 0; }
h1 { animation: reveal 1s ease .6s both; }
p { animation: reveal 1s ease .85s both; }
p {
  margin: 20px 0 0;
  color: #999993;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .08em;
}
a {
  display: block;
  width: fit-content;
  margin: 6px auto 0;
  color: #eae9e4;
  text-decoration: none;
}
a:hover { color: #315cff; }
a:focus-visible { outline: 1px solid #315cff; outline-offset: 5px; }
@keyframes construct {
  from { stroke-dashoffset: 760; opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: .6; }
  to { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes materialize {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes machine {
  0% { transform: translateX(0); opacity: 0; }
  4% { opacity: 1; }
  32% { transform: translateX(268px); opacity: 1; }
  34%, 100% { transform: translateX(268px); opacity: 0; }
}
@keyframes ambient {
  0%, 100% { opacity: .35; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; }
  .logo-outline, .logo-scan, .laser { display: none; }
}