/* Helvatron: Signal-Animationen in den Schnittstellenkarten (.ifcard).
   Die Grafik setzt assets/js/ifx.js ein. Ohne JS bleiben die Karten unveraendert.
   Bewegung laeuft nur kurz beim Erscheinen und solange die Karte Hover oder Fokus hat. */
.ifx { display: block; margin: -4px 0 4px; }
.ifx svg { display: block; width: 100%; height: auto; overflow: hidden; }
.ifx text { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; fill: var(--fg-muted, #58585a); }
.ifx .l  { fill: none; stroke: var(--fg, #1d1d1b); stroke-width: 1.5; }
.ifx .lm { fill: none; stroke: var(--line-strong, rgba(29,29,27,.3)); stroke-width: 1; }
.ifx .d  { fill: var(--fg, #1d1d1b); }
.ifx .w  { fill: var(--card, #fff); stroke: var(--fg, #1d1d1b); stroke-width: 1.5; }
.ifx .g  { fill: var(--green, #76b82a); }
.ifx .b  { fill: var(--water, #6393c7); }
.ifx .sg { fill: none; stroke: var(--brand, #3f7212); stroke-width: 2; }
.ifx .sb { fill: none; stroke: var(--water, #6393c7); stroke-width: 2; }
.ifx .sr { fill: none; stroke: var(--green, #76b82a); stroke-width: 2; vector-effect: non-scaling-stroke; }

.ifx .rq { opacity: 0; animation: ifx-rq 4.8s linear infinite; }
.ifx .rs { opacity: 0; animation: ifx-rs 4.8s linear infinite; }
.ifx .an { animation: ifx-an 4.8s linear infinite; }
.ifx .wv { animation: ifx-wv 4.8s linear infinite; }
.ifx .lr { transform-box: fill-box; transform-origin: center; animation: ifx-lr 2.4s linear infinite; }
.ifx .lr2 { animation-delay: -.8s; }
.ifx .lr3 { animation-delay: -1.6s; }
.ifx .gw { animation: ifx-gw .8s linear infinite; }
.ifx .nb { display: none; }
.ifx .nt { animation: ifx-nt 2.4s linear infinite; }
@supports (offset-path: path('M0,0 L1,1')) {
  .ifx .nb { display: inline; opacity: 0; offset-path: path('M46,36 L160,16 L250,36'); animation: ifx-nb 2.4s linear infinite; }
}
.ifx * { animation-play-state: paused; }
.ifcard.is-run .ifx *, .ifcard:hover .ifx *, .ifcard:focus-within .ifx * { animation-play-state: running; }

@keyframes ifx-rq { 0% { transform: translateX(0); opacity: 0 } 5% { opacity: 1 } 38% { transform: translateX(243px); opacity: 1 } 42%, 100% { transform: translateX(243px); opacity: 0 } }
@keyframes ifx-rs { 0%, 52% { transform: translateX(0); opacity: 0 } 56% { opacity: 1 } 92% { transform: translateX(-243px); opacity: 1 } 97%, 100% { transform: translateX(-243px); opacity: 0 } }
@keyframes ifx-an { 0%, 38% { fill: var(--card, #fff) } 44%, 56% { fill: var(--green, #76b82a) } 64%, 100% { fill: var(--card, #fff) } }
@keyframes ifx-wv { to { transform: translateX(-160px) } }
@keyframes ifx-lr { from { transform: scale(.04); opacity: 1 } to { transform: scale(1); opacity: .1 } }
@keyframes ifx-gw { 0%, 65% { fill: var(--card, #fff) } 85% { fill: var(--green, #76b82a) } 100% { fill: var(--card, #fff) } }
@keyframes ifx-nb { 0% { offset-distance: 0%; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } }
@keyframes ifx-nt { 0%, 86% { fill: var(--card, #fff) } 94% { fill: var(--green, #76b82a) } 100% { fill: var(--card, #fff) } }

@media (prefers-reduced-motion: reduce) {
  .ifx * { animation: none !important; }
  .ifx .rq, .ifx .rs, .ifx .nb { display: none; }
}