/* V3: o estado sem script é estático, legível e completo. */
.convergence-scene { display: block; width: 100%; height: auto; overflow: hidden; }
.hero-halo { transform-origin: 50% 50%; }
.hero-orbit { transform: none; }
.scene-signal { opacity: 0; stroke-dashoffset: 0; }
.scene-destination-line { opacity: .7; }
.scene-port-spark { opacity: 0; }

/* A expansão ocorre no centro, sem deslocamento lateral ou uma luz arrastada sobre o arco. */
.motion-v3-ready .hero-halo {
  animation: cevixa-halo-breathe 12s ease-in-out infinite;
  animation-play-state: paused;
}
.motion-v3-ready.motion-v3-playing .hero-halo { animation-play-state: running; }
@keyframes cevixa-halo-breathe {
  0%, 100% { transform: scale(.985); opacity: .7; }
  50% { transform: scale(1.025); opacity: 1; }
}

/* As caudas e cabeças usam a geometria exata da conexão, com comprimento normalizado. */
.motion-v3-ready .scene-signal-in { animation: cevixa-signal-in 7.2s linear infinite; }
.motion-v3-ready .scene-signal-out { animation: cevixa-signal-out 7.2s linear infinite; }
.motion-v3-ready .scene-core-aura { animation: cevixa-core-aura 7.2s ease-in-out infinite; }
.motion-v3-ready .scene-core-heart { animation: cevixa-core-heart 7.2s ease-in-out infinite; }
.motion-v3-ready .scene-source-port { animation: cevixa-source-port 7.2s ease-in-out infinite; }
.motion-v3-ready .scene-destination-port,
.motion-v3-ready .scene-destination-line { animation: cevixa-destination-port 7.2s ease-in-out infinite; }
.motion-v3-ready .scene-signal,
.motion-v3-ready .scene-core-aura,
.motion-v3-ready .scene-core-heart,
.motion-v3-ready .scene-source-port,
.motion-v3-ready .scene-destination-port,
.motion-v3-ready .scene-destination-line { animation-play-state: paused; }
.motion-v3-ready .scene-playing .scene-signal,
.motion-v3-ready .scene-playing .scene-core-aura,
.motion-v3-ready .scene-playing .scene-core-heart,
.motion-v3-ready .scene-playing .scene-source-port,
.motion-v3-ready .scene-playing .scene-destination-port,
.motion-v3-ready .scene-playing .scene-destination-line { animation-play-state: running; }

@keyframes cevixa-signal-in {
  0% { stroke-dashoffset: 0; opacity: 0; }
  3% { opacity: 1; }
  34% { stroke-dashoffset: -108; opacity: 1; }
  36%, 100% { stroke-dashoffset: -108; opacity: 0; }
}
@keyframes cevixa-signal-out {
  0%, 44% { stroke-dashoffset: 0; opacity: 0; }
  47% { opacity: 1; }
  80% { stroke-dashoffset: -108; opacity: 1; }
  82%, 100% { stroke-dashoffset: -108; opacity: 0; }
}
@keyframes cevixa-core-aura {
  0%, 20%, 75%, 100% { opacity: .3; }
  34%, 49% { opacity: .82; }
}
@keyframes cevixa-core-heart {
  0%, 20%, 75%, 100% { fill: #78CFC9; }
  34%, 49% { fill: #E6FFF6; }
}
@keyframes cevixa-source-port {
  0%, 25%, 100% { opacity: .55; }
  4%, 18% { opacity: 1; }
}
@keyframes cevixa-destination-port {
  0%, 65%, 100% { opacity: .5; }
  79%, 91% { opacity: 1; }
}

/* O SVG do fluxo é medido entre bordas, acompanhando a ordem real dos cards. */
#painel-fluxo { position: relative; }
.flow-route-overlay { position: absolute; pointer-events: none; overflow: visible; z-index: 2; }
.flow-route-base { fill: none; stroke: #56C6C6; stroke-opacity: .36; stroke-width: 1.5; }
.flow-route-signal { fill: none; stroke: #A2F2E8; stroke-width: 3; stroke-linecap: round; opacity: 0; }
#painel-fluxo.motion-routes-ready [data-flow-step]::before,
#painel-fluxo.motion-routes-ready [data-flow-step]::after { display: none; }
#painel-fluxo.motion-e02-running[data-step="1"] [data-flow-step="1"],
#painel-fluxo.motion-e02-running[data-step="2"] [data-flow-step="2"],
#painel-fluxo.motion-e02-running[data-step="3"] [data-flow-step="3"],
#painel-fluxo.motion-e02-running[data-step="4"] [data-flow-step="4"] {
  animation: cevixa-node-arrival 700ms ease-out 1;
}
#painel-fluxo.motion-e02-running[data-step="1"] [data-flow-route="1"],
#painel-fluxo.motion-e02-running[data-step="2"] [data-flow-route="2"],
#painel-fluxo.motion-e02-running[data-step="3"] [data-flow-route="3"] {
  animation: cevixa-flow-signal 800ms linear 1 both;
}
@keyframes cevixa-flow-signal {
  0% { stroke-dashoffset: 0; opacity: 0; }
  7% { opacity: 1; }
  92% { stroke-dashoffset: -112; opacity: 1; }
  100% { stroke-dashoffset: -112; opacity: 0; }
}
@keyframes cevixa-node-arrival {
  0%, 100% { border-color: #56C6C64D; box-shadow: 0 0 0 0 #56C6C600; }
  35% { border-color: #A2F2E8; box-shadow: 0 0 0 1px #56C6C677, 0 0 26px #0FA7A72E; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-v3-ready .hero-halo,
  .motion-v3-ready .scene-signal,
  .motion-v3-ready .scene-core-aura,
  .motion-v3-ready .scene-core-heart,
  .motion-v3-ready .scene-source-port,
  .motion-v3-ready .scene-destination-port,
  .motion-v3-ready .scene-destination-line,
  #painel-fluxo.motion-e02-running [data-flow-step],
  #painel-fluxo.motion-e02-running .flow-route-signal { animation: none; }
  .scene-signal { opacity: 0; }
  .scene-core-aura { opacity: .38; }
  .scene-raster .scene-port-spark { opacity: 0; }
}