* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
}

body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
}

main {
  display: grid;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: var(--space-lg);
  place-items: center;
  position: relative;
}

.spiral {
  animation: spiral-turn 80s linear infinite;
  height: min(84vw, 820px);
  position: absolute;
  width: min(84vw, 820px);
}

.spiral use {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.spiral-track {
  animation: spiral-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  stroke: color-mix(in srgb, var(--text) 3%, transparent);
  stroke-dasharray: 1;
  stroke-width: 1;
}

.comet {
  animation: comet-flow 7s cubic-bezier(0.33, 0, 0.67, 0) infinite;
  stroke: url("#magic");
}

.comet-tail {
  --length: 0.3;
  opacity: 0.04;
  stroke-dasharray: 0.3 0.7;
  stroke-width: 3;
}

.comet-body {
  --length: 0.18;
  opacity: 0.08;
  stroke-dasharray: 0.18 0.82;
  stroke-width: 3;
}

.comet-core {
  --length: 0.08;
  opacity: 0.17;
  stroke-dasharray: 0.08 0.92;
  stroke-width: 3.5;
}

.comet-head {
  --length: 0.012;
  opacity: 0.37;
  stroke-dasharray: 0.012 0.988;
  stroke-width: 4;
}

.hero {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  position: relative;
}

h1 {
  color: var(--text-mute);
  margin: 0;
  font: var(--type-display-xxl);
  letter-spacing: var(--tracking-display-xxl);
}

.hero p {
  color: var(--text-faint);
  font: var(--type-caption);
  justify-self: end;
  margin: 0;
  padding-inline-end: var(--space-xs);
}

.github-link {
  bottom: var(--space-md);
  color: var(--text-faint);
  display: inline-grid;
  font: var(--type-caption);
  min-height: 32px;
  padding-inline: var(--space-xs);
  place-items: center;
  position: absolute;
  right: var(--space-md);
  text-decoration: none;
}

.github-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.github-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.github-link:active {
  color: var(--accent-text);
}

@keyframes spiral-turn {
  to {
    transform: rotate(1turn);
  }
}

@keyframes spiral-reveal {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes comet-flow {
  from {
    stroke-dashoffset: var(--length);
  }

  to {
    stroke-dashoffset: calc(var(--length) - 1);
  }
}

@media (width < 768px) {
  .spiral {
    height: min(132vw, 600px);
    width: min(132vw, 600px);
  }

  h1 {
    font: var(--type-display-lg);
    letter-spacing: var(--tracking-display-lg);
  }

  .github-link {
    bottom: var(--space-xs);
    min-height: 44px;
    right: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spiral,
  .spiral-track {
    animation: none;
  }

  .comet {
    display: none;
  }
}