.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  min-height: clamp(320px, 55svh, 820px);
  background-color: var(--black);
  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
    );
  position: relative;
  padding-top: var(--spacing-xxl);
  /* margin-bottom: var(--spacing-xxl); */

  html:not(.no-landing) & {
    animation: heroShrink 1s 4s ease-in-out forwards;
    min-height: 100svh;
  }

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

    /* Linear gradient mask for fade effect */
    --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
    );
    /* radial-gradient(circle at 25% 25%, var(--accent-color) 1px, transparent 1.5px), */
    /* radial-gradient(circle at 75% 75%, var(--accent-color) 1px, transparent 1.5px); */
    background-size: var(--spacing-md) var(--spacing-md);
    background-repeat: repeat;

    /* background-image:
      repeating-radial-gradient(
      circle at 25% 50%,
      var(--white) 0.5px,
      transparent 2px,
      transparent 40px
      ); */

    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.3;
    transform: scale(1.2);

    animation: heroImageAnimate 3s ease-in-out forwards;
  }

  .content {
    z-index: 1;
    position: relative;
    color: hsl(from var(--white) h s l / 0.85);
    /* padding-top: 7rem; */
    /* margin-top: 4rem; */

    .blog-date {
      opacity: 0.35;
      font-size: 0.85rem;
    }

    .blog-author {
      opacity: 0.35;
      font-size: 0.85rem;
    }

    .blog-details {
      display: flex;
      gap: var(--spacing-xs);
      font-size: 0.85rem;
      color: hsl(from var(--white) h s l / 0.85);
      margin-bottom: var(--spacing-md);

      @media screen and (max-width: 768px) {
        flex-direction: column;
        align-items: center;
        gap: 0;
      }
    }

    h1 {
      position: relative;
      font-size: clamp(2rem, 7svw, 4rem);
      font-weight: 500;
      line-height: 1.1;
      margin-bottom: var(--spacing-sm);
      padding-top: 0.15em;

      .blog-heading & {
        font-size: clamp(1.5rem, 5svw, 2.5rem);
        line-height: 1.2;
        margin-block: var(--spacing-xs);
      }

      span {
        font-weight: 700;
        color: var(--accent-color);
        color: transparent;
        background-clip: text;
        background-image: linear-gradient(
          45deg,
          hsl(from var(--accent-color) h s 32),
          hsl(from var(--accent-color) h s 50)
        );
        position: relative;
        text-shadow:
          /* 0 -1px 0 hsl(from var(--accent-color) h s 50 / 1), */ 0
            2px 0.5rem hsl(from var(--accent-color) h s 50 / 0.15),
          0 0 3em hsl(from var(--accent-color) h calc(s + 50) l / 0.15),
          0 0 2rem hsl(from var(--accent-color) h 200% l / 0.15);
      }

      p {
        opacity: 0;
        animation: slideReveal 1s ease-in-out forwards;

        @media screen and (max-width: 768px) {
          text-align: center;
          animation-name: slideDownReveal;
        }

        &:nth-child(1) {
          animation-delay: 3.5s;
        }
        &:nth-child(2) {
          animation-delay: 3.75s;
        }
        &:nth-child(3) {
          animation-delay: 4s;
        }
      }
    }

    .short {
      font-size: clamp(0.85rem, 3svw, 1.15rem);
      font-weight: 300;
      line-height: 1.5;
      max-width: 40ch;
      margin-bottom: var(--spacing-md);
      color: hsl(from var(--white) h s l / 0.55);
      height: 0;
      opacity: 0;
      overflow: hidden;

      animation: heroDescGrow 0.5s 3.5s ease-in-out forwards,
        heroDescReveal 0.5s 4s ease-in-out forwards;

      @media screen and (max-width: 768px) {
        text-align: center;
        max-width: 100%;
      }
    }

    a {
      opacity: 0;
      animation: slideReveal 0.5s 4.2s ease-in-out forwards;
      color: var(--white);
      background: linear-gradient(
        45deg,
        hsl(from var(--accent-color) h s 32),
        hsl(from var(--accent-color) h s 45)
      );
      /* display: inline-block; */
      padding: var(--spacing-sm) var(--spacing-md);
      border: 1px solid hsl(from var(--accent-color) h s l / 0.5);
      text-decoration: none;
      box-shadow: var(--glowing-shadows);
      transition: box-shadow 0.15s ease;

      @media screen and (max-width: 768px) {
        font-size: 0.85rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        display: block;
        max-width: 12rem;
        margin: 0 auto;
        animation-name: slideDownReveal;
      }

      &:hover {
        box-shadow: var(--glowing-shadows-hover);
      }
    }
  }
}

.test-logo {
  color: #fff3;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52rem;
  height: 52rem;

  @media screen and (max-width: 768px) {
    width: 75svw;
    height: 75svw;
  }

  animation: shrinkReveal 3s ease-in-out forwards,
    logoReposition 0.7s 3.3s ease-in-out forwards,
    logoHide 0.5s 4s linear forwards;

  @media screen and (max-width: 1400px) {
    animation: shrinkReveal 3s ease-in-out forwards,
      logoRepositionXL 0.7s 3.3s ease-in-out forwards,
      logoHide 0.5s 4s linear forwards;
  }

  @media screen and (max-width: 1200px) {
    animation: shrinkReveal 3s ease-in-out forwards,
      logoRepositionLG 0.7s 3.3s ease-in-out forwards,
      logoHide 0.5s 4s linear forwards;
  }

  @media screen and (max-width: 992px) {
    animation: shrinkReveal 3s ease-in-out forwards,
      logoRepositionSM 0.7s 3.3s ease-in-out forwards,
      logoHide 0.5s 4s linear forwards;
  }

  @media screen and (max-width: 768px) {
    animation: shrinkReveal 3s ease-in-out forwards,
      logoRepositionXS 0.7s 3.3s ease-in-out forwards,
      logoHide 0.5s 4s linear forwards;
  }

  svg {
    width: 100%;
    height: 100%;
    g.main {
      path {
        fill: hsl(from yellow h s l / 0);
        /* fill: hsl(from #fff h s l / 0); */
        stroke: hsl(from #fff h s l / 1);
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        stroke-width: 0.5px;
        animation: dash 3s ease-in-out forwards,
          logoFill 2s 2s ease-in-out forwards;
      }
    }
  }
}

@keyframes heroImageAnimate {
  0% {
    transform: scale(1.1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes logoFill {
  from {
    fill: hsl(from #fff h s l / 0);
  }
  to {
    fill: hsl(from #fff h s l / 1);
  }
}

@keyframes shrinkReveal {
  from {
    transform: translate(-50%, -50%) scale(1.5);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes logoReposition {
  to {
    opacity: 1;
    width: 4.3rem;
    height: 4.3rem;
    top: 88px;
    left: calc(50% - 624px);
  }
}

@keyframes logoRepositionXS {
  to {
    opacity: 1;
    width: 4.3rem;
    height: 4.3rem;
    top: 88px;
    left: calc(50% - 3.27rem);
  }
}

@keyframes logoRepositionSM {
  to {
    opacity: 1;
    width: 4.3rem;
    height: 4.3rem;
    top: 88px;
    left: calc(50% - 20.25rem);
  }
}

@keyframes logoRepositionLG {
  to {
    opacity: 1;
    width: 4.3rem;
    height: 4.3rem;
    top: 88px;
    left: calc(50% - 27.75rem);
  }
}

@keyframes logoRepositionXL {
  to {
    opacity: 1;
    width: 4.3rem;
    height: 4.3rem;
    top: 88px;
    left: calc(50% - 33.36rem);
  }
}

@keyframes logoHide {
  to {
    opacity: 0;
  }
}