/* wf-scene.css — Styles der gemeinsamen Hero-Animation (Workflow).
   Wird von der KI-Seite und den Standortseiten geladen. */

/* ── Hero: Automatisierungs-Workflow ──
   Knoten und Verbindungen wie in einem Workflow-Editor. Auf jeder Verbindung
   läuft ein Datenpaket, die Knoten leuchten in Ablaufreihenfolge auf. */
.cine .wf { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .34; filter: blur(2.2px); }
.cine .wf-edge { fill: none; stroke: rgba(127,180,255,.16); stroke-width: 1.3; }
.cine .wf-flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 18 440;
  animation: wfFlow 4.4s linear infinite;
  opacity: .55;
}
@keyframes wfFlow { from { stroke-dashoffset: 486; } to { stroke-dashoffset: 0; } }

.cine .wf-box { fill: rgba(9,19,31,.5); stroke: rgba(127,180,255,.22); stroke-width: 1.3; }
.cine .wf-glow { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; animation: wfPulse 4.4s ease-out infinite; animation-delay: var(--d, 0s); }
.cine .wf-dot { fill: rgba(127,180,255,.55); }
.cine .wf-label { fill: #b9d3ee; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.cine .wf-sub { fill: rgba(180,205,235,.42); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; }

.cine .wf-node.start .wf-box { stroke: color-mix(in oklch, var(--orange) 55%, transparent); }
.cine .wf-node.start .wf-dot { fill: var(--orange); }
.cine .wf-node.start .wf-glow { stroke: var(--orange); }
.cine .wf-node.core .wf-box { fill: rgba(12,26,42,.86); stroke: color-mix(in oklch, var(--accent) 70%, transparent); stroke-width: 2; }
.cine .wf-node.core .wf-dot { fill: var(--accent); }
.cine .wf-node.core .wf-label { font-size: 13.5px; }
.cine .wf-node.end .wf-dot { fill: rgba(190,225,255,.85); }
@keyframes wfPulse { 0%, 12% { opacity: 0; } 18% { opacity: .85; } 40% { opacity: 0; } 100% { opacity: 0; } }

[data-theme="light"] .cine .wf-box { fill: rgba(255,255,255,.72); stroke: rgba(43,93,176,.32); }
[data-theme="light"] .cine .wf-edge { stroke: rgba(43,93,176,.24); }
[data-theme="light"] .cine .wf-label { fill: #0d2540; }
[data-theme="light"] .cine .wf-sub { fill: rgba(30,60,100,.62); }
[data-theme="light"] .cine .wf-dot { fill: rgba(43,93,176,.6); }

@media (prefers-reduced-motion: reduce) { .cine .wf-flow, .cine .wf-glow { animation: none; } .cine .wf-glow { opacity: 0; } }

/* Endloser Durchlauf: diagonal von links unten nach rechts oben */
.cine .wf-scroll { animation: wfScroll 78s linear infinite; will-change: transform; transform: translateZ(0); }
@keyframes wfScroll { from { transform: translate(-1700px, 620px); } to { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .cine .wf-scroll { animation: none; } }