.hero { position: relative; }
.hero-introduction { display: block; }
.impact-flow { position: relative; grid-column: 1 / -1; margin-top: 48px; }
.impact-origin { position: relative; width: fit-content; margin: 0 auto; z-index: 1; }
.impact-origin::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; background: var(--paper); bottom: -8px; left: calc(50% - 3.5px); }
.impact-origin .current-role { display: block; margin: 0; padding: 13px 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--rail); text-align: center; }
.impact-origin .current-role strong { font-size: 13px; margin: 5px 0 3px; }
.impact-origin .current-role > span:last-child { font-size: 10px; }
.impact-flow .impact-strip { margin-top: 0; padding-top: 88px; border-top: 0; }
.impact-flow .impact-strip > div { position: relative; padding-left: 12px; padding-right: 12px; text-align: center; }
.impact-strip > div::before { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; background: var(--paper); top: -19.5px; left: calc(50% - 3.5px); }

.impact-connections { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; }
.js .impact-connections { display: block; }
.impact-traces { stroke: #c6cbbf; stroke-width: 1; }
.impact-packets { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 100; }
.impact-packets path { animation: impact-delivery 9s linear infinite; animation-play-state: paused; opacity: 0; }
.impact-strip dt { animation: impact-arrival 9s ease infinite; animation-play-state: paused; }
.impact-packets path:nth-child(2), .impact-strip > div:nth-child(2) dt { animation-delay: 1.5s; }
.impact-packets path:nth-child(3), .impact-strip > div:nth-child(3) dt { animation-delay: 3s; }
.js .hero:not(.motion-paused) .impact-packets path, .js .hero:not(.motion-paused) .impact-strip dt { animation-play-state: running; }
.hero-motion-toggle { display: none; position: absolute; top: 18px; right: 0; align-items: center; gap: 7px; min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--muted); font-size: 10px; cursor: pointer; }
.js .hero-motion-toggle { display: inline-flex; }
.hero-motion-toggle:hover { color: var(--accent); border-color: var(--accent); }
.motion-play, .hero-motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.hero-motion-toggle[aria-pressed="true"] .motion-play { display: block; }
@keyframes impact-delivery { 0% { stroke-dashoffset: 3; opacity: 0; } 5% { opacity: 1; } 70% { stroke-dashoffset: -100; opacity: 1; } 73%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes impact-arrival { 0%, 65%, 95%, 100% { color: var(--ink); } 73%, 82% { color: var(--accent); } }
@media (min-width: 1800px) { .hero .hero-introduction { align-self: end; } }
@media (max-width: 960px) { .hero-motion-toggle { top: 12px; } }
@media (max-width: 640px) {
  .hero-motion-toggle { top: 3px; min-height: 28px; font-size: 9px; padding: 3px 6px; }
  .impact-flow { margin-top: 30px; }
  .impact-flow .impact-strip { padding-top: 68px; }
  .impact-origin .current-role { padding: 10px 16px; }
  .impact-flow .impact-strip > div { padding-left: 7px; padding-right: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .impact-packets path, .hero .impact-strip dt { animation: none; }
  .js .hero-motion-toggle { display: none; }
}
@media print {
  .impact-connections, .js .hero-motion-toggle, .impact-origin::after, .impact-strip > div::before { display: none; }
  .impact-flow .impact-strip { padding-top: 24px; }
}

.no-js .impact-origin::after, .no-js .impact-strip > div::before { display: none; }