/* V7 — animated light trail around the turning-point callout */
.turning-point {
  position: relative;
  isolation: isolate;
  border: 1px solid #b9dfe4;
  box-shadow: 0 12px 30px rgba(24, 122, 199, .06);
}

.turning-point::before,
.turning-point::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 286deg,
    rgba(55, 180, 200, .16) 300deg,
    #ffffff 314deg,
    #8defff 326deg,
    #0969d7 338deg,
    transparent 351deg 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: turning-point-light 4.2s linear infinite;
}

.turning-point::before {
  z-index: 0;
}

.turning-point::after {
  z-index: -1;
  padding: 3px;
  filter: blur(7px);
  opacity: .55;
  animation-duration: 4.2s;
}

.turning-point > * {
  position: relative;
  z-index: 1;
}

@keyframes turning-point-light {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .turning-point::before,
  .turning-point::after {
    animation: none;
  }
}