/* =========================================================
   VITA UNIKA — DIVIDER SCROLL DOT V3

   Wave      = infinite loop from V2
   Dot       = controlled by page scroll
   ========================================================= */


/* ---------------------------------------------------------
   Scroll-controlled dot
   --------------------------------------------------------- */

.vita-loop-divider{
  --vita-dot-x:8%;
}


.vita-loop-divider .vita-loop-divider__badge{

  left:
    var(--vita-dot-x) !important;

  animation:
    none !important;

  transform:
    translate3d(-50%,-50%,0) !important;

  will-change:
    left;

  transition:
    left .07s linear !important;
}


/* =========================================================
   KEEP THE DOT ALIVE
   Only the glow pulses — position does not animate.
   ========================================================= */

.vita-loop-divider
.vita-loop-divider__badge::after{

  content:"";

  position:absolute;

  inset:-7px;

  border-radius:50%;

  border:
    1px solid
    rgba(11,121,120,.12);

  box-shadow:
    0 0 18px
    rgba(11,121,120,.10);

  opacity:.25;

  pointer-events:none;

  animation:
    vitaScrollDotHalo
    2.4s
    ease-in-out
    infinite;
}


@keyframes vitaScrollDotHalo{

  0%,
  100%{

    transform:
      scale(.82);

    opacity:.18;

  }


  50%{

    transform:
      scale(1.28);

    opacity:.58;

  }

}


/* =========================================================
   While user is actively scrolling through divider,
   make the dot slightly brighter.
   ========================================================= */

.vita-loop-divider.is-scroll-active
.vita-loop-divider__badge{

  box-shadow:

    0 0 0 5px
    rgba(255,255,255,.76),

    0 0 20px
    rgba(11,121,120,.30),

    0 0 38px
    rgba(180,141,66,.20) !important;
}


/* =========================================================
   Reduced motion
   Position still follows scroll,
   only pulse animation is disabled.
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .vita-loop-divider
  .vita-loop-divider__badge{

    transition:none !important;

  }


  .vita-loop-divider
  .vita-loop-divider__badge::after{

    animation:none !important;

  }

}