/* NOEMA FX 2026-10-31
   Nur Bewegungseffekte. Keine Änderungen an Texten, Farben, Typografie,
   Abständen oder Layout der bestehenden Seite. Alle Farben aus site.css. */

/* --- Lenis: weiches Scrollen ------------------------------------------ */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* site.css setzt html { scroll-behavior: smooth } – das würde gegen Lenis arbeiten */
html.lenis { scroll-behavior: auto !important; }

/* --- Hero: lebendes Netzwerk ------------------------------------------- */
.fx-has-net { position: relative; overflow: hidden; isolation: isolate; }
.fx-has-net > .container { position: relative; z-index: 1; }
.fx-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* unter dem Text zurückhaltend, nach rechts kräftiger */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.38) 45%, #000 80%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.38) 45%, #000 80%);
}
.fx-net.is-on { opacity: 1; }
@media (max-width: 720px) {
  .fx-net {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,.18) 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,.18) 100%);
  }
}

/* --- Terminal: System-Chips tippen sich ein --------------------------- */
/* Der Originaltext bleibt im DOM (Breite, Screenreader), nur unsichtbar. */
.system-chip.fx-type { position: relative; color: transparent; }
.system-chip.fx-type > .fx-type-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: #a8d9e5;
  white-space: nowrap;
}
.system-chip.fx-type.is-typing > .fx-type-text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 2px;
  background: currentColor;
  animation: fx-blink .8s steps(1) infinite;
}
.fx-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  color: var(--success);
  opacity: 0;
  transition: opacity .5s ease;
}
.fx-status.is-on { opacity: 1; }
.fx-status { min-width: 200px; }
.fx-status > b { font-weight: 700; }
.fx-status.is-booting { color: var(--gold-soft); }
.fx-status.is-booting > i {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: fx-blink .5s steps(1) infinite;
}
.fx-bar {
  display: inline-block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.fx-bar > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--success));
  box-shadow: 0 0 6px rgba(88,200,140,.6);
  transition: width .12s linear;
}
.fx-pct { color: var(--muted); min-width: 4ch; }
.fx-status.is-ready .fx-bar,
.fx-status.is-ready .fx-pct { display: none; }
.fx-status > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: fx-pulse 2.4s ease-in-out infinite;
}
@keyframes fx-blink { 50% { opacity: 0; } }
@keyframes fx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --- Ablauf: Leitung zeichnet sich beim Scrollen ----------------------- */
.service-process.fx-wired .process-step { position: relative; }
.fx-wire {
  position: absolute;
  left: 0;
  top: -2px;
  width: calc(100% + 12px);
  height: 2px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 10px rgba(242,207,137,.55);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.process-step:last-child > .fx-wire { width: 100%; }
.fx-node {
  position: absolute;
  left: -1px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(222,180,94,.4);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
  pointer-events: none;
}
.process-step.is-lit > .fx-node {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  box-shadow: 0 0 12px var(--gold-soft);
}
@media (max-width: 980px) {
  .fx-wire { width: 100%; }
}

/* --- Reduzierte Bewegung: alles statisch -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-net { transition: none; }
  .fx-status { opacity: 1; transition: none; }
  .fx-status > i { animation: none; }
  .fx-wire { transform: scaleX(1); }
  .process-step > .fx-node { transition: none; }
}

/* --- Banner: Lichtfluss über dem Bild ---------------------------------- */
.brand-panorama.fx-has-flow { position: relative; }
.fx-flow {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* --- Netzwerk als Seitenvariante ("Über NOEMA AI"): links ruhig, rechts sichtbar */
.fx-net--side {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.12) 45%, #000 72%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.12) 45%, #000 72%);
}
@media (max-width: 980px) {
  .fx-net--side {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.5) 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.5) 100%);
  }
}

/* --- Seitenweites Netz: fest hinter allem, nur in den Zwischenräumen ---- */
.fx-net--page {
  position: fixed;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: none;
          mask-image: none;
}


/* --- Signalleitung unter der Navigation ------------------------------- */
.fx-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  box-shadow: 0 0 8px rgba(66,211,255,.45);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
}

/* --- Anfrage-Impuls ---------------------------------------------------- */
.fx-ping {
  position: fixed;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid var(--gold-soft);
  box-shadow: 0 0 16px var(--gold);
  pointer-events: none;
  z-index: 9999;
  animation: fx-ping .7s ease-out forwards;
}
@keyframes fx-ping { to { transform: scale(16); opacity: 0; } }
.btn.fx-sending { position: relative; overflow: hidden; }
.btn.fx-sending::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: fx-sweep .6s ease-out forwards;
  pointer-events: none;
}
@keyframes fx-sweep { to { transform: translateX(100%); } }
.fx-form-status { min-width: 0; margin-top: 4px; }