/* time is not real, but real is also not real? just kidding bud...or not? Coffee time */
body {
  overflow-y: auto !important;
  height: 100%;
}

.about-content {
  max-width: 900px;
  padding: 50px 20px 100px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .about-content { padding: 20px 20px 80px; }
}

/* ---------- Bio header ---------- */
.bio-section {
  display: flex;
  align-items: center;
  gap: 40px;
}
.bio-photo img {
  max-width: 250px;
  border-radius: 10%;
}
@media screen and (max-width: 768px) {
  .bio-section { flex-direction: column; }
}

/* ---------- Timeline (shared) ---------- */
.timeline-container {
  position: relative;
  padding: 40px 0;

  /* Desktop tunables */
  --spine-desktop: 50%;
  --card-w-desktop: 45%;
  --connector-w-desktop: calc(5% - 10px); /* 50% - 45% minus 10px breathing room */
}

/* Vertical spine */
.timeline-line {
  position: absolute;
  left: var(--spine-desktop);
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
}
.timeline-line::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    rgba(255, 60, 172, 0.5),
    rgba(120, 75, 160, 0.5),
    rgba(43, 134, 197, 0.5),
    rgba(31, 184, 251, 0.5)
  );
  opacity: 0.7;
  filter: blur(1px);
}

/* Items */
.timeline-item {
  position: relative;
  margin-bottom: 80px;
  width: 100%;
  display: flex;
}

/* Alternate sides (desktop only behavior) */
.timeline-item:nth-child(even) { justify-content: flex-end; }

/* Cards */
.timeline-content {
  width: var(--card-w-desktop);
  padding: 30px;
  background: rgba(15, 15, 20, 0.5);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 10px rgba(31, 184, 251, 0.3);
}

/* Desktop markers (DOM elements) */
.timeline-marker {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1FB8FB;
  transform: translateX(-50%);
  z-index: 10;
  border: 3px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(31, 184, 251, 0.3);
}
.timeline-item.work .timeline-marker         { background: #FF3CAC; box-shadow: 0 0 0 3px rgba(255, 60, 172, 0.3); }
.timeline-item.certification .timeline-marker{ background: #784BA0; box-shadow: 0 0 0 3px rgba(120, 75, 160, 0.3); }
.timeline-item.achievement .timeline-marker  { background: #1FB8FB; box-shadow: 0 0 0 3px rgba(31, 184, 251, 0.3); }

/* Desktop connectors (DOM elements) */
.timeline-connector {
  position: absolute;
  top: 38px;
  width: var(--connector-w-desktop);
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 1;
}
.timeline-item:nth-child(odd)  .timeline-connector { left:  var(--card-w-desktop); }
.timeline-item:nth-child(even) .timeline-connector { right: var(--card-w-desktop); }

/* Chips */
.timeline-date {
  position: absolute;
  top: -12px;
  background: rgba(31, 184, 251, 0.2);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 5;
}
.timeline-item:nth-child(odd)  .timeline-date { right: 0; }
.timeline-item:nth-child(even) .timeline-date { left:  0; }
.timeline-item.work         .timeline-date { background: rgba(255, 60, 172, 0.2); }
.timeline-item.certification.timeline-item .timeline-date,
.timeline-item.certification .timeline-date { background: rgba(120, 75, 160, 0.2); }
.timeline-item.achievement  .timeline-date { background: rgba(31, 184, 251, 0.2); }

.timeline-type {
  position: absolute;
  top: -12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
}
.timeline-item:nth-child(odd)  .timeline-type { left:  0; }
.timeline-item:nth-child(even) .timeline-type { right: 0; }
.timeline-item.work         .timeline-type { color: #FF3CAC; }
.timeline-item.certification.timeline-item .timeline-type,
.timeline-item.certification .timeline-type { color: #784BA0; }
.timeline-item.achievement  .timeline-type { color: #1FB8FB; }

/* Text inside cards */
.timeline-org { font-weight: 500; color: rgba(31, 184, 251, 0.9); margin-bottom: 15px; font-size: 1.05rem; }
.timeline-content h3 { margin-top: 10px; margin-bottom: 15px; color: #fff; font-size: 1.5rem; }
.timeline-content p  { margin-bottom: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.timeline-content ul { padding-left: 20px; margin-top: 15px; }
.timeline-content ul li { margin-bottom: 8px; color: rgba(255, 255, 255, 0.7); }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.timeline-item {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}
/* Stagger */
.timeline-item:nth-child(1) { animation-delay: 0.2s; }
.timeline-item:nth-child(2) { animation-delay: 0.35s; }
.timeline-item:nth-child(3) { animation-delay: 0.5s; }
.timeline-item:nth-child(4) { animation-delay: 0.65s; }
.timeline-item:nth-child(5) { animation-delay: 0.8s; }
.timeline-item:nth-child(6) { animation-delay: 0.95s; }
.timeline-item:nth-child(7) { animation-delay: 1.1s; }
.timeline-item:nth-child(8) { animation-delay: 1.25s; }
.timeline-item:nth-child(9) { animation-delay: 1.4s; }

/* Marker hover (desktop) */
.timeline-marker { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.timeline-item:hover .timeline-marker { transform: translateX(-50%) scale(1.2); box-shadow: 0 0 0 4px rgba(31, 184, 251, 0.5), 0 0 15px rgba(31, 184, 251, 0.5); }
.timeline-item.work:hover .timeline-marker { box-shadow: 0 0 0 4px rgba(255, 60, 172, 0.5), 0 0 15px rgba(255, 60, 172, 0.5); }
.timeline-item.certification:hover .timeline-marker { box-shadow: 0 0 0 4px rgba(120, 75, 160, 0.5), 0 0 15px rgba(120, 75, 160, 0.5); }
.timeline-item.achievement:hover .timeline-marker { box-shadow: 0 0 0 4px rgba(31, 184, 251, 0.5), 0 0 15px rgba(31, 184, 251, 0.5); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
::-webkit-scrollbar-thumb { background: rgba(31, 184, 251, 0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(31, 184, 251, 0.7); }

/* ---------- Mobile (single optimized block) ---------- */
@media (max-width: 768px) {
  /* Tunables (wider mobile layout by default) */
  .timeline-container {
    --spine-x: 1px;     /* vertical line position from left edge */
    --gutter:  40px;     /* distance from spine to card edge (~1/3 shorter) */
    --card-left: calc(var(--spine-x) + var(--gutter));

    --dot: 18px;         /* dot size */
    --dot-r: 9px;        /* dot radius */
    --dot-top: 30px;     /* y-position of dot relative to card */
    --chip-offset: -12px;/* chips overlap above card */
    --card-pad-x: 16px;  /* inner padding reference for chips */
  }

  /* Geometry */
  .timeline-line { left: var(--spine-x) !important; }
  .timeline-item {
    position: relative;
    display: block !important;
    margin: 0 0 56px 0 !important;
    padding-left: var(--card-left) !important; /* reserve the left rail */
    justify-content: flex-start !important;
  }
  .timeline-item:nth-child(even) { justify-content: flex-start !important; }

  /* Card */
  .timeline-content {
    position: relative;
    width: auto !important;
    margin: 0 !important;
    overflow: visible; /* allow chips to hover */
  }

  /* Hide desktop dot/connector on mobile; we’ll rebuild them as pseudos */
  .timeline-marker, .timeline-connector { display: none !important; }

  /* Neutralize any desktop alternation offsets for chips */
  .timeline-item:nth-child(odd) .timeline-type,
  .timeline-item:nth-child(even) .timeline-type,
  .timeline-item:nth-child(odd) .timeline-date,
  .timeline-item:nth-child(even) .timeline-date {
    left: auto !important; right: auto !important;
  }

  /* Chips pinned to card edges (match desktop feel) */
  .timeline-item .timeline-content .timeline-type {
    position: absolute;
    top: var(--chip-offset) !important;
    left: var(--card-pad-x) !important;
    right: auto !important;
    margin: 0 !important;
    white-space: nowrap;
    z-index: 5;
  }
  .timeline-item .timeline-content .timeline-date {
    position: absolute;
    top: var(--chip-offset) !important;
    right: var(--card-pad-x) !important;
    left: auto !important;
    margin: 0 !important;
    white-space: nowrap;
    z-index: 5;
  }

  /* Rebuild dot + connector as card-anchored pseudos (perfect alignment) */
  .timeline-content::before,
  .timeline-content::after { content: ""; position: absolute; }

  /* Layering: connector behind the dot for nicer depth */
  .timeline-content::after { z-index: 3; }
  .timeline-content::before { z-index: 4; }

  /* Dot (centered on spine; ring glow, no border to avoid center shift) */
  .timeline-content::before {
    top: var(--dot-top);
    left: calc(-1 * var(--gutter) - var(--dot-r)); /* center = -gutter */
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: #1FB8FB;
    box-shadow:
      0 0 0 2px rgba(0,0,0,0.55),
      0 0 0 5px rgba(31,184,251,0.28);
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
  }
  .timeline-item.work .timeline-content::before          { background:#FF3CAC; box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 0 5px rgba(255,60,172,0.28); }
  .timeline-item.certification .timeline-content::before { background:#784BA0; box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 0 5px rgba(120,75,160,0.28); }
  .timeline-item.achievement .timeline-content::before   { background:#1FB8FB; box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 0 5px rgba(31,184,251,0.28); }

  /* Connector (through dot center to card edge) */
  .timeline-content::after {
    top: calc(var(--dot-top) + var(--dot-r));
    transform: translateY(-50%);
    left: calc(-1 * var(--gutter));
    width: var(--gutter);
    height: 2px;
    background: rgba(255,255,255,0.2);
  }

  /* Pointer hover (tablets with cursor) */
  @media (hover: hover) and (pointer: fine) {
    .timeline-item:hover .timeline-content::before {
      transform: scale(1.12);
      box-shadow:
        0 0 0 2px rgba(0,0,0,0.55),
        0 0 0 7px rgba(31,184,251,0.38);
    }
  }
  /* Touch feedback */
  .timeline-item:active .timeline-content::before { transform: scale(1.08); }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .timeline-content::before { transition: none; }
    .timeline-item:hover .timeline-content::before,
    .timeline-item:active .timeline-content::before { transform: none; }
  }
}