:root {
  color-scheme: dark;
  --void: #07050d;
  --violet: #9c72ff;
  --orchid: #dd7eff;
  --white: #eeeafa;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--void);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.landing {
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  position: relative;
  background:
    radial-gradient(ellipse 62% 42% at 50% 56%, rgba(94, 52, 166, .15), transparent 68%),
    radial-gradient(ellipse 30% 24% at 10% 12%, rgba(191, 84, 242, .09), transparent 75%),
    var(--void);
}

.system-field, .system-field::before, .system-field::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.system-field { overflow: hidden; z-index: -1; }

/* A background organism: it deliberately disappears through the interaction
   layer so the wordmark and private-access field always remain unobscured. */
.living-emblem {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: min(620px, 74vw);
  height: min(930px, 124vh);
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: .64;
  mix-blend-mode: screen;
  filter: saturate(.88) contrast(1.05) drop-shadow(0 0 34px rgba(180, 90, 255, .23));
  mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 35%, transparent 44%, transparent 57%, black 66%, black 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 35%, transparent 44%, transparent 57%, black 66%, black 91%, transparent 100%);
  animation: emblem-drift 22s ease-in-out infinite;
}

.system-field::before {
  content: "";
  opacity: .38;
  background-image:
    linear-gradient(rgba(159, 102, 255, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 102, 255, .065) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 76% 65% at 50% 50%, black 0%, transparent 84%);
}

.system-field::after {
  content: "";
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.022) 3px 4px);
  opacity: .18;
  mix-blend-mode: screen;
}

.scanlines, .grid, .node-field, .signal, .dust { position: absolute; pointer-events: none; }

.scanlines {
  inset: -20%;
  background: linear-gradient(115deg, transparent 45%, rgba(207, 130, 255, .12) 49%, transparent 53%);
  filter: blur(12px);
  opacity: .55;
  animation: drift 20s linear infinite;
}

.grid {
  width: min(1120px, 94vw);
  height: min(660px, 86vh);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) perspective(700px) rotateX(57deg) translateY(18%);
  transform-origin: center bottom;
  border: 1px solid rgba(163, 103, 255, .12);
  background-image:
    linear-gradient(rgba(174, 106, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 106, 255, .13) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 45%, transparent 96%);
  opacity: .42;
}

.node-field {
  width: 52vw; height: 52vw; border-radius: 50%;
  border: 1px solid rgba(210, 162, 255, .18);
  filter: blur(.15px);
  opacity: .42;
}

.node-field::before, .node-field::after {
  content: ""; position: absolute; inset: 14%; border: inherit; border-radius: inherit;
}
.node-field::after { inset: 31%; }
.node-field-a { top: -31vw; right: -22vw; animation: slowturn 40s linear infinite; }
.node-field-b { bottom: -34vw; left: -25vw; border-color: rgba(237, 118, 255, .12); animation: slowturn 48s linear infinite reverse; }

.signal {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235, 160, 255, .95), transparent);
  box-shadow: 0 0 12px rgba(190, 93, 255, .8);
  transform: rotate(-27deg);
  opacity: 0;
}
.signal-a { width: 40vw; top: 21%; left: -8%; animation: signal 15s 2s infinite; }
.signal-b { width: 31vw; bottom: 20%; right: -8%; animation: signal 18s 7s infinite; }
.signal-c { width: 24vw; top: 52%; left: 37%; transform: rotate(69deg); animation: signal 20s 11s infinite; }

.dust {
  width: 55vmax; height: 55vmax;
  opacity: .13;
  background-image: radial-gradient(circle, #d98cff 0 1px, transparent 1.6px);
  background-size: 21px 25px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 66%);
}
.dust-a { top: -15%; left: -17%; animation: float 26s ease-in-out infinite; }
.dust-b { right: -20%; bottom: -24%; animation: float 33s ease-in-out -13s infinite reverse; }

.core {
  width: min(680px, calc(100vw - 3rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 2.25rem 0;
}

.core::before {
  content: "";
  position: absolute;
  width: min(680px, 100vw); height: 260px;
  background: radial-gradient(ellipse, rgba(160, 95, 255, .12), transparent 70%);
  filter: blur(18px);
  z-index: -1;
  animation: breathe 17s ease-in-out infinite;
}

.wordmark { width: min(275px, 54vw); height: auto; overflow: visible; }
.wordmark text {
  font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
  font-size: 75px;
  letter-spacing: 21px;
  font-weight: 300;
  fill: url(#ink);
}

h1 {
  max-width: 42rem;
  margin: 2.2rem auto 2.35rem;
  font-size: clamp(.82rem, 1.35vw, 1rem);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: .08em;
  color: rgba(238, 234, 250, .78);
}

.access { display: flex; align-items: center; width: 190px; border-bottom: 1px solid rgba(204, 159, 255, .52); transition: border-color .3s ease; position: relative; }
.access:focus-within { border-color: var(--orchid); }
.access input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: .55rem .05rem; color: var(--white); font: inherit; font-size: .73rem; letter-spacing: .15em; }
.access input::placeholder { color: rgba(221, 156, 255, .64); opacity: 1; }
.access button { border: 0; background: transparent; color: var(--orchid); padding: .45rem 0 .45rem .7rem; font-size: 1.1rem; cursor: pointer; }
.access-note { position: absolute; top: calc(100% + .6rem); left: 0; width: 100%; margin: 0; min-height: 1rem; color: rgba(221, 156, 255, .72); font-size: .62rem; letter-spacing: .08em; }
.access.denied { animation: deny .36s ease-in-out; border-color: #d87a9e; }

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

@keyframes drift { from { transform: translate3d(-5%, -3%, 0); } to { transform: translate3d(5%, 3%, 0); } }
@keyframes slowturn { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translate3d(7%, -5%, 0); } }
@keyframes signal { 0%, 72%, 100% { opacity: 0; } 75%, 84% { opacity: .9; } 89% { opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(.92); opacity: .52; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes emblem-drift {
  0%, 100% { transform: translate(-50%, -50%) scale(.98) rotate(-1.2deg); opacity: .53; }
  50% { transform: translate(-50%, -51.5%) scale(1.035) rotate(1.1deg); opacity: .72; }
}
@keyframes deny { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (max-width: 540px) {
  .living-emblem { width: 112vw; height: 112svh; opacity: .48; }
  .wordmark { width: min(240px, 68vw); }
  .wordmark text { font-size: 79px; letter-spacing: 17px; }
  h1 { max-width: 22rem; margin-top: 2rem; }
  .node-field { width: 96vw; height: 96vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .system-field { opacity: .48; }
}