.hero-pendulum {
  overflow: hidden;
  position: relative;

  &::after {
    background: conic-gradient(from 90deg at 50% 50%, var(--color-pastel-green-400), var(--color-white));
    content: "";
    filter: blur(146px) brightness(138%) opacity(40%);
    position: absolute;
    inset: 0px;
    z-index: -1;
  }

  .header-underline {
    color: var(--color-downriver-400);
  }

  >.container {
    gap: 0px;
    display: flex;
    flex-direction: column;
    height: auto;

    >div:first-child {
      margin-top: auto;
      margin-bottom: auto;
    }

    .separator {
      height: var(--space-sm);
    }

    @media (min-width: 40rem) {
      .separator::after {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        content: "";
        display: block;
        height: var(--space-sm);
        width: 100%;
        background-color: var(--color-pastel-green-400);
      }
    }
  }

  @media (min-width: 40rem) {
    >.container {
      min-height: calc(-132px + 100svh);
    }
  }
}


.hero-pendulum>.container>div>.grid {
  column-gap: var(--gutter);
  display: grid;
  height: inherit;
  row-gap: 0px;
  /* compensate for height of separator */
  margin-top: var(--space-sm);
}

@media (min-width: 0px) {
  .grid {
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 40rem) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 64rem) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}



.hero-pendulum>.container>div>.grid {
  >.col-text {
    padding-left: 0px;

    >*:not(.button) {
      margin-bottom: var(--baseline);
    }

    .button:first-of-type {
      background-color: var(--color-downriver-400);
      color: var(--color-white);
      margin-right: var(--space-sm);
    }
  }

  @media (min-width: 0px) {
    .col-text {
      grid-row: 1;
      grid-column: 1 / span 4;
    }
  }

  @media (min-width: 40rem) {
    .col-text {
      grid-column: 1 / span 6;
    }
  }
}



.hero-pendulum>.container>div>.grid {
  >.col-animation {
    opacity: 0.25;
  }

  @media (min-width: 0px) {
    .col-animation {
      grid-column: 2 / span 2;
      grid-row: 1;
    }
  }

  @media (min-width: 40rem) {
    .col-animation {
      grid-column: 5 / span 4;
    }
  }

  @media (min-width: 64rem) {
    .col-animation {
      opacity: 1;
      grid-column: 10 / span 3;
      padding-left: calc(var(--space-md) * 1.5);
    }
  }

  @media (min-width: 75rem) {
    .col-animation {
      grid-column: 10 / span 3;
      padding-left: var(--space-md);
    }
  }
}


.pendulum {
  aspect-ratio: 1 / 1;
  background-color: var(--color-downriver-400);
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;

  >.circle {
    animation-duration: 1500ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    border-radius: 100%;
    inset: 0px;
    position: absolute;

    &:nth-child(1) {
      animation-name: circle;
      background-image: conic-gradient(from 180deg at 50% 75%, var(--color-pastel-green-400), var(--color-downriver-400));
      translate: 0px -50%;
    }

    &:nth-child(2) {
      animation-name: circle;
      background-image: conic-gradient(from 0deg at 50% 25%, var(--color-pastel-green-400), var(--color-downriver-400));
      translate: 0px 50%;
    }
  }
}

@keyframes circle {
  0% {
    rotate: 45deg;
  }

  50% {
    rotate: -45deg;
  }

  100% {
    rotate: 0deg;
  }

}