.direction {
  isolation: isolate;
  --viz-color: #159bb3;
  --viz-accent: #6f1d7c;
}

.direction[data-infographic="gyn"] { --viz-color: #7d4c9d; --viz-accent: #20b5c8; }
.direction[data-infographic="cardio"] { --viz-color: #d94c6a; --viz-accent: #20b5c8; }
.direction[data-infographic="endo"] { --viz-color: #bd7a1f; --viz-accent: #20b5c8; }
.direction[data-infographic="surgery"] { --viz-color: #0b93aa; --viz-accent: #6f1d7c; }
.direction[data-infographic="oncology"] { --viz-color: #6f4aa1; --viz-accent: #20b5c8; }
.direction[data-infographic="urology"] { --viz-color: #247daf; --viz-accent: #20b5c8; }
.direction[data-infographic="neuro"] { --viz-color: #7054a4; --viz-accent: #20b5c8; }
.direction[data-infographic="therapy"] { --viz-color: #168f9e; --viz-accent: #197da6; }
.direction[data-infographic="massage"] { --viz-color: #138ca9; --viz-accent: #6f1d7c; }
.direction[data-infographic="pregnancy"] { --viz-color: #8d5797; --viz-accent: #20b5c8; }

.direction > .direction__icon,
.direction > h3,
.direction > p {
  position: relative;
  z-index: 2;
}

.direction__icon {
  position: relative;
  z-index: 3;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

.direction:hover .direction__icon,
.direction:focus-visible .direction__icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 12px 30px rgba(24,73,99,.14);
}

.direction-infographic {
  position: absolute;
  z-index: 1;
  top: 11px;
  right: 8px;
  width: 136px;
  height: 98px;
  color: var(--viz-color);
  opacity: .82;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 8px 16px rgba(18,63,102,.08));
  transform: translate3d(5px,-2px,0) scale(.96);
  transform-origin: 70% 45%;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, filter .35s ease;
}

.direction--feature .direction-infographic {
  top: 14px;
  right: 15px;
  width: 232px;
  height: 148px;
  color: #fff;
  opacity: .68;
  filter: drop-shadow(0 12px 24px rgba(2,31,49,.24));
}

.direction:hover .direction-infographic,
.direction:focus-visible .direction-infographic {
  opacity: 1;
  transform: translate3d(0,-4px,0) scale(1.035);
  filter: drop-shadow(0 13px 23px rgba(18,63,102,.16));
}

.direction--feature:hover .direction-infographic,
.direction--feature:focus-visible .direction-infographic {
  opacity: .92;
}

.direction-infographic .viz-frame,
.direction-infographic .viz-stroke,
.direction-infographic .viz-draw,
.direction-infographic .viz-flow,
.direction-infographic .viz-scan-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.direction-infographic .viz-frame { opacity: .22; }
.direction-infographic .viz-stroke { opacity: .62; }
.direction-infographic .viz-soft { fill: currentColor; opacity: .075; }
.direction-infographic .viz-accent { fill: var(--viz-accent); stroke: var(--viz-accent); }
.direction--feature .direction-infographic .viz-accent { fill: #82e2e9; stroke: #82e2e9; }
.direction-infographic .viz-dot { fill: currentColor; }

.direction-infographic .viz-draw {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: direction-viz-draw 3.4s cubic-bezier(.4,0,.2,1) infinite;
}

.direction-infographic .viz-flow {
  stroke-dasharray: 7 9;
  animation: direction-viz-flow 4s linear infinite;
}

.direction-infographic .viz-ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: direction-viz-ping 2.4s ease-out infinite;
}

.direction-infographic .viz-beat {
  transform-box: fill-box;
  transform-origin: center;
  animation: direction-viz-beat 2.1s ease-in-out infinite;
}

.direction-infographic .viz-orbit {
  transform-origin: 80px 50px;
  animation: direction-viz-orbit 8s linear infinite;
}

.direction-infographic .viz-scan {
  animation: direction-viz-scan 3.1s cubic-bezier(.45,0,.55,1) infinite;
}

.direction-infographic .viz-float {
  animation: direction-viz-float 3.6s ease-in-out infinite;
}

.direction-infographic .viz-float--delay { animation-delay: -1.8s; }

.direction-infographic .viz-travel {
  animation: direction-viz-travel 3.2s ease-in-out infinite;
}

.direction-infographic .viz-travel--delay { animation-delay: -1.35s; }

.direction h3,
.direction p {
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.direction:hover h3,
.direction:focus-visible h3 {
  transform: translateX(2px);
}

.direction--feature h3,
.direction--feature p {
  max-width: 56%;
}

@keyframes direction-viz-draw {
  0%, 12% { stroke-dashoffset: 190; opacity: .28; }
  52%, 86% { stroke-dashoffset: 0; opacity: .9; }
  100% { stroke-dashoffset: -190; opacity: .32; }
}

@keyframes direction-viz-flow {
  to { stroke-dashoffset: -64; }
}

@keyframes direction-viz-ping {
  0% { transform: scale(.4); opacity: 0; }
  22% { opacity: .95; }
  72%, 100% { transform: scale(1.75); opacity: 0; }
}

@keyframes direction-viz-beat {
  0%, 42%, 100% { transform: scale(1); }
  48% { transform: scale(1.14); }
  56% { transform: scale(.96); }
  64% { transform: scale(1.08); }
}

@keyframes direction-viz-orbit {
  to { transform: rotate(360deg); }
}

@keyframes direction-viz-scan {
  0%, 100% { transform: translateY(-20px); opacity: .15; }
  50% { transform: translateY(31px); opacity: .92; }
}

@keyframes direction-viz-float {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(5px); }
}

@keyframes direction-viz-travel {
  0%, 100% { transform: translateX(-22px); opacity: .28; }
  50% { transform: translateX(27px); opacity: 1; }
}

@media (max-width: 760px) {
  .direction-infographic {
    width: 128px;
    height: 92px;
  }

  .direction--feature .direction-infographic {
    width: 190px;
    height: 125px;
    right: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .direction-infographic *,
  .direction-infographic {
    animation: none !important;
    transition: none !important;
  }

  .direction-infographic .viz-draw { stroke-dashoffset: 0; }
}