.flp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: var(--spacing-xxl);
  min-height: clamp(320px, 85svh, 960px);
  /* background-color: var(--accent-color); */

  background: repeating-radial-gradient(
      circle at 50% 125%,
      hsl(from var(--white) h s l / 0.1) 0.5px,
      transparent 2px,
      transparent 40px
    ),
    radial-gradient(circle at 45% 65%, hsl(0 100 100 / 0.15), transparent 30%),
    radial-gradient(circle at 25% 35%, hsl(0 100 100 / 0.15), transparent 30%),
    radial-gradient(circle at 43% 10%, hsl(0 100 100 / 0.15), transparent 30%),
    radial-gradient(circle at 83% 60%, hsl(0 100 100 / 0.15), transparent 30%),
    radial-gradient(circle at 65% 76%, hsl(0 100 100 / 0.15), transparent 30%),
    radial-gradient(circle at 15% 54%, hsl(0 100 100 / 0.15), transparent 30%),
    /* radial-gradient(circle at 0% 0%, hsl(0 100 100 / 0.45), transparent 50%), */
      radial-gradient(circle at 50% 50%, var(--accent-color), #6e03d8);

  h1 {
    color: var(--white);
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    text-align: center;
    margin: 0 auto;
    margin-bottom: var(--spacing-md);
    max-width: 900px;
    text-shadow: 0 0.5rem 1rem hsl(from var(--primary-color) h s l / 0.2);
    position: relative;
    border: 1px solid transparent;

    /* border-image: linear-gradient(
      to right,
      hsl(from var(--accent-color) h s l / 0.5),
      transparent
    ); */
  }
  /* background-image: radial-gradient(
      at 50% 0%,
      hsl(from var(--accent-color) h s l / 8%),
      transparent
    ),
    radial-gradient(
      at 50% 100%,
      hsl(from var(--accent-color) h s l / 8%),
      transparent
    ); */
  /* margin-bottom: var(--spacing-xxl); */

  /* &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    --mask-image: linear-gradient(to bottom right, transparent 10%, black 100%);
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);

    background: radial-gradient(
      circle at 50% 50%,
      var(--white) 1px,
      transparent 1.5px
    );
    background-size: var(--spacing-md) var(--spacing-md);
    background-repeat: repeat;

    opacity: 0.2;
    z-index: 0;
  } */

  img.hero-image {
    z-index: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: center;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.12; // TODO: temp
  }
}

.flp-wrapper {
  padding: var(--spacing-xxl) 0;
  background-color: var(--bg-color-light);
  background: repeating-radial-gradient(
    circle at 125% 50%,
    hsl(from #000 h s l / 0.05) 0.5px,
    transparent 2px,
    transparent 40px
  );
  border-radius: var(--radius-md);
  box-shadow: 0 0.5rem 2rem hsl(from var(--primary-color) h s l / 0.15);

  .flp-container {
    width: clamp(320px, calc(100% - 32px), 80ch);
    margin: 0 auto;
  }

  .content {
    /* color: var(--text-color-light); */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.618;
    /* text-align: center; */

    .kg-card {
      margin-bottom: var(--spacing-lg);
      padding: var(--spacing-md);
      border: 1px solid hsl(from var(--accent-color) h s l / 0.15);
      border-radius: var(--radius-md);
      backdrop-filter: blur(1px);
      background-image: radial-gradient(
        circle at 50% 125%,
        hsl(from var(--accent-color) h s l / 0.05) 0.5px,
        var(--white)
      );
      box-shadow: 0 0.5rem 2rem hsl(from var(--primary-color) h s l / 0.15);

      &.kg-embed-card {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
      }

      iframe {
        width: 100%;
        min-height: 600px;
      }
    }

    .kg-header-card-button {
      display: inline-block;
      margin-top: var(--spacing-md);
      padding: var(--spacing-xs) var(--spacing-sm);
      background-color: var(--accent-color) !important;
      color: var(--white) !important;
      border-radius: var(--radius-md);
      text-decoration: none;
      font-weight: 700;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: hsl(from var(--accent-color) h s l / 0.8);
      }
    }

    h2 {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
      margin-bottom: var(--spacing-md);
      color: var(--text-color);
    }

    ul {
      list-style: disc;
      padding-left: var(--spacing-xxl);
      li:not(:last-child) {
        margin-bottom: var(--spacing-xs);
      }
    }

    & > *:not(:last-child) {
      margin-bottom: var(--spacing-lg);
    }

    a {
      color: var(--accent-color);
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.flp-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  svg {
    width: 920px;
    height: auto;
    g {
      transform: translate3d();
      fill: hsl(from #fff h s l / 0.05);
      stroke-dasharray: 100;
      stroke: hsl(from #fff h s l / 1);
      stroke-width: 0.5px;
      animation-name: logoDrawing;
      animation-duration: 48s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes logoDrawing {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 1000;
  }
}