/* ═══════════════════════════════════════════════════════════════
   timeline.css — Teh Tarik Digital · Horizontal Timeline
   ═══════════════════════════════════════════════════════════════ */

/* ── HORIZONTAL TIMELINE ────────────────────────────────────── */
.section--timeline {
  max-width:      var(--page-width);
  padding-top:    0;
  padding-bottom: 5rem;
  padding-left:   28px;
  padding-right:  28px;
}

.htl {
  position:   relative;
  /*margin-top: 3rem;*/
  height:     460px;
}

.htl[data-count="4"] .htl-milestone[data-index="0"] { left: 11%; }
.htl[data-count="4"] .htl-milestone[data-index="1"] { left: 37%; }
.htl[data-count="4"] .htl-milestone[data-index="2"] { left: 63%; }
.htl[data-count="4"] .htl-milestone[data-index="3"] { left: 89%; }

/* axis bar */
.htl-axis {
  position:  absolute;
  top:       50%;
  left:      0; right: 0;
  height:    34px;
  transform: translateY(-50%);
  display:   flex;
  gap:       8px;
  z-index:   1;
}

.htl-axis-segment {
  position:   relative;
  flex:       1 1 0;
  height:     100%;
  background: rgba(41,121,255,0.08);
  border-top:    1px dotted rgba(41,121,255,0.4);
  border-bottom: 1px dotted rgba(41,121,255,0.4);
  overflow:   hidden;
}

.htl-axis-fill {
  position: absolute;
  inset:    0;
  background-image: linear-gradient(90deg,
    rgba(41,121,255,0.08)  0%,
    rgba(26,79,204,0.5)    9%,
    rgba(41,121,255,0.8)  21%,
    #2979ff               25%,
    rgba(41,121,255,0.8)  29%,
    rgba(26,79,204,0.5)   41%,
    rgba(41,121,255,0.08) 50%,
    rgba(26,79,204,0.5)   59%,
    rgba(41,121,255,0.8)  71%,
    #2979ff               75%,
    rgba(41,121,255,0.8)  79%,
    rgba(26,79,204,0.5)   91%,
    rgba(41,121,255,0.08) 100%);
  background-size:     200% 100%;
  background-position: 0% 0;
  clip-path:  inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(.4,0,.2,1);
}

.htl-axis-fill.show    { clip-path: inset(0 0 0 0); }
.htl-axis-fill.shimmer { animation: htl-shimmer 8s linear infinite; }

@keyframes htl-shimmer {
  0%   { background-position:   0% 0; }
  100% { background-position: -200% 0; }
}

.htl-axis-year {
  position:      absolute;
  inset:         0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-mono);
  font-weight:   500;
  font-size:     0.85rem;
  letter-spacing: 0.32em;
  color:         var(--text-primary);
  text-shadow:   0 1px 6px rgba(0,0,0,0.6);
  opacity:       0;
  transition:    opacity 0.5s ease;
  white-space:   nowrap;
  z-index:       2;
}

.htl-axis-year.show { opacity: 1; }

/* tick dots */
.htl-ticks-row {
  position:       absolute;
  left: 0; right: 0;
  height:         8px;
  z-index:        1;
  pointer-events: none;
}

.htl-ticks-top    { top: calc(50% - 17px - 14px); }
.htl-ticks-bottom { top: calc(50% + 17px + 14px); }

.htl-tick-dot {
  position:      absolute;
  width:         6px; height: 6px;
  border-radius: 50%;
  background:    var(--brand-blue);
  box-shadow:    0 0 6px rgba(41,121,255,0.7);
  opacity:       0;
  transition:    opacity 0.4s ease;
  transform:     translateX(-50%);
}

.htl-tick-dot.show { opacity: 1; }

/* milestone */
.htl-milestone {
  position:        absolute;
  z-index:         3;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
}

.htl-top {
  bottom:         calc(50% + 17px);
  flex-direction: column;
}

.htl-top .htl-node-wrap { order: 1; }
.htl-top .htl-content {
  order:     2;
  position:  absolute;
  left:      calc(100% + 14px);
  top:       50%;
  transform: translateY(-50%);
  text-align: left;
  width:     250px;
}
.htl-top .htl-stem { order: 3; align-self: center; }

.htl-bottom {
  top:            calc(50% + 17px);
  flex-direction: column;
}

.htl-bottom .htl-stem     { order: 1; align-self: center; }
.htl-bottom .htl-node-wrap { order: 2; }
.htl-bottom .htl-content {
  order:     3;
  position:  absolute;
  right:     calc(100% + 14px);
  top:       50%;
  transform: translateY(-50%);
  text-align: right;
  width:     250px;
}

.htl-top    { transform: translateX(-50%); }
.htl-bottom { transform: translateX(-50%); }

.htl-milestone[data-index="0"] .htl-node-wrap { width: 96px;  height: 96px;  }
.htl-milestone[data-index="0"] .htl-stem      { height: 60px; }
.htl-milestone[data-index="1"] .htl-node-wrap { width: 108px; height: 108px; }
.htl-milestone[data-index="1"] .htl-stem      { height: 80px; }
.htl-milestone[data-index="2"] .htl-node-wrap { width: 122px; height: 122px; }
.htl-milestone[data-index="2"] .htl-stem      { height: 56px; }
.htl-milestone[data-index="3"] .htl-node-wrap { width: 108px; height: 108px; }
.htl-milestone[data-index="3"] .htl-stem      { height: 80px; }

/* stem */
.htl-stem {
  width:    1px;
  background: rgba(41,121,255,0.18);
  position: relative;
}

.htl-stem-fill {
  position: absolute;
  left: 0; right: 0;
  height:   0%;
  overflow: hidden;
}

.htl-top .htl-stem-fill {
  top:        0;
  background: linear-gradient(180deg, var(--brand-blue) 0%, rgba(41,121,255,0.4) 60%, transparent 100%);
}

.htl-bottom .htl-stem-fill {
  bottom:     0;
  background: linear-gradient(0deg, var(--brand-blue) 0%, rgba(41,121,255,0.4) 60%, transparent 100%);
}

.htl-stem-fill.show { height: 100%; transition: height 0.5s cubic-bezier(.4,0,.2,1); }

.htl-stem-dot {
  position:   absolute;
  left:       50%;
  width:      9px; height: 9px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 8px rgba(41,121,255,0.8);
  transform:  translate(-50%, -50%) scale(0);
  opacity:    0;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease;
  z-index:    2;
}

.htl-top    .htl-stem-dot { bottom: 0; }
.htl-bottom .htl-stem-dot { top: 14px; }

.htl-stem-dot.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* node */
.htl-node-wrap {
  position: relative;
  display:  flex; align-items: center; justify-content: center;
}

.htl-node-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.htl-milestone[data-index="0"] .htl-node-wrap svg,
.htl-milestone[data-index="2"] .htl-node-wrap svg { transform: rotate(90deg); }

.htl-node-bg {
  fill:         rgba(5,8,15,0.7);
  stroke:       rgba(41,121,255,0.15);
  stroke-width: 1;
}

.htl-node-circle {
  fill:             none;
  stroke:           var(--brand-blue);
  stroke-width:     2.5;
  stroke-linecap:   round;
  stroke-dasharray: 277;
  stroke-dashoffset: 277;
  filter:           drop-shadow(0 0 6px rgba(41,121,255,0.55));
}

/* per-circle circumference: index 0 r=44→277, index 1&3 r=50→314, index 2 r=56→352 */
.htl-milestone[data-index="1"] .htl-node-circle { stroke-dasharray: 314; stroke-dashoffset: 314; }
.htl-milestone[data-index="2"] .htl-node-circle { stroke-dasharray: 352; stroke-dashoffset: 352; }
.htl-milestone[data-index="3"] .htl-node-circle { stroke-dasharray: 314; stroke-dashoffset: 314; }

.htl-node-circle.draw {
  transition:        stroke-dashoffset 0.9s cubic-bezier(.65,0,.35,1);
  stroke-dashoffset: 0;
}

.htl-milestone[data-index="1"] .htl-node-circle.draw,
.htl-milestone[data-index="3"] .htl-node-circle.draw {
  stroke-dasharray:  314;
  stroke-dashoffset: 0;
  transition:        stroke-dashoffset 0.9s cubic-bezier(.65,0,.35,1);
}

.htl-milestone[data-index="2"] .htl-node-circle.draw {
  stroke-dasharray:  352;
  stroke-dashoffset: 0;
  transition:        stroke-dashoffset 0.9s cubic-bezier(.65,0,.35,1);
}

.htl-node-label {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-mono);
  line-height:     1.1;
  text-align:      center;
}

.htl-yr  { font-size: 1.25rem;  font-weight: 500; color: var(--text-primary); letter-spacing: 0.02em; }
.htl-tag { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--brand-blue-dark); margin-top: 0.18rem; }

.htl-milestone[data-index="1"] .htl-yr,
.htl-milestone[data-index="3"] .htl-yr { font-size: 1.1rem; }
.htl-milestone[data-index="2"] .htl-yr { font-size: 1.2rem; }

/* content */
.htl-content {
  opacity:    0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.htl-top    .htl-content { transform: translateY(-50%) translateX(10px); }
.htl-bottom .htl-content { transform: translateY(-50%) translateX(-10px); }

.htl-milestone.revealed .htl-content {
  opacity:   1;
  transform: translateY(-50%) translateX(0);
}

.htl-stage {
  font-family:    var(--font-mono);
  font-size:      0.75rem;
  letter-spacing: 0.24em;
  color:          var(--brand-blue-dark);
  text-transform: uppercase;
  margin-bottom:  0.4rem;
}

.htl-content h3 {
  font-family:    var(--font-display);
  font-size:      0.9rem;
  font-weight:    700;
  color:          var(--text-primary);
  margin-bottom:  0.3rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.htl-content p {
  font-size:   0.78rem;
  line-height: 1.6;
  color:       var(--text-muted);
  margin-bottom: 0;
}

/* timeline responsive */
@media (max-width: 1100px) {
  .htl { height: auto; display: flex; flex-direction: column; gap: 2rem; }
  .htl[data-count="4"] .htl-milestone { position: static; transform: none; left: auto !important; }
  .htl-axis      { display: none; }
  .htl-ticks-row { display: none; }
  .htl-milestone { flex-direction: row !important; align-items: flex-start; gap: 1rem; width: 100%; }
  .htl-stem      { display: none; }
  .htl-node-wrap { flex-shrink: 0; }
  .htl-content   { position: static !important; transform: none !important; text-align: left !important;
                   width: auto !important; opacity: 1 !important; align-self: flex-start; order: 2 !important; }
  .htl-node-wrap { order: 1 !important; }
  .htl-content h3 { font-size: 0.9rem; }
}