:root {
  --animation-sweep: color-sweep 6s linear infinite;
}

@keyframes color-sweep {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.color-sweep {
  animation: var(--animation-sweep);
}

.index__banner {
  display: inline-flex;
  gap: 1ch;
  margin: 0 auto;

  :not(:first-child) {
    @media(max-width: 1276px) {
      display: none;
    }
  }
  @media(max-width: 1276px) {
    display: none;
  }
}

.index__main {
  display: flex;
  justify-content: center;
  gap: 1ch;
}
.index__dna {
  width: 12ch;
  background: url("/static/images/dna.svg");
  background-repeat: no-repeat repeat;
  @media(max-width: 1276px) {
    display: none;
  }
}
.index__figure {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 99ch;
  padding: var(--line-height-em) 1ch;

  @media(max-width: 1056px) {
    width: auto;

    img[src*="scene.svg"] {
      display: none;
    }
    img[src*="profile.svg"] {
      margin-left: auto;
    }
  }
  @media(max-width: 797px) {
    img[src*="stars.svg"] {
      display: none;
    }
  }

  hr {
    height: var(--line-height-em);
    width: 100%;
    margin: var(--line-height-em) 0;
    border: 0;
    background: var(--text);
  }

  &,
  &::before {
    border: 1ch solid var(--text);
    border-top-width: var(--line-height-em);
    border-bottom-width: var(--line-height-em);
  }

  &::before {
    content: "";
    position: absolute;
    inset: calc(var(--line-height) * -1em) -1ch;
    display: block;
    animation: var(--animation-sweep);
  }
}
.index__blurb {
  width: 42ch;
  margin: auto;

  @media(max-width: 797px) {
    width: auto;
  }

  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: flex;

    + li {
      margin-top: var(--line-height-em);
    }
  }
  strong {
    white-space: nowrap;
    padding-right: 1ch;
  }
}
.index__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--line-height-em);
  margin: calc(var(--line-height-em) * 2) 0 var(--line-height-em) 0;

  @media(max-width: 797px) {
    img[src*="waveform.svg"] {
      display: none;
    }
  }
}