#milestones {
  padding-bottom: 5dvh !important;
}

.timeline-container {
  position: relative;
  width: 90dvw;
  margin: 0 auto;
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  gap: 2dvh;

  .track-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--muted-light);
    transform: translateX(-50%);
    z-index: 1;
  }

  .fill-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 6px;
    background-color: var(--text);
    transform: translateX(-50%);
    z-index: 2;
    height: 0px;
    will-change: height;
  }

  .scrolling-square {
    position: absolute;
    left: 50%;
    top: 0;
    width: 12px;
    height: 12px;
    background-color: var(--text);
    transform: translateX(-50%);
    z-index: 3;
    will-change: transform;
  }

  .milestone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    position: relative;
    padding: 0;

    .content {
      padding: 0 2rem;
      cursor: pointer;
    }

    .date {
      margin: 0;
      position: relative;
      display: block;
      padding-bottom: 0.5rem;
      font-family: "Geist Mono", monospace;
      color: var(--text);
      transition: padding 0.4s ease;
      font-weight: 600;
      transform: scaleY(1.1);

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background-color: var(--text);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        margin: 0;
      }
    }

    &:nth-child(odd) .content {
      grid-column: 1 / 2;
      text-align: right;
    }

    &:nth-child(odd) .date {
      padding-right: 10dvw;

      &::after {
        transform-origin: right;
      }
    }

    &:nth-child(odd) .content:hover .date,
    &:nth-child(odd) .content.is-active .date {
      padding-right: 0;

      &::after {
        transform: scaleX(1);
      }
    }

    &:nth-child(even) .content {
      grid-column: 2 / 3;
      text-align: left;
    }

    &:nth-child(even) .date {
      padding-left: 10dvw;

      &::after {
        transform-origin: left;
      }
    }

    &:nth-child(even) .content:hover .date,
    &:nth-child(even) .content.is-active .date {
      padding-left: 0;

      &::after {
        transform: scaleX(1);
      }
    }

    .info {
      margin: 0;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(10px);
      transition: all 0.4s ease;
      color: var(--muted-dark);

      h4 {
        font-size: clamp(.8rem, 3dvh, 3rem);
        margin: 0;
        font-weight: 600;
        color: #2d2c2c;
        font-family: "Geist Mono", monospace;
      }

      ul {
        font-size: clamp(.5rem, 2.6dvh, 2rem);
        color: #5b5b5b;
        letter-spacing: -0.03rem;
        font-weight: 500;
        font-family: "Inter", sans-serif;
        margin: 0;
        padding: 0;
        padding-top: 0.5rem;
        list-style: none;
      }

      li {
        margin-bottom: 0.3rem;
        display: flex;
        gap: 0.5rem;
      }
    }

    &:nth-child(odd) .info li {
      justify-content: flex-end;
      text-align: right;

      &::after {
        content: "•";
        color: var(--muted-dark);
      }
    }

    &:nth-child(even) .info li {
      justify-content: flex-start;
      text-align: left;

      &::before {
        content: "•";
        color: var(--muted-dark);
      }
    }

    .content:hover .info,
    .content.is-active .info {
      opacity: 1;
      max-height: 300px;
      transform: translateY(0);
      margin-top: 1rem;
    }
  }
}

@media (max-width: 900px) {
  .timeline-container {
    .track-line,
    .fill-line,
    .scrolling-square {
      left: 20px;
    }

    .milestone {
      grid-template-columns: 1fr;

      .content {
        padding: 0 1rem 0 3.5rem;
      }

      .date {
        font-size: 0.9rem;
      }

      .info {
        font-size: 0.95rem;
      }

      .info h4 {
        font-size: 1rem;
      }

      .info ul,
      .info li {
        font-size: 0.95rem;
      }

      &:nth-child(odd) .content {
        grid-column: 1 / -1;
        text-align: left;
      }

      &:nth-child(odd) .date {
        padding-right: 0;
        padding-left: 10dvw;

        &::after {
          transform-origin: left;
        }
      }

      &:nth-child(odd) .content:hover .date,
      &:nth-child(odd) .content.is-active .date {
        padding-right: 0;
        padding-left: 0;
      }

      &:nth-child(odd) .info li {
        justify-content: flex-start;
        text-align: left;

        &::before {
          content: "•";
          color: var(--muted-dark);
        }

        &::after {
          content: none;
        }
      }
    }
  }
}