/* ==========================================================================
   WireCode – Elektro-Effekte
   „Bewegung reduzieren" schaltet alles über die globale Regel in base.css ab.
   ========================================================================== */

/* ---------- Funken ---------- */
.fx-sparks { position: fixed; z-index: 300; width: 0; height: 0; pointer-events: none; }
.fx-sparks i {
  position: absolute;
  left: 0; top: -1px;
  width: var(--w, 10px);
  height: 2px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  transform-origin: 0 50%;
  transform: rotate(var(--a)) translateX(2px);
  animation: fxSpark var(--t, 400ms) cubic-bezier(.1, .7, .3, 1) forwards;
}
.fx-sparks b {
  position: absolute;
  left: -14px; top: -14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 240, .95) 0, rgba(255, 220, 120, .45) 35%, transparent 70%);
  animation: fxFlash .28s ease-out forwards;
}
@keyframes fxSpark {
  to { transform: rotate(var(--a)) translateX(var(--d)) scaleX(.15); opacity: 0; }
}
@keyframes fxFlash {
  from { transform: scale(.4); opacity: 1; }
  to { transform: scale(1.4); opacity: 0; }
}

/* ---------- Lichtbogen ---------- */
.fx-arc {
  position: absolute;
  left: 0; top: 0;
  z-index: 6;
  overflow: visible;
  pointer-events: none;
  animation: fxArc .46s linear forwards;
}
@keyframes fxArc {
  0% { opacity: 1; }
  10% { opacity: .25; }
  18% { opacity: 1; }
  30% { opacity: .5; }
  40% { opacity: 1; }
  75% { opacity: .7; }
  100% { opacity: 0; }
}

/* ---------- Terminal-Cursor ---------- */
.fx-typing::after {
  content: "▌";
  margin-left: 2px;
  animation: blink .7s steps(1, end) infinite;
}

/* ---------- Logo ---------- */
.fx-logo-wrap { display: inline-flex; flex: none; }
.fx-logo-wrap svg { display: block; }
.fx-logo-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.fx-logo-dot { transform-box: fill-box; transform-origin: center; }
.fx-logo.is-drawing .fx-logo-line { animation: fxDraw .9s cubic-bezier(.65, 0, .3, 1) both; }
.fx-logo.is-drawing .fx-logo-dot { animation: fxDot .95s ease-out both; }
@keyframes fxDraw { from { stroke-dashoffset: 1; } }
@keyframes fxDot {
  0%, 78% { transform: scale(0); }
  88% { transform: scale(1.6); }
  100% { transform: scale(1); }
}
.side .fx-logo-wrap svg, .login-side .fx-logo-wrap svg { border-radius: 24%; box-shadow: 0 0 0 1px #3A4048; }

/* ---------- Strom-Fortschrittsleiste ---------- */
.fx-current {
  position: absolute;
  left: 0; right: 6px; bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.fx-current span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(54, 210, 111, 0), rgba(54, 210, 111, .5) 30%, #36D26F);
}
.fx-current span::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #F2FFF6;
  box-shadow: 0 0 6px 2px #36D26F, 0 0 16px 5px rgba(54, 210, 111, .45);
  animation: fxHead .18s steps(2, end) infinite;
}
.fx-current.is-zero span::after { display: none; }
@keyframes fxHead { 50% { box-shadow: 0 0 4px 1px #36D26F, 0 0 10px 3px rgba(54, 210, 111, .3); } }

/* ---------- Leuchtstoffröhre ---------- */
.fx-armed .fx-tube { opacity: 0; }
.fx-armed .fx-tube.fx-on { animation: fxTube .9s linear forwards; }
@keyframes fxTube {
  0% { opacity: 0; }
  6% { opacity: .75; }
  9% { opacity: .08; }
  16% { opacity: .9; }
  19% { opacity: .2; }
  28% { opacity: 1; }
  32% { opacity: .45; }
  36%, 100% { opacity: 1; }
}

/* ---------- Leiterfarben-Leiste: Lichtimpuls ---------- */
.wirebar { position: relative; overflow: hidden; }
.wirebar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 160px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-200px);
  animation: fxWireShine 7s ease-in-out 1.2s infinite;
}
@keyframes fxWireShine {
  0% { transform: translateX(-200px); }
  35%, 100% { transform: translateX(calc(100vw + 40px)); }
}

/* ---------- Strom in den Leitungen (Ablauf) ---------- */
.wire { position: relative; overflow: hidden; }
.wire::after {
  content: "";
  position: absolute;
  inset: 1px 0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .5) 22px 30px, transparent 30px 64px);
  animation: fxFlow 1.4s linear infinite;
}
@keyframes fxFlow { to { background-position: 64px 0; } }

/* ---------- Wackelkontakt am roten Punkt der Überschrift ---------- */
.hero-title .c-red { display: inline-block; animation: fxLoose 7s steps(1, end) 2s infinite; }
@keyframes fxLoose {
  0%, 88%, 100% { opacity: 1; }
  89% { opacity: .12; }
  90% { opacity: 1; }
  91.5% { opacity: .2; }
  93% { opacity: 1; }
}

/* ---------- Empfohlenes Paket „unter Strom" ---------- */
@property --fx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.plate-rec::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--fx-angle), transparent 0 72%, rgba(54, 210, 111, .2) 80%, #36D26F 90%, #EFFFF4 92%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: fxSpin 4.5s linear infinite;
}
@keyframes fxSpin { to { --fx-angle: 360deg; } }

/* ---------- CTA: Signal läuft über die Pulslinie ---------- */
.cta-pulse .pulse-run {
  stroke: #6FE79B;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(54, 210, 111, .9));
  animation: fxRun 3.2s linear infinite;
}
.cta-pulse .pulse-dot { animation: blink 1.6s steps(1, end) infinite; }
@keyframes fxRun { to { stroke-dashoffset: 0; } }

/* ---------- Einblenden beim Scrollen ---------- */
.fx-armed .fx-reveal { opacity: 0; transform: translateY(26px); }
.fx-armed .fx-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .75, .2, 1);
  transition-delay: calc(var(--fx-i, 0) * 90ms);
}

/* ==========================================================================
   Weitere Animationen
   ========================================================================== */

/* ---------- Startseite: Aufbau beim Laden ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .kicker { animation: heroUp .6s cubic-bezier(.2, .7, .2, 1) .05s both; }
  .hero .lead { animation: heroUp .7s cubic-bezier(.2, .7, .2, 1) .75s both; }
  .hero .hero-cta { animation: heroUp .7s cubic-bezier(.2, .7, .2, 1) .85s both; }
  .hero .hero-facts { animation: heroUp .7s cubic-bezier(.2, .7, .2, 1) .95s both; }
  .hero .scope { animation: heroUp .7s cubic-bezier(.2, .7, .2, 1) 1.05s both; }
  .hero .demo { animation: heroDevice .9s cubic-bezier(.2, .7, .2, 1) .55s both; }

  /* Überschrift wird Zeile für Zeile „eingescannt" */
  .hero-title .ht-line { position: relative; display: inline-block; animation: scanIn .7s cubic-bezier(.6, 0, .2, 1) both; }
  .hero-title .ht-line:nth-of-type(2) { animation-delay: .32s; }
  .hero-title .ht-line::after {
    content: "";
    position: absolute;
    top: 6%; bottom: 6%;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--green);
    box-shadow: 0 0 10px 2px rgba(54, 210, 111, .7);
    opacity: 0;
    animation: scanBar .7s cubic-bezier(.6, 0, .2, 1) both;
  }
  .hero-title .ht-line:nth-of-type(2)::after { animation-delay: .32s; }
}
@keyframes heroUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes heroDevice { from { opacity: 0; transform: translateY(26px) scale(.985); } }
@keyframes scanIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scanBar {
  0% { left: 0; opacity: 1; }
  90% { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ---------- Drehstrom-Oszilloskop ---------- */
.scope {
  margin-top: 28px;
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1F2328, #16191D);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 40px -30px rgba(20, 22, 26, .6);
  max-width: 520px;
}
.scope-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--panel-muted);
}
.scope-legend { display: inline-flex; align-items: center; gap: 6px; }
.scope-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-left: 6px; }
.scope-legend i:first-child { margin-left: 0; }
.scope-legend .ph1 { background: #C98A57; }
.scope-legend .ph2 { background: #F1EFEA; }
.scope-legend .ph3 { background: #8E9299; }
.scope-cv {
  display: block;
  width: 100%;
  height: 84px;
  border-radius: 6px;
  background: #0A0B0D;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .85);
}

/* ---------- Ablauf: Mini-Displays ---------- */
@media (prefers-reduced-motion: no-preference) {
  .step-vis .mini-seg svg { animation: segFault 2.6s steps(1, end) infinite; }
}
@keyframes segFault { 0%, 70%, 100% { opacity: 1; } 72% { opacity: .15; } 78% { opacity: 1; } 80% { opacity: .15; } 86% { opacity: 1; } }
.mini-hit { transition: opacity .25s, transform .25s; }
.mini-app.is-searching .mini-hit { opacity: 0; transform: translateY(-4px); }
.mini-res li { transition: background-color .2s, color .2s; }
.mini-res li.is-done { color: #9AA0A8; }
.mini-res li.is-done::before { content: "✓"; color: var(--green); font-size: 12px; }

/* ---------- Einsatzprotokoll: Zeilen werden „gedruckt" ---------- */
.fx-armed .protocol-wrap tbody tr { opacity: 0; }
.fx-armed .protocol-wrap.is-in tbody tr { animation: rowIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.fx-armed .protocol-wrap.is-in tbody tr:nth-child(1) { animation-delay: .35s; }
.fx-armed .protocol-wrap.is-in tbody tr:nth-child(2) { animation-delay: .55s; }
.fx-armed .protocol-wrap.is-in tbody tr:nth-child(3) { animation-delay: .75s; }
.fx-armed .protocol-wrap.is-in tbody tr:nth-child(4) { animation-delay: 1.05s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .protocol-result td:nth-child(3) .led { animation: blink 1.1s steps(1, end) infinite; }
}

/* ---------- Typenschilder: Metallglanz beim Drüberfahren ---------- */
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 47%, rgba(255, 255, 255, .1) 53%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 120% 0;
  opacity: 0;
}
.plate-rec::before { background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .14) 47%, rgba(255, 255, 255, .03) 53%, transparent 62%); }
@media (prefers-reduced-motion: no-preference) {
  .plate:hover::before { animation: plateShine .9s ease-out; }
}
@keyframes plateShine {
  0% { opacity: 1; background-position: 120% 0; }
  100% { opacity: 1; background-position: -60% 0; }
}
.plate-price .amount { font-variant-numeric: tabular-nums; }

/* ---------- Admin: Belegung leuchtet nacheinander auf ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bar span { animation: barIn .35s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
}
@keyframes barIn { 0% { opacity: 0; transform: scaleY(.3); } 60% { opacity: 1; } 100% { transform: none; } }