/* ========================= */
/* TIMELINE SECTION */
/* ========================= */

#timeline {
  padding: 4rem 0;
}

.timeline-wrapper {
  margin-top: 2rem;
  overflow-x: auto;
  overflow-y: hidden;

  padding-bottom: 16px;

  /* smooth scroll */
  scroll-behavior: smooth;

  /* snap effect */
  scroll-snap-type: x mandatory;

  cursor: grab;
}

.timeline-wrapper:active {
  cursor: grabbing;
}



.timeline {
  display: flex;
  gap: 60px;
  width: max-content;
  position: relative;
  padding: 40px 10px;
}

/* center line */
.timeline::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  height: 3px;
  width: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(56, 189, 248, 0.8),
    rgba(56, 189, 248, 0.4),
    transparent
  );

  filter: blur(0.5px);
}

/* ========================= */
/* ITEM */
/* ========================= */

.timeline-item {
  position: relative;
  min-width: 280px;
  scroll-snap-align: start;
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 19px;
  width: 2px;
  height: 30px;

  background: linear-gradient(
    to bottom,
    rgba(56, 189, 248, 0.6),
    transparent
  );
}



/* glowing dot */
.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;

  position: absolute;
  top: 32px;
  left: 12px;

  background: radial-gradient(
    circle,
    #38bdf8 0%,
    #0ea5e9 40%,
    transparent 70%
  );

  box-shadow:
    0 0 0 6px rgba(56, 189, 248, 0.08),
    0 0 20px rgba(56, 189, 248, 0.7),
    0 0 40px rgba(56, 189, 248, 0.3);

  z-index: 2;
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.3);
  box-shadow:
    0 0 0 8px rgba(56, 189, 248, 0.12),
    0 0 30px rgba(56, 189, 248, 1),
    0 0 60px rgba(56, 189, 248, 0.4);
}

.timeline-item:hover .timeline-content {
  transform: translateY(-8px);

  border-color: rgba(56, 189, 248, 0.4);

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(56, 189, 248, 0.15);
}

/* timeline-item animation */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  animation: timelineFade 0.6s ease forwards;
}

.timeline-item:nth-child(2) { animation-delay: 0.1s; }
.timeline-item:nth-child(3) { animation-delay: 0.2s; }
.timeline-item:nth-child(4) { animation-delay: 0.3s; }

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

/* ========================= */
/* CARD */
/* ========================= */

.timeline-content {
  position: relative;
  margin-top: 80px;
  padding: 1.6rem;

  border-radius: 18px;

  background: linear-gradient(
    145deg,
    rgba(2, 6, 23, 0.9),
    rgba(2, 6, 23, 0.6)
  );

  backdrop-filter: blur(10px);

  border: 1px solid rgba(56, 189, 248, 0.15);

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(56, 189, 248, 0.05);

  transition: all 0.35s ease;
}

/* hover = same behavior as project-card */
.timeline-content:hover {
  transform: translateY(-6px);

  box-shadow:
    0 20px 45px rgba(56, 189, 248, 0.25),
    inset 0 0 0 1px rgba(56, 189, 248, 0.35);

  border-color: var(--accent);
}

/* subtle animated border like project-card */
.timeline-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(56, 189, 248, 0.6),
    transparent
  );

  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.timeline-content:hover::before {
  opacity: 1;
}

/* ========================= */
/* TEXT */
/* ========================= */

.timeline-date {
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.timeline-sem {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

/* skills list */
.timeline-content ul {
  padding-left: 18px;
}

.timeline-content li {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.5;
}

/* ========================= */
/* SCROLLBAR (optional but clean) */
/* ========================= */

.timeline-wrapper::-webkit-scrollbar {
  height: 6px;
}

.timeline-wrapper::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
  border-radius: 10px;
}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 600px) {
  .timeline {
    gap: 40px;
  }

  .timeline-item {
    min-width: 240px;
  }
}