/* Timeline Section Styles - Career progression visualization - Mobile First */
.timeline-section {
  background: var(--timeline-section-bg);
  position: relative;
  overflow: hidden;

  & .section-header {
    /* Box Model */
    margin-bottom: 2rem;

    & p {
      /* Box Model */
      margin-bottom: 0;
    }
  }

  & .timeline-container {
    /* Positioning & Display */
    position: relative;

    /* Box Model */
    max-width: 100%;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 0;

    /* The line of the timeline */
    &::before {
      /* Positioning & Display */
      content: "";
      position: absolute;
      height: 120%;
      width: 4px;
      left: 40px;
      top: 12px;

      /* Colors & Backgrounds */
      background: linear-gradient(135deg, var(--accent-color) 0%, var(--background-color) 100%);
    }

    & .timeline-item {
      /* Positioning & Display */
      position: relative;

      /* Box Model */
      width: 100%;
      padding: 0 0 40px 30px;

      /* Typography */
      text-align: left;

      /* Animation properties */
      opacity: 1;
      transition: transform 0.6s ease;

      &.animate-in {
        opacity: 1;

        & .timeline-card {
          animation: fadeInUp 0.8s forwards;
        }
      }

      & .timeline-date {
        display: flex;
        align-items: baseline;
        gap: 0.2rem;
        justify-content: flex-start;
        flex-direction: row;

        /* Positioning & Display */
        position: relative;
        top: 0;
        left: 0;
        transform: none;

        /* Box Model */
        margin: 0 8px 0.5rem 8px;
        width: auto;

        /* Typography */
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--accent-color);
        text-align: left;

        & .timeline-period {
          /* Positioning & Display */
          margin: 0px 0.5rem;
        }
      }

      & .timeline-dot {
        /* Positioning & Display */
        position: absolute;
        width: 14px;
        height: 14px;
        top: 5px;
        left: 3px;
        z-index: 2;

        /* Box Model */
        border-radius: 50%;

        /* Colors & Backgrounds - Three-layer design */
        background-color: var(--primary-color);
        /* Inner dot */
        border: 3px solid var(--background-color);
        /* Middle border with background color */
        box-shadow: 0 0 0 2px var(--accent-color);
        /* Outer border with accent color */
      }

      /* Opacity progression for timeline dots based on position */
      &:nth-child(1) .timeline-dot {
        background: var(--highlight-color);
      }

      &:nth-child(2) .timeline-dot {
        opacity: 0.98;
      }

      &:nth-child(3) .timeline-dot {
        opacity: 0.96;
      }

      &:nth-child(4) .timeline-dot {
        opacity: 0.94;
      }

      &:nth-child(5) .timeline-dot {
        opacity: 0.8;
      }

      &:nth-child(6) .timeline-dot {
        opacity: 0.7;
      }

      & .timeline-card {
        /* Adding display flex to allow layout with company image */
        display: flex;
        flex-direction: column;
        position: relative;
        /* Provide some space for content */
        margin: 0 8px 0.5rem 8px;
        border-radius: 8px;
        background-color: var(--card-background);
        box-shadow: var(--card-shadow);

        /* Effects & Transitions */
        transition: all 0.3s ease;

        /* Company image styles */
        & .timeline-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 8px;

          & .company-image {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 6px;
            object-fit: cover;
            background-color: white;
            border: 1px solid var(--border-color);
          }

          & .timeline-title {
            flex: 1;

            & h3 {
              /* Box Model */
              margin-bottom: 0.1rem;

              /* Typography */
              font-size: 1rem;
              font-weight: 600;
            }

            & h4 {
              /* Box Model */
              margin-bottom: 0;

              /* Typography */
              font-size: 0.9rem;
              font-weight: 500;
              color: var(--secondary-text);
            }
          }
        }

        & p {
          /* Box Model */
          margin-top: 0.5rem;
          margin-bottom: 0;

          /* Typography */
          font-size: 0.85rem;
          line-height: 1.4;
          color: var(--secondary-text);
        }
      }
    }
  }
}

/* Tablet styles */
@media (min-width: 768px) {
  .timeline-section {
    & .timeline-container {
      /* Box Model */
      max-width: 840px;
      padding: 0.5rem 4rem;

      &::before {
        /* Positioning & Display */
        top: 16px;
        left: calc(50% - 1px);
      }

      & .timeline-item {
        &:not(:first-child) {
          /* Box Model */
          margin-top: -42px;
        }

        &:last-child {
          /* Box Model */
          margin-bottom: 0;
        }

        &:nth-child(odd) {
          /* Box Model */
          padding-right: calc(50% + 30px);
          padding-left: 0;
          padding-bottom: 0;

          /* Typography */
          text-align: right;

          & .timeline-header {
            flex-direction: row-reverse;
          }

          & .timeline-date {
            justify-content: flex-start;
            flex-direction: row-reverse;
          }

          & .timeline-dot {
            /* Positioning & Display */
            left: auto;
            right: calc(50% - 8px);
          }
        }

        /* The right ones */
        &:nth-child(even) {
          /* Box Model */
          padding-left: calc(50% + 30px);
          padding-bottom: 0;

          /* Typography */
          text-align: left;

          & .timeline-dot {
            /* Positioning & Display */
            left: calc(50% - 6px);
          }
        }

        &:nth-child(odd).animate-in {
          animation: fadeInRight 0.8s forwards;
        }

        &:nth-child(even).animate-in {
          animation: fadeInLeft 0.8s forwards;
        }

        &.animate-in .timeline-card {
          animation: none;
        }
      }
    }
  }
}

/* Desktop styles */
@media (min-width: 992px) {
  .timeline-section {
    & .timeline-container {
      &::before {
        top: 26px;
      }

      &:nth-child(odd) {
        & .timeline-dot {
          right: calc(50% - 8px);
        }
      }

      /* The right ones */
      &:nth-child(even) {
        & .timeline-dot {
          left: calc(50% - 8px);
        }
      }


      & .timeline-item {
        & .timeline-card {
          & h3 {
            /* Typography */
            font-size: 1.05rem;
          }

          & h4 {
            /* Typography */
            font-size: 0.95rem;
          }

          & p {
            /* Typography */
            font-size: 0.9rem;
          }
        }
      }
    }
  }
}

/* Desktop styles */
@media (min-width: 1200px) {
  .timeline-section {
    & .timeline-container {
      &::before {
        top: 20px;
      }
    }
  }
}

/* Animation keyframes for timeline items */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}