:root {
  --bg-0: #05080d;
  --bg-1: #0a121c;
  --ink: #e8f4ff;
  --muted: #6f879c;
  --signal: #3dffc4;
  --signal-dim: rgba(61, 255, 196, 0.18);
  --grid: rgba(120, 180, 220, 0.07);
  --glow: rgba(61, 255, 196, 0.35);
}

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

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

body {
  font-family: "Share Tech Mono", monospace;
  color: var(--ink);
  background: var(--bg-0);
  overflow: hidden;
  min-height: 100dvh;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 50% 35%, #0f2233 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 90%, #0a1f2a 0%, transparent 55%),
    linear-gradient(165deg, var(--bg-1), var(--bg-0) 55%, #03060a);
}

.grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(58deg) scale(1.4);
  transform-origin: center 30%;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  animation: grid-drift 18s linear infinite;
  opacity: 0.9;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}

.orb-a {
  width: min(48vw, 420px);
  height: min(48vw, 420px);
  top: 18%;
  left: 50%;
  translate: -50% -20%;
  background: radial-gradient(circle, var(--signal-dim), transparent 70%);
  animation: orb-pulse 7s ease-in-out infinite;
}

.orb-b {
  width: min(36vw, 280px);
  height: min(36vw, 280px);
  bottom: 8%;
  right: 12%;
  background: radial-gradient(circle, rgba(80, 160, 255, 0.16), transparent 70%);
  animation: orb-pulse 9s ease-in-out infinite reverse;
}

.scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
  opacity: 0.25;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.25rem, 3.5vh, 2rem);
  padding: 2rem;
  animation: enter 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.brand {
  line-height: 0;
  color: var(--ink);
  filter: drop-shadow(0 0 18px var(--glow))
    drop-shadow(0 0 64px rgba(61, 255, 196, 0.18));
}

.wordmark {
  display: block;
  transform-origin: center center;
  animation: ambigram 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform;
}

.logo {
  display: block;
  width: min(88vw, 720px);
  height: auto;
  overflow: visible;
}

.domain {
  font-size: clamp(0.75rem, 2.2vw, 0.95rem);
  letter-spacing: 0.35em;
  text-transform: lowercase;
  color: var(--muted);
  animation: domain-fade 8s ease-in-out infinite;
}

@keyframes ambigram {
  0%,
  28% {
    transform: rotate(0deg);
  }
  42%,
  78% {
    transform: rotate(180deg);
  }
  92%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 64px;
  }
}

@keyframes orb-pulse {
  0%,
  100% {
    opacity: 0.55;
    scale: 1;
  }
  50% {
    opacity: 1;
    scale: 1.08;
  }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes domain-fade {
  0%,
  28%,
  42%,
  78%,
  92%,
  100% {
    opacity: 0.85;
  }
  35%,
  85% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .grid,
  .orb,
  .domain,
  .stage {
    animation: none;
  }
}

@media (max-width: 480px) {
  .stage {
    gap: 1rem;
  }
}