/* Added only to existing informational lists. No layout, cursor or link changes. */
.segment-page:not(.home-page) .service-list > .solution-effect,
.institutional-page:not(.home-page) .service-list > .solution-effect,
.contact-page:not(.home-page) .contact-guidance > .solution-effect {
  position: relative;
}

.segment-page:not(.home-page) .service-list > .solution-effect::before,
.institutional-page:not(.home-page) .service-list > .solution-effect::before,
.contact-page:not(.home-page) .contact-guidance > .solution-effect::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(94, 147, 255, 0) 0%,
    rgba(94, 147, 255, .16) 32%,
    rgba(137, 177, 255, .8) 50%,
    rgba(94, 147, 255, .16) 68%,
    rgba(94, 147, 255, 0) 100%);
  background-size: 200% 100%;
  background-position: 40% 0;
  opacity: .6;
}

.segment-page:not(.home-page) .service-list > .solution-effect::after,
.institutional-page:not(.home-page) .service-list > .solution-effect::after,
.contact-page:not(.home-page) .contact-guidance > .solution-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(124, 166, 255, .55), transparent);
}

/* Keyboard focus fixes the complete item in place, including its decoration. */
.segment-page:not(.home-page) .service-list > .solution-effect:focus-within,
.institutional-page:not(.home-page) .service-list > .solution-effect:focus-within,
.contact-page:not(.home-page) .contact-guidance > .solution-effect:focus-within {
  transform: none !important;
  transition: none !important;
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .segment-page:not(.home-page) .service-list > .solution-effect::before,
  .institutional-page:not(.home-page) .service-list > .solution-effect::before,
  .contact-page:not(.home-page) .contact-guidance > .solution-effect::before {
    animation: solution-connection-flow 8s linear var(--solution-phase, 0s) infinite;
    animation-play-state: paused;
  }

  .solution-effect:nth-child(2n) {
    --solution-phase: -2.6s;
  }

  .solution-effect:nth-child(3n) {
    --solution-phase: -5.2s;
  }

  [data-solution-effects-state="running"] .segment-page .service-list > .solution-effect[data-solution-effect-active="true"]::before,
  [data-solution-effects-state="running"] .institutional-page .service-list > .solution-effect[data-solution-effect-active="true"]::before,
  [data-solution-effects-state="running"] .contact-page .contact-guidance > .solution-effect[data-solution-effect-active="true"]::before {
    animation-play-state: running;
  }

  .solution-effect:focus-within::before {
    animation-play-state: paused !important;
  }
}

@keyframes solution-connection-flow {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-solution-effects-state="running"] .solution-effect[data-solution-effect-active="true"]:not(:focus-within) {
    transform-origin: center top;
    transition: transform .24s ease, box-shadow .24s ease;
  }

  [data-solution-effects-state="running"] .solution-effect[data-solution-effect-active="true"]:hover:not(:focus-within) {
    transform: perspective(900px) rotateX(1.2deg) rotateY(-.65deg) translateY(-1px);
    box-shadow: 0 -8px 18px -17px rgba(125, 175, 255, .75);
  }

  [data-solution-effects-state="running"] .solution-effect[data-solution-effect-active="true"]:hover:not(:focus-within)::before {
    opacity: .88;
  }
}

/* Media changes also stop CSS motion immediately, independently of JS events. */
@media (prefers-reduced-motion: reduce) {
  .solution-effect,
  .solution-effect::before,
  .solution-effect::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}