/* =========================================================
   VITA — SECTION DIVIDER WAVE V2
   Minimal / premium / attention-grabbing / soft loop
========================================================= */

.vita-loop-divider{
  position: relative;
  padding: 42px 0 36px;
  background: #fff;
  overflow: hidden;
}

.vita-loop-divider__shell{
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  position: relative;
}

.vita-loop-divider__track{
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vita-loop-divider__line{
  position: relative;
  width: 100%;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  opacity: .96;
}

.vita-loop-divider__line::before{
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 520px 48px;
  background-position: 0 50%;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='520' height='48' viewBox='0 0 520 48'>\
<defs>\
<linearGradient id='g' x1='0' y1='0' x2='1' y2='0'>\
<stop offset='0%' stop-color='rgba(180,141,66,0.00)'/>\
<stop offset='14%' stop-color='rgba(180,141,66,0.32)'/>\
<stop offset='50%' stop-color='rgba(11,121,120,0.95)'/>\
<stop offset='86%' stop-color='rgba(180,141,66,0.32)'/>\
<stop offset='100%' stop-color='rgba(180,141,66,0.00)'/>\
</linearGradient>\
</defs>\
<path d='M0 24 C43 24 43 11 86 11 C129 11 129 37 173 37 C216 37 216 14 260 14 C303 14 303 34 346 34 C389 34 389 18 433 18 C476 18 476 24 520 24' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round'/>\
</svg>");
  animation: vitaWaveTravel 8.5s linear infinite;
}

.vita-loop-divider__line::after{
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at center,
      rgba(11,121,120,.11) 0%,
      rgba(11,121,120,.06) 28%,
      rgba(11,121,120,0) 72%);
  filter: blur(12px);
  animation: vitaWaveGlow 6.2s ease-in-out infinite;
  pointer-events: none;
}

.vita-loop-divider__badge{
  position: absolute;
  left: 12%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.75) 24%,
      rgba(180,141,66,.86) 58%,
      rgba(11,121,120,.92) 100%);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.72),
    0 0 18px rgba(11,121,120,.22),
    0 0 32px rgba(180,141,66,.16);
  animation: vitaWaveDot 8.5s ease-in-out infinite;
  will-change: left, transform;
}

@keyframes vitaWaveTravel{
  from{
    background-position: 0 50%;
  }
  to{
    background-position: -520px 50%;
  }
}

@keyframes vitaWaveGlow{
  0%,100%{
    opacity: .42;
    transform: translateY(-50%) scaleX(.94);
  }
  50%{
    opacity: .82;
    transform: translateY(-50%) scaleX(1.03);
  }
}

@keyframes vitaWaveDot{
  0%{
    left: 12%;
    transform: translate(-50%, -50%) translateY(0);
  }
  25%{
    left: 34%;
    transform: translate(-50%, -50%) translateY(-4px);
  }
  50%{
    left: 54%;
    transform: translate(-50%, -50%) translateY(3px);
  }
  75%{
    left: 76%;
    transform: translate(-50%, -50%) translateY(-3px);
  }
  100%{
    left: 88%;
    transform: translate(-50%, -50%) translateY(0);
  }
}

/* subtle entry */
.vita-loop-divider.is-visible .vita-loop-divider__line,
.vita-loop-divider.is-visible .vita-loop-divider__badge{
  animation-play-state: running;
}

@media (max-width: 991px){
  .vita-loop-divider{
    padding: 34px 0 28px;
  }

  .vita-loop-divider__shell{
    width: min(100%, calc(100% - 32px));
  }

  .vita-loop-divider__track,
  .vita-loop-divider__line{
    height: 40px;
  }

  .vita-loop-divider__line::before{
    background-size: 420px 40px;
  }

  .vita-loop-divider__badge{
    width: 12px;
    height: 12px;
    box-shadow:
      0 0 0 4px rgba(255,255,255,.72),
      0 0 14px rgba(11,121,120,.18),
      0 0 24px rgba(180,141,66,.14);
  }
}

@media (max-width: 640px){
  .vita-loop-divider{
    padding: 28px 0 24px;
  }

  .vita-loop-divider__track,
  .vita-loop-divider__line{
    height: 34px;
  }

  .vita-loop-divider__line::before{
    background-size: 360px 34px;
  }
}