.timeline-wrapper {
    max-width: 1200px;
    margin: auto;
  }
.timeline-trigger {
  height: 600px;
}
  svg {
    width: 100%;
    height: auto;
  }

  .line {
    stroke: #bbb;
    stroke-width: 4;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  .circle {
       -webkit-filter: drop-shadow( 2px 2px 3px rgba(0, 0, 0, .3));
  filter: drop-shadow( 2px 2px 3px rgba(0, 0, 0, .3));
  }

  .circle,.circle-text{
    opacity: 0;
    transform: scale(0);
  }
  .image {
    opacity: 0;
    
  }

  .circle-text {
    font-size: 16px;
    fill: #121111;
    text-anchor: middle;
    dominant-baseline: middle;
    font-weight: bold;
    opacity: 0;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }

  @keyframes appear {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes show {
    to {
      opacity: 1;
    }
  }

  .visible .line {
    animation: draw 0.2s forwards;
  }


  .visible .circle,
  .visible .circle-text{
    animation: appear 0.2s forwards;
  }
  
  .visible .image{
    animation: show 0.2s forwards;
  }

  .visible .line-1 { animation-delay: 0.2s; }
  .visible .line-2 { animation-delay: 0.6s; }
  .visible .line-3 { animation-delay: 1s; }
  .visible .line-4 { animation-delay: 1.4s; }
  .visible .line-5 { animation-delay: 1.8s; }
  .visible .line-6 { animation-delay: 2.2s; }
  .visible .line-7 { animation-delay: 2.6s; }
  .visible .line-8 { animation-delay: 3s; }
  .visible .line-9 { animation-delay: 3.4s; }
  .visible .line-10 { animation-delay: 3.8s; }

  .visible .circle:nth-of-type(1), .visible .circle-text:nth-of-type(1) { animation-delay: 0s; }
  .visible .circle:nth-of-type(2), .visible .circle-text:nth-of-type(2) { animation-delay: 0.4s; }
  .visible .circle:nth-of-type(3), .visible .circle-text:nth-of-type(3) { animation-delay: 0.8s; }
  .visible .circle:nth-of-type(4), .visible .circle-text:nth-of-type(4) { animation-delay: 1.2s; }
  .visible .circle:nth-of-type(5), .visible .circle-text:nth-of-type(5) { animation-delay: 1.6s; }
  .visible .circle:nth-of-type(6), .visible .circle-text:nth-of-type(6) { animation-delay: 2s; }
  .visible .circle:nth-of-type(7), .visible .circle-text:nth-of-type(7) { animation-delay: 2.4s; }
  .visible .circle:nth-of-type(8), .visible .circle-text:nth-of-type(8) { animation-delay: 2.8s; }
  .visible .circle:nth-of-type(9), .visible .circle-text:nth-of-type(9) { animation-delay: 3.2s; }
  .visible .circle:nth-of-type(10), .visible .circle-text:nth-of-type(10) { animation-delay: 3.6s; }
.visible .image { animation-delay: 4s; }