/* Homepage visual upgrades: decision-flow diagram, process icons, richer
   connection / appliance / fingerprint / correlation illustrations.
   Loads after home-edge, home-intelligence and home-architecture. */

/* ------------------------------------------------------------ shared */
@keyframes mg-dash-flow { to { stroke-dashoffset: -40; } }
@keyframes mg-pulse-ring { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }

/* -------------------------------------------- 1. decision-layer flow */
.mg-decision-flow { position: relative; margin: 0 auto 46px; max-width: 1000px; }
.mg-decision-flow__frame { padding: 26px 24px 18px; background: #fff; border: 1px solid #dfe6f3; border-radius: 16px; box-shadow: 0 16px 44px -28px rgba(37, 48, 83, .35); }
.mg-decision-flow svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.mg-decision-flow .df-text { fill: var(--navy); font-size: 15px; font-weight: 650; }
.mg-decision-flow .df-sub { fill: #667799; font-size: 11.5px; font-weight: 500; }
.mg-decision-flow .df-mono { fill: #5f73a3; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10.5px; letter-spacing: .12em; }
.mg-decision-flow .df-node { fill: #f6f8fd; stroke: #d6dff0; stroke-width: 1.2; }
.mg-decision-flow .df-node--good { stroke: #8fd6bd; fill: #eefaf5; }
.mg-decision-flow .df-node--bad { stroke: #f2b3b3; fill: #fff2f2; }
.mg-decision-flow .df-node--warn { stroke: #f0d39a; fill: #fff8e8; }
.mg-decision-flow .df-core { fill: url(#dfCoreGrad); stroke: #2c4497; stroke-width: 1.4; }
.mg-decision-flow .df-core-title { fill: #fff; font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.mg-decision-flow .df-core-mono { fill: #a9c3ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; letter-spacing: .14em; }
.mg-decision-flow .df-chip { fill: rgba(255, 255, 255, .09); stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.mg-decision-flow .df-chip-text { fill: #e8efff; font-size: 11.5px; font-weight: 550; }
.mg-decision-flow .df-path { fill: none; stroke: #c6d1e8; stroke-width: 2; }
.mg-decision-flow .df-flow { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 14; animation: mg-dash-flow 1.6s linear infinite; }
.mg-decision-flow .df-flow--in { stroke: #6f8de0; }
.mg-decision-flow .df-flow--allow { stroke: #2fb98e; }
.mg-decision-flow .df-flow--route { stroke: #4b6fd6; }
.mg-decision-flow .df-flow--block { stroke: #e0616b; animation-duration: 2.6s; }
.mg-decision-flow .df-badge { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }
.mg-decision-flow .df-badge--allow { fill: #1f8a68; }
.mg-decision-flow .df-badge--route { fill: #304cb2; }
.mg-decision-flow .df-badge--block { fill: #c8404b; }
.mg-decision-flow .df-badge-bg--allow { fill: #dff5ec; }
.mg-decision-flow .df-badge-bg--route { fill: #e5ecfd; }
.mg-decision-flow .df-badge-bg--block { fill: #fde5e6; }
.mg-decision-flow .df-icon { fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mg-decision-flow .df-icon--bad { stroke: #c8404b; }
.mg-decision-flow .df-icon--warn { stroke: #b4831e; }
.mg-decision-flow .df-icon--good { stroke: #1f8a68; }
.mg-decision-flow__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 16px 0 0; padding: 0; list-style: none; color: #63718a; font-size: 12px; }
.mg-decision-flow__legend li { display: inline-flex; align-items: center; gap: 8px; }
.mg-decision-flow__legend i { width: 18px; height: 3px; border-radius: 3px; }
.mg-decision-flow__legend i[data-tone="in"] { background: #6f8de0; }
.mg-decision-flow__legend i[data-tone="allow"] { background: #2fb98e; }
.mg-decision-flow__legend i[data-tone="route"] { background: #4b6fd6; }
.mg-decision-flow__legend i[data-tone="block"] { background: #e0616b; }
.mg-decision-flow__caption { margin: 14px 0 0; text-align: center; color: #63718a; font-size: 13px; line-height: 1.7; }
@media (max-width: 600px) {
  .mg-decision-flow__frame { padding: 14px 10px 12px; }
  .mg-decision-flow__legend { gap: 6px 14px; font-size: 11px; }
}

/* -------------------------------------------- 2. process-step icons */
.process-step__art { display: grid; place-items: center; width: 128px; height: 118px; margin: 8px auto 24px; position: relative; }
.process-step__art::before { content: ""; position: absolute; inset: 10px 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eef3ff, #dbe5fb 70%, #d1dcf6); box-shadow: inset 0 0 0 1px rgba(48, 76, 178, .12); }
.process-step__art svg { position: relative; width: 84px; height: 84px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.process-step__art .ps-accent { stroke: #1f8a68; }
.process-step__art .ps-danger { stroke: #d64550; }
.process-step__art .ps-fill { fill: #fff; }
.process-step__art .ps-soft { stroke: #9db1e6; }
.process-step__art .ps-gold { stroke: #c9962a; fill: #f7dd8f; }
.process-grid { position: relative; }
.process-step { overflow: visible; isolation: isolate; }
.process-step::after { inset: 0; width: auto; height: auto; border-radius: 18px; z-index: -1; pointer-events: none; background: radial-gradient(circle at calc(100% + 30px) calc(100% + 44px), rgba(48, 76, 178, .1), transparent 84px); }
.process-step__link { display: none; }
@media (min-width: 981px) {
  .process-step + .process-step .process-step__link { position: absolute; top: 84px; left: -14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #c8d4f0; color: var(--blue); box-shadow: 0 4px 12px rgba(37, 48, 83, .12); z-index: 2; transform: translateX(-50%); }
  .process-step + .process-step .process-step__link svg { width: 12px; height: 12px; fill: currentColor; }
  .process-step + .process-step .process-step__link::before { content: ""; position: absolute; top: 50%; right: 100%; width: 12px; height: 2px; background: #c8d4f0; }
  .process-step + .process-step .process-step__link::after { content: ""; position: absolute; top: 50%; left: 100%; width: 12px; height: 2px; background: #c8d4f0; }
}

/* ------------------------------------------ 3. connection physics */
.mg-path-lane { position: relative; transition: border-color .5s, box-shadow .5s; }
.mg-physics-panel[data-beat="0"] .mg-path-lane--tcp, .mg-physics-panel[data-beat="1"] .mg-path-lane--tls { box-shadow: 0 0 0 1px rgba(127, 224, 195, .18), 0 12px 32px -20px rgba(127, 224, 195, .45); }
.mg-path-node { position: relative; transition: border-color .4s, box-shadow .4s, background .4s; }
.mg-path-node .mg-node-icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(139, 180, 255, .08); box-shadow: inset 0 0 0 1px rgba(139, 180, 255, .22); }
.mg-path-guard .mg-node-icon { background: rgba(127, 230, 198, .1); box-shadow: inset 0 0 0 1px rgba(127, 230, 198, .3); }
.mg-path-peer .mg-node-icon { background: rgba(227, 193, 131, .1); box-shadow: inset 0 0 0 1px rgba(227, 193, 131, .3); }
.mg-path-guard .mg-node-icon::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(127, 230, 198, .45); animation: mg-pulse-ring 2.2s ease-out infinite; animation-play-state: paused; }
.mg-physics-panel.is-running .mg-path-guard .mg-node-icon::after { animation-play-state: running; }
.mg-path-link i { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #3f5f8e, #7ea4dc 55%, #a9caff); box-shadow: 0 0 10px rgba(139, 180, 255, .35); }
.mg-path-lane--tls .mg-path-link i { background: linear-gradient(90deg, #2c6b62, #55b8a1 55%, #8dffe0); box-shadow: 0 0 10px rgba(127, 230, 198, .35); }
.mg-path-lane--tls .mg-path-hidden-link i { background: linear-gradient(90deg, #7a6236, #b8965a 55%, #f4d493); box-shadow: 0 0 10px rgba(244, 212, 147, .3); }
.mg-path-lane--tcp .mg-path-hidden-link i { height: 2px; box-shadow: none; background: repeating-linear-gradient(90deg, #547396 0 4px, transparent 4px 8px); }
.mg-path-link i::before, .mg-path-link i::after { top: -3px; width: 9px; height: 9px; box-shadow: 0 0 8px currentColor; }
.mg-path-link i::before { color: #b1ceff; }
.mg-path-lane--tls .mg-path-link i::before, .mg-path-lane--tls .mg-path-link i::after { color: #9affda; }
.mg-path-arrow { position: absolute; top: 50%; right: -2px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #a9caff; transform: translateY(-50%); filter: drop-shadow(0 0 4px rgba(139, 180, 255, .5)); }
.mg-path-lane--tls .mg-path-arrow { border-left-color: #8dffe0; }
.mg-path-lane--tls .mg-path-hidden-link .mg-path-arrow { border-left-color: #f4d493; }
.mg-path-lane--tcp .mg-path-hidden-link .mg-path-arrow { display: none; }
.mg-path-lane--tls .mg-path-hidden-link::before { content: ""; position: absolute; inset: 6px -12px 6px -12px; border: 1px dashed rgba(244, 212, 147, .45); border-radius: 999px; background: rgba(244, 212, 147, .04); }
.mg-path-lane--tls .mg-path-hidden-link::after { content: "ENCRYPTED TUNNEL"; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 4px; background: #2a2a24; color: #f4d493; font: 8.5px ui-monospace, monospace; letter-spacing: .12em; white-space: nowrap; }
.mg-path-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: -6px 0; padding: 0 18px; }
.mg-path-compare::before, .mg-path-compare::after { content: ""; height: 1px; background: repeating-linear-gradient(90deg, #3a5578 0 6px, transparent 6px 12px); }
.mg-path-compare > span { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid #3f5d82; border-radius: 999px; background: #0e1e37; color: #b9cbe6; font: 11px ui-monospace, monospace; letter-spacing: .06em; transition: border-color .4s, color .4s, background .4s; }
.mg-path-compare > span i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7fe6c6; }
.mg-physics-panel[data-beat="2"] .mg-path-compare > span { border-color: #7fddc2; color: #a9efdb; background: #14343e; }
.mg-physics-panel[data-beat="2"] .mg-path-visible-link > span { color: #c6ffee; text-shadow: 0 0 12px rgba(127, 230, 198, .6); }
.mg-physics-panel[data-beat="2"] .mg-path-lane--tls .mg-path-hidden-link > span { color: #ffe6b3; text-shadow: 0 0 12px rgba(244, 212, 147, .6); }
.mg-physics-panel[data-beat="2"] .mg-path-lane--tls .mg-path-hidden-link::before { border-color: rgba(244, 212, 147, .8); background: rgba(244, 212, 147, .08); }
.mg-physics-panel[data-route="proxy"] .mg-path-compare [data-mg-compare="direct"], .mg-physics-panel[data-route="direct"] .mg-path-compare [data-mg-compare="proxy"] { display: none; }
@media (max-width: 600px) {
  .mg-path-compare { grid-template-columns: 1fr; padding: 0; margin: 0; }
  .mg-path-compare::before, .mg-path-compare::after { display: none; }
  .mg-path-compare { min-width: 0; }
  .mg-path-compare > span { justify-self: stretch; min-width: 0; max-width: 100%; justify-content: center; padding: 7px 12px; font-size: 9.5px; text-align: center; white-space: normal; line-height: 1.5; }
  .mg-path-compare > span b { min-width: 0; overflow-wrap: anywhere; }
  .mg-path-compare > span i { flex: 0 0 6px; }
  .mg-path-arrow { top: auto; bottom: 4px; left: 50%; right: auto; transform: translateX(-50%) rotate(90deg); }
  .mg-path-lane--tls .mg-path-hidden-link::before { inset: 2px auto 2px calc(50% - 15px); width: 30px; }
  .mg-path-lane--tls .mg-path-hidden-link::after { display: none; }
  .mg-path-lane--tls .mg-path-hidden-link small::after { content: " · encrypted tunnel"; color: #f4d493; }
  .mg-path-node .mg-node-icon { width: 38px; height: 38px; }
}

/* --------------------------------------------- 4. managed appliance */
.mg-control-grid > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; align-items: start; transition: border-color .4s, box-shadow .4s; }
.mg-control-grid > div > svg { grid-row: span 2; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: #8fb4ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mg-control-grid > div[data-mg-control="lifecycle"] > svg { stroke: #85e9cc; }
.mg-control-grid > div[data-mg-control="cloud"] > svg { stroke: #a9c9ff; }
.mg-appliance[data-stage="0"] [data-mg-control="cloud"], .mg-appliance[data-stage="2"] [data-mg-control="campaign"], .mg-appliance[data-stage="3"] [data-mg-control="lifecycle"] { box-shadow: 0 0 0 1px rgba(140, 220, 199, .25), 0 10px 26px -16px rgba(140, 220, 199, .7); }
.mg-channel-svg { display: block; width: 190px; height: 74px; overflow: visible; }
.mg-channel-svg .ch-rail { fill: none; stroke: #2f4a6c; stroke-width: 2; }
.mg-channel-svg .ch-flow { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 11; animation: mg-dash-flow 1.4s linear infinite; animation-play-state: paused; }
.mg-channel-svg .ch-flow--down { stroke: #8aafd9; }
.mg-channel-svg .ch-flow--up { stroke: #83e4c7; animation-direction: reverse; }
.mg-appliance.is-running .mg-channel-svg .ch-flow { animation-play-state: running; }
.mg-channel-svg .ch-head { fill: #8aafd9; }
.mg-channel-svg .ch-head--up { fill: #83e4c7; }
.mg-channel-svg .ch-lock-bg { fill: #0c1c33; stroke: #4c8d96; stroke-width: 1.2; }
.mg-channel-svg .ch-lock { fill: none; stroke: #9df2d9; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mg-channel-svg .ch-glow { fill: none; stroke: rgba(127, 230, 198, .35); stroke-width: 1; animation: mg-pulse-ring 2.4s ease-out infinite; transform-origin: 95px 37px; animation-play-state: paused; }
.mg-appliance.is-running .mg-channel-svg .ch-glow { animation-play-state: running; }
.mg-appliance[data-stage="1"] .mg-channel-svg .ch-lock-bg { stroke: #8cdcc7; filter: drop-shadow(0 0 6px rgba(140, 220, 199, .6)); }
.mg-appliance-capabilities > span { position: relative; padding-left: 22px; }
.mg-appliance-capabilities > span::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #7fe6c6; transform: translateY(-50%); box-shadow: 0 0 6px rgba(127, 230, 198, .7); }
.mg-appliance-traffic strong { padding: 5px 10px; border: 1px solid #4c8d96; border-radius: 999px; background: #0d2536; }
@media (max-width: 600px) {
  .mg-control-grid > div { grid-template-columns: 22px minmax(0, 1fr); gap: 3px 8px; }
  .mg-control-grid > div > svg { width: 20px; height: 20px; }
  .mg-channel-svg { width: 160px; height: 64px; }
}

/* ------------------------------------------------- 5. fingerprint */
.mg-fingerprint__visual { position: relative; background: radial-gradient(ellipse at 20% 70%, #173c5066, transparent 65%), radial-gradient(rgba(139, 180, 255, .16) 1px, transparent 1.2px) 0 0 / 14px 14px; }
.mg-fingerprint__visual svg { overflow: visible; }
.mg-fingerprint__ridges { stroke: url(#mgFpGrad); stroke-width: 2.1; transition: opacity .8s ease; filter: drop-shadow(0 0 6px #5bdbbd40); }
.mg-fingerprint__ridges--soft { stroke: #3f9e8a; stroke-width: 1.6; opacity: .75; }
.mg-fingerprint__scan { stroke: #d9fff5; stroke-width: 2.5; filter: drop-shadow(0 0 8px #9affda); }
.mg-fingerprint__scanband { fill: url(#mgScanGrad); opacity: 0; animation: mg-scan 2.6s ease-in-out infinite; animation-play-state: paused; }
.is-running .mg-fingerprint__scanband { opacity: .35; animation-play-state: running; }
.mg-fingerprint[data-phase="0"] .mg-fingerprint__ridges { opacity: .5; }
.mg-fingerprint[data-phase="1"] .mg-fingerprint__ridges { opacity: .8; }
.mg-fingerprint__corner { fill: none; stroke: #4a7fb0; stroke-width: 1.5; stroke-linecap: round; }
.mg-fingerprint__status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; vertical-align: 1px; }
.mg-fingerprint[data-phase="0"] .mg-fingerprint__status, .mg-fingerprint[data-phase="1"] .mg-fingerprint__status { color: #a7cbff; }

/* --------------------------------------- 6. rotating-ip correlation */
.mg-ring-map { background: radial-gradient(ellipse at center, #20486355, transparent 65%), radial-gradient(rgba(139, 180, 255, .13) 1px, transparent 1.2px) 0 0 / 16px 16px; }
.mg-ring-links path { transition: stroke .4s, stroke-width .4s; }
.mg-ring-link-flow { fill: none; stroke: #9dffe4; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 12; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 5px rgba(127, 230, 198, .8)); animation: mg-dash-flow 1s linear infinite; animation-play-state: paused; }
.mg-ring.is-running .mg-ring-link-flow { animation-play-state: running; }
.mg-ring[data-active="0"] .mg-ring-link-flow:nth-child(1), .mg-ring[data-active="1"] .mg-ring-link-flow:nth-child(2),
.mg-ring[data-active="2"] .mg-ring-link-flow:nth-child(3), .mg-ring[data-active="3"] .mg-ring-link-flow:nth-child(4),
.mg-ring[data-active="4"] .mg-ring-link-flow:nth-child(5), .mg-ring[data-active="5"] .mg-ring-link-flow:nth-child(6) { opacity: 1; }
.mg-ring-ip { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6); }
.mg-ring-ip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #5a7396; vertical-align: 1px; transition: background .4s, box-shadow .4s; }
.mg-ring[data-active="0"] .mg-ring-ip--0::before, .mg-ring[data-active="1"] .mg-ring-ip--1::before, .mg-ring[data-active="2"] .mg-ring-ip--2::before,
.mg-ring[data-active="3"] .mg-ring-ip--3::before, .mg-ring[data-active="4"] .mg-ring-ip--4::before, .mg-ring[data-active="5"] .mg-ring-ip--5::before { background: #8fefd3; box-shadow: 0 0 8px #8fefd3; }
.mg-ring[data-active="0"] .mg-ring-ip--0, .mg-ring[data-active="1"] .mg-ring-ip--1, .mg-ring[data-active="2"] .mg-ring-ip--2,
.mg-ring[data-active="3"] .mg-ring-ip--3, .mg-ring[data-active="4"] .mg-ring-ip--4, .mg-ring[data-active="5"] .mg-ring-ip--5 { box-shadow: 0 0 0 3px rgba(113, 220, 191, .18), 0 6px 18px -8px rgba(113, 220, 191, .6); }
.mg-ring-core::before, .mg-ring-core::after { content: ""; position: absolute; inset: -6px; border-radius: 16px; border: 1px solid rgba(110, 228, 196, .5); animation: mg-pulse-ring 2.4s ease-out infinite; animation-play-state: paused; pointer-events: none; }
.mg-ring-core::after { animation-delay: -1.2s; }
.mg-ring.is-running .mg-ring-core::before, .mg-ring.is-running .mg-ring-core::after { animation-play-state: running; }
.mg-ring-event .edge-dot { animation: mg-blink 1.2s step-end infinite; animation-play-state: paused; }
.mg-ring.is-running .mg-ring-event .edge-dot { animation-play-state: running; }

/* ------------------------------------------ 7. gateway edge outcomes */
.edge-outcome-bar { display: flex; height: 8px; margin: -10px 24px 18px; border-radius: 999px; overflow: hidden; background: #172a47; }
.edge-outcome-bar i { display: block; flex: 1 1 0; min-width: 0; transition: flex-grow .6s ease; }
.edge-outcome-bar i[data-tone="block"] { background: linear-gradient(90deg, #d9777a, #ffb0b1); }
.edge-outcome-bar i[data-tone="allow"] { background: linear-gradient(90deg, #4fc9a6, #88e8c9); }
.edge-outcome-bar i[data-tone="review"] { background: linear-gradient(90deg, #d8b25f, #f4d080); }
.edge-outcome-bar i + i { border-left: 2px solid #0b1831; }
.edge-feed-stats > div { position: relative; }
.edge-feed-stats > div::before { content: ""; position: absolute; left: 12px; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: #9aafce; }
.edge-feed-stats > div dt { padding-left: 11px; }
.edge-feed-stats > div[data-tone="block"]::before { background: #ffb0b1; box-shadow: 0 0 6px #ffb0b1; }
.edge-feed-stats > div[data-tone="allow"]::before { background: #88e8c9; box-shadow: 0 0 6px #88e8c9; }
.edge-feed-stats > div[data-tone="review"]::before { background: #f4d080; box-shadow: 0 0 6px #f4d080; }
@media (max-width: 480px) { .edge-outcome-bar { margin-inline: 16px; } }

/* ------------------------------------------------ motion controls */
body.mg-motion-paused .mg-decision-flow .df-flow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mg-decision-flow .df-flow, .mg-channel-svg .ch-flow, .mg-channel-svg .ch-glow, .mg-ring-link-flow, .mg-ring-core::before, .mg-ring-core::after, .mg-path-guard .mg-node-icon::after, .mg-fingerprint__scanband, .mg-ring-event .edge-dot { animation: none !important; }
  .mg-fingerprint__scanband, .mg-ring-core::before, .mg-ring-core::after { display: none; }
}
@media (max-width: 720px) {
  .mg-decision-flow__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mg-decision-flow__scroll svg { min-width: 720px; }
}

/* ------------------------------------------- smoothing pass (second review) */
/* Dash flows: offset delta must be a whole number of dash periods so loops have no seam. */
.mg-channel-svg .ch-flow { stroke-dasharray: 5 15; }
.mg-ring-link-flow { stroke-dasharray: 6 14; filter: none; }
.mg-fingerprint__scan { filter: none; }
.mg-fingerprint__scanband { animation-name: mg-scanband; }
@keyframes mg-scanband { 0%, 100% { transform: translateY(0); opacity: 0; } 20%, 80% { opacity: .35; } 90% { transform: translateY(112px); opacity: 0; } }
/* Pulse rings fade in instead of popping. */
@keyframes mg-pulse-ring { 0% { transform: scale(.86); opacity: 0; } 18% { opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }
/* Packets: transform-only, one direction, measured track length from JS (--mg-track). */
.mg-path-link i { --mg-track: 120px; }
.mg-path-link i::before, .mg-path-link i::after { left: 0; top: -3px; animation: mg-packet-x 2.4s linear infinite; animation-play-state: paused; will-change: transform; }
.mg-path-link i::after { animation-delay: -1.2s; opacity: .5; }
.mg-path-lane--tls .mg-path-link i::before, .mg-path-lane--tls .mg-path-link i::after { animation-duration: 3.2s; }
.mg-path-lane--tls .mg-path-link i::after { animation-delay: -1.6s; }
.mg-path-lane--tls .mg-path-visible-link i::before { animation-delay: -.8s; }
.mg-path-lane--tls .mg-path-visible-link i::after { animation-delay: -2.4s; }
@keyframes mg-packet-x { from { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateX(var(--mg-track)); opacity: 0; } }
@media (max-width: 600px) {
  .mg-path-link i::before, .mg-path-link i::after { left: -3px; top: 0; animation-name: mg-packet-y; }
  @keyframes mg-packet-y { from { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateY(var(--mg-track)); opacity: 0; } }
}
/* Beat-driven state changes ease instead of snapping. */
.mg-path-sequence li, .mg-detection-steps li, .mg-provision-stages li, .mg-provision-stages button, .mg-physics-insight, .mg-path-link > span, .mg-edge-appliance, .mg-control-grid > div, .mg-appliance-badge, .mg-fingerprint__status, .mg-ring-core { transition: background-color .45s ease, border-color .45s ease, color .45s ease, opacity .45s ease, text-shadow .45s ease, box-shadow .45s ease; }
.mg-path-lane--tls .mg-path-hidden-link::before { transition: border-color .45s ease, background-color .45s ease; }
.edge-assessment, .edge-assessment__heading strong, .edge-policy strong, .edge-status { transition: color .35s ease, background-color .35s ease, border-color .35s ease; }
.edge-scenarios button { transition: background-color .2s, border-color .2s, color .2s; }
/* Evidence bars: ease-out reads cleaner than linear-ish ease on a scale. */
.mg-evidence-track i { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
/* Feed rows: animate opacity only (transform on table rows is inconsistent across engines). */
@keyframes edge-row-in { from { opacity: 0; } to { opacity: 1; } }
/* Outcome bar segments: smoother easing when totals change. */
.edge-outcome-bar i { transition: flex-grow .7s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .mg-path-link i::before, .mg-path-link i::after { animation: none !important; }
}
/* Visitor stream: new rows slide in so the rows below glide instead of jumping. */
.mg-visit--new { animation: mg-visit-in .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes mg-visit-in { from { opacity: 0; margin-top: -86px; } 40% { opacity: 0; } to { opacity: 1; margin-top: 0; } }
@media (max-width: 600px) { @keyframes mg-visit-in { from { opacity: 0; margin-top: -120px; } 40% { opacity: 0; } to { opacity: 1; margin-top: 0; } } }
@media (prefers-reduced-motion: reduce) { .mg-visit--new { animation: none; } }