/* ===== TIMELINE CONTAINER ===== */
.timeline-container {
  display: flex;
  gap: 33.5px;
  width: 100%;
  height: 134px;
  justify-content: center;
  font-weight: 900;
  font-size: 67px;
  margin-top: 50px;
}

/* ===== TIMELINE POINT ===== */
.timeline-point {
  transition-duration: 0.5s;
  border-radius: 50%;
  background: #121212;
  box-shadow: 13.4px 13.4px 40.2px #1c1f23, -13.4px -13.4px 40.2px #262b2f;
  display: grid;
  place-items: center;
  width: 134px;
  position: relative;
}

.timeline-point i {
  font-size: 48px;
}

/* ===== BORDER GRADIENT ===== */
.timeline-point::before {
  content: "";
  width: 200px;
  height: 200px;
  z-index: -1;
  border-radius: 50%;
  position: absolute;
  background: conic-gradient(
    rgba(140,82,255,0.7) var(--angle),
    rgba(0,191,99,0.7) 0deg 360deg
  );
  animation: rotateBorder 1s linear var(--delay) forwards;
}

.timeline-point:nth-child(odd)::before {
  transform: rotate(-90deg);
}

.timeline-point:nth-child(even)::before {
  transform: rotate(90deg) scaleY(-1);
}

/* ===== CUSTOM PROPERTY ===== */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ===== COLOR THEMES ===== */
.timeline-point:nth-child(1) { --delay: 0s; }
.timeline-point:nth-child(2) { --delay: 1s; }
.timeline-point:nth-child(3) { --delay: 2s; }
.timeline-point:nth-child(4) { --delay: 3s; }
.timeline-point:nth-child(5) { --delay: 4s; }

/* ===== POPUP ===== */
.popup {
  width: 321.6px;
  max-height: 0;
  display: grid;
  grid-template-columns: 16% 84%;
  position: absolute;
  color: white;
  border-radius: 30px;
  box-shadow: 6.7px 6.7px 21.4px #17191d, -6.7px -6.7px 21.4px #212529;
  transform-origin: bottom bottom;
  animation: expandPopup 0.5s linear calc(var(--delay) + 0.5s) forwards;
  background: linear-gradient(145deg, rgba(140,82,255,0.8), rgba(0,191,99,0.8));
}

.timeline-point:nth-child(odd) .popup { bottom: 221.1px; }
.timeline-point:nth-child(even) .popup { top: 221.1px; }

/* ===== POPUP NUMBER ===== */
.popup-number {
  grid-row: span 2;
  display: grid;
  font-size: 2rem;
  font-weight: bold;
  place-items: center;
  cursor: auto;
  animation: fadeIn 0.5s linear calc(var(--delay) + 0.7s) forwards;
  opacity: 0;
  height: 100%;
}

/* ===== POPUP TITLE ===== */
.popup-title {
  background: linear-gradient(90deg, #8c52ff, #00bf63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 6.7px;
  font-size: 20.1px;
  font-weight: 900;
}

/* ===== POPUP DETAILS ===== */
.popup-details {
  padding: 20.1px;
  background: linear-gradient(145deg, #16181b, #22262b);
  border-radius: 30px;
  opacity: 0;
  font-weight: 500;
  user-select: none;
  cursor: auto;
  overflow: hidden;
  font-size: 0.8rem;
  text-align: justify;
  margin: 3.35px;
  animation: fadeIn 0.5s linear calc(var(--delay) + 0.7s) forwards;
}

/* ===== POPUP LINE ===== */
.popup::before {
  content: "";
  width: 6.7px;
  height: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #8c52ff, #00bf63);
  position: absolute;
  left: 50%;
  top: -41.9px;
  display: flex;
  animation: drawLine 0.5s linear var(--delay) forwards;
}

.timeline-point:nth-child(odd) .popup:before {
  top: calc(100% + 47px);
  transform: rotateX(180deg);
  transform-origin: top;
}

/* ===== HOVER EFFECT ===== */
.timeline-point:hover {
  background: linear-gradient(145deg, rgba(140,82,255,0.8), rgba(0,191,99,0.8));
  color: white;
}

/* ===== ANIMATIONS ===== */
@keyframes rotateBorder { from { --angle:0deg; } to { --angle:180deg; } }
@keyframes expandPopup { 0%{max-height:0;} 100%{max-height:200px;} }
@keyframes drawLine { 0%{height:0%;opacity:0;} 100%{height:33.5px;opacity:1;} }
@keyframes fadeIn { to { opacity:1; } }

/* ===== RESPONSIVE ===== */
/*@media (max-width:1050px){
  .timeline-container{flex-direction:column;height:auto;width:100%;padding:100px 0px;}
  .timeline-point{height:134px;margin:0 auto;position:relative;}
  .timeline-point:nth-child(odd)::before,.timeline-point:nth-child(even)::before{transform:rotate(0deg);}
  .timeline-point .popup:before{display:none;}
  .timeline-point:nth-child(odd) .popup{bottom:auto;right:-370.1px;}
  .timeline-point:nth-child(even) .popup{top:auto;right:-370.1px;}
}*/
@media (max-width:650px){
  .timeline-container{flex-direction:column;height:auto;width:100%;padding:100px 0px;}
  .timeline-point{height:134px;margin:0 auto;position:relative;}
 /* .timeline-point:nth-child(odd)::before,.timeline-point:nth-child(even)::before{transform:rotate(0deg);}*/
  .timeline-point .popup:before{display:none;}
  .timeline-point:nth-child(odd) .popup{bottom:auto;}
  .timeline-point:nth-child(even) .popup{top:auto;}
}