.hero-section, .hero-section-2, .hero-section-3 {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.hero-section-2::after,
.hero-section-3::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 98, 88, 0) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );

  z-index: 0;
  pointer-events: none;
}

/* startpage */
.hero-line{
  position: absolute;

  width: 140%;  
  height: 140%;

  top: -20%;    
  left: -35%;    

  z-index: 1;
  pointer-events: none;
}

.hero-section > :not(.hero-line) {
  position: relative;
  z-index: 2;
}

.path {
  stroke: #0A433E;
  stroke-width: 48;
  stroke-linecap: round;
  fill: none;

  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}

.top {
  animation: drawTop 12s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes drawTop {
  0% {
    stroke-dashoffset: 3000;
  }
  20% {
    stroke-dashoffset: 0;
  }
  30% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: -3000;
  }
  70% {
    stroke-dashoffset: -3000;
  }
  100% {
    stroke-dashoffset: -3000;
  }
}

.bottom {
  transform-origin: center;
  animation: drawBottom 12s ease-in-out reverse infinite;
  animation-delay: -5.5s;
}

@keyframes drawBottom {
  0% {
    stroke-dashoffset: 3000;
  }
  50% {
    stroke-dashoffset: 3000;
  }
  70% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -3000;
  }
}


/* other pages */
/* hero-section-2 */
.hero-line-2-path-1 {
  position: absolute;

  width: clamp(700px, 69vw, 1000px);
  height: auto;
  
  top: 0;
  left: 0;    
  
  z-index: 1;
  pointer-events: none;

  .draw-path {
    stroke-width: 48px;
  }
}

@media (max-width: 860px) {
  .hero-line-2-path-1 {
    display: none !important;
  }
}

.hero-line-2-path-2 {
  position: absolute;

  width: clamp(350px, 30vw, 433px);
  height: auto;

  top: 0;    
  right: 0;

  z-index: 1;
  pointer-events: none;

  .draw-path {
    stroke-width: 48px;
  }
}

/* hero-section-3 */
.hero-line-3-path-1 {
  position: absolute;

  width: clamp(350px, 85vw, 550px);
  height: auto;

  top: 0;    
  left: 0;

  z-index: 1;
  pointer-events: none;

  .draw-path {
    stroke-width: 48px;
  }
}

.hero-line-3-path-2 {
  position: absolute;

  width: clamp(350px, 85vw, 550px);
  height: auto;

  right: 0;
  bottom: 0;

  z-index: 1;
  pointer-events: none;

  .draw-path {
    stroke-width: 48px;
  }
}

.draw-path {
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;

  animation: draw 2.5s ease-in-out forwards;
}

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

.hero-section-2, .hero-section-3 {
  .wp-block-cover__inner-container {
    position: absolute;
    bottom: 48px;
    z-index: 2;
  }
}